Fonts Internet Explorer vs. Safari

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
danst0
Regular
Posts: 197
Joined: Tue Jul 13, 2004 10:50 am

Fonts Internet Explorer vs. Safari

Post by danst0 »

Hi,

I am wondering how I can adjust the font for different browser / OS used. For development I am using Safari and Firefox on OS X. Now I realized that the font rendering is quite different for the various browser types:
OS X Safari / Firefox: F-Family: Verdana

IE 6, Windows: font is also Verdana, The font looks a lot thiner
IE 7, Windows: font is also Verdana, The font looks still thiner
IE 8, Windows: font is also Verdana, looks a bit thiner

For all IE: The spacing is very different, in the sidebar wider (more unexpected new lines), in the text more narrow (more words per line)

I found a lot about using different CSS commands for different browsers. But my major problem right now is how to get the fonts good looking in the IE version as well?

Daniel

ps. my second question would be: How do you differentiate between IE browser version (6, 7, 8)? The layout seems to be quite different for those.

pps. I just added screenshots for clarifications. Only IE 6 and 8 and Safari, this is the bulletproof theme (not my layout), but all mentioned effects can be observed.
Attachments
IE 8
IE 8
IE 8.png (79.55 KiB) Viewed 3890 times
IE 6
IE 6
IE 6.png (55.07 KiB) Viewed 3890 times
Safari OS X as it should be
Safari OS X as it should be
Safari OS X.png (93.06 KiB) Viewed 3890 times
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Fonts Internet Explorer vs. Safari

Post by yellowled »

danst0 wrote:IE 6, Windows: font is also Verdana, The font looks a lot thiner
IE 7, Windows: font is also Verdana, The font looks still thiner
IE 8, Windows: font is also Verdana, looks a bit thiner
Rule of thumb: If fonts look strange in Windows, check if you have ClearType enabled. Might not even be possible if you're using an emulator, a virtual machine or an online screenshot service.
danst0 wrote:I found a lot about using different CSS commands for different browsers. But my major problem right now is how to get the fonts good looking in the IE version as well?
It really depends on how you style fonts.

The typography gospel according to me: You want to use em or px values for font-size. Be aware that px means users of IE 6 and 7 will not be able to resize the text in the browser, so use em or ignore those browsers altogether. Apart from that just google "web typography" and start reading. :)
danst0 wrote:How do you differentiate between IE browser version (6, 7, 8)?
There's tons of techniques for that, almost all of them with (dis)advantages. Personally, I prefer to add classes to the HTML element using conditional comments. I also ignore IE 6 completely these days, since it's an outdated, insecure piece of software which isn't even remotely close to being a proper browser.

Also, it is quite liberating to realize that web is not print. Web sites don't have to look exactly the same in any browser! There is only one group of people in the world who take screenshots of a web site in 12 different versions of 5 different browsers on 3 different platforms and compare them to pixel perfection in Photoshop -- web designers. :)

EDIT: Also, it would be way easier to analyze possible issues with a live blog URL than screenshots. I'm assuming the IE issues are related to the actual content here, but I can't really check in a screenshot.

YL
Post Reply