Having some problems with fonts…

[Historical Forums User]

Okay, so I’m creating my first site from scratch. I created my mockup in Photoshop (as is customary) and now I’m getting ready to code everything. But I’m having some problems getting my fonts to look like my mockup.

Here is my image from photoshop:
[img]http://austindw.com/onesourcecharlie/ones_ps.png[/img]

And here is what I get from my CSS:
[img]http://austindw.com/onesourcecharlie/ones_web.png[/img]

Here is my CSS:

Code:

div#extra1 h3{
font-family: Constantia, “Lucida Bright”, Lucidabright, “Lucida Serif”, Lucida, “DejaVu Serif,” “Bitstream Vera Serif”, “Liberation Serif”, Georgia, serif;
font-style: italic;
font-size: 1.7em;
text-align: center;
color: white;
margin-top: 70px;
position: absolute;
}

My font settings in Photoshop are Georgia, 31pt, Italic. Is there a reason why when I put in 31pt into the CSS it looks HUGE in comparison to Photoshop’s 31pt?

Anyways, my main question is why does the web example look so…bold? I really want it slimmer like my Photoshop rendition.

Thanks in advance!

[Historical Forums User]

Okay, well setting the font-weight to "lighter" helps, but not as much as I would like.

[img]http://austindw.com/onesourcecharlie/ones_webl.png[/img]

[TheDoc]

Header tags are automatically bolded. You need to add:

font-weight: normal;

to make a header tag unbolded.

[Historical Forums User]

Ah! That explains it then! Thank you.

Also, is there a particular reason why the fonts look slightly different in Photoshop? Is it because Photoshop anti-aliases fonts and web-browsers do not?

[TheDoc]

"Adub" wrote:

Ah! That explains it then! Thank you.

Also, is there a particular reason why the fonts look slightly different in Photoshop? Is it because Photoshop anti-aliases fonts and web-browsers do not?

Firefox especially has anti-aliasing problems. IE and Safari do a pretty good job.

If you’re ever worried about how a font might turn out once it hits the web, turn anti-aliasing off in Photoshop (under the Character palette). For content areas, whenever I present a mockup to a client, I always make sure it’s set to "none" – that way there are no surprises when they see the HTML version.

[Author]

Posts