Serendipity Forums

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, ? 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.

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, ?

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