Fonts Looks Different on Web

[realph]

Hey there, a pretty dumb question I’m about to ask… Why do fonts not look the same on the web?

Here’s my Photoshop design (Georgia – Bold), text looks clear and clean.
[attachment=1]Screen shot 2010-08-03 at 21.29.20.png[/attachment]

Here’s my text running on the site (Georgia – font weight: bold), it looks fat and bloated, why is that?
[attachment=0]Screen shot 2010-08-03 at 21.29.35.png[/attachment]

If someone could help me out I’d really appreciate it. I’ve seen loads of really nice sites with really clean text, how are they achieving this?

[TheDoc]

Such is life in the land of fonts. If you want a better idea of how fonts will look in Firefox, turn off Anti-aliasing in Photoshop.

To get crystal clear fonts across browsers, people use services like Cufon. As long as they are only used for headers (not body content) it should load quickly.

[realph]

Cheers I’ll try to keep that in mind. Let’s pray that one day all fonts on the web will look as good as they do on applications.

[jasikamarshel]

Browsers recognise a set of standard fonts Arial and Times New Roman, for example), so it’s always a good bet to use one of those on your site,If you need to use a non-standard font to achieve a certain effect on your site, you can also publish your text as an image. When you convert your text into an image, web browsers won’t have to interpret your chosen font, and your text should look the same on all computers,if it change then as per your browser you change on font size of web page text in Internet Explorer and Fire-fox web browsers you can easily change as per your need.

[Egghead]

Georgia is hardly a "non-standard" font!

To realph: just try using this…

Code:

font-weight: normal;

That may be all you need to get your h1 looking the way you want it (or h2, or whatever you’re using this for). You’ve seen loads of sites where the font looks clean, because most often designers nullify the default bold behaviour associated with headers.

Attn: Moderators
This post should probably be moved to CSS Help & Troubleshooting

[Author]

Posts