I have just somewhat completed the css for my portfolio website but have noticed very strange font rendition differences between browser.
It’s easy to see on the screenshot below but essentially the font Courier at 10px size looks nice and legible in Firefox but not in Safari.
Is there any way to simply fix this via CSS or any other means (other than increasing the font size)?
have you tried using ems instead of px? or possibly using trying font-weight bold? I am not sure why you are testing in a beta browser. but that is what I would try. Looks like the same thing that happens to verdana on pcs.
Firefox is known for it’s "thick and chunky" font rendering. Looks like Courier in this case is an extreme example. Might wanna try "Courier New", Courier, Sans-Serif. And see if "Courier New" looks any better. Doesn’t seem like something you can fix with CSS or any other web technology you can really control, it’s a browser thing.
It’s probably different on a Mac, but on my PC Courier is a Raster Font making it unsuitable for most typographical needs. Courier New is Open Type on my PC and although it renders nicely there are still small differences between browsers..
Thanks Moxie, I will try out the ems vs px thing later today. Though it would be a strage solution as either way should result in the same sized type.
Nevertheless thanks for the suggestion. I will give it a try later.
In regards to the Safari 4 beta, I was simply too curious about the browser to stick with the ‘normal’ 3.6 (or whatever the latest non-beta was) I hardly ever use it anyway.
Thanks Chris, for pointing out the font stack. I will also give that a try.
And last but not least thank you Dave. Interesting to hear about Courier being a raster font on windows. Definitely didn’t know that. It seems that the switch to Courier New might be inevitable—if i dont have to end up using a sans-serif in the end.