mockup web layout font is smaller than illustrator

It may sound o开发者_开发百科bvious:

I'm used to design mockups of my webpages with illustrator.When I translate everything to css and test the page into my browser I can see that fonts are bigger in the illustrator mockup even if I used the same font setting on the css side.

//in css i have
body{font:Georgia,"Times New Roman",Times,serif;font-size:16px;
font-weight:normal;}

//I wrapped the example text inside "h1" tags 
h1{font-size:24px;font-weight:normal;}

//in illustrator I have font georgia,24px,font-style "regular" selected

How could I fix that?

thanks

Luca

They seem to be different fonts altogether - look at the lowercase e and g. Check which font IE is using with the inspector. You can activate the inspector by pressing F12.

EDIT: The font IE8 is using looks like Times New Roman, IE's default font. Try replacing the font:Georgia part with font-family:Georgia. The font property is meant to be used as a shorthand to set all font properties at once and will probably not work when used to set only the typeface.

I would imagine that this is because different browsers handle fonts differently to Illustrator. You can control the font size / spacing and that kind of thing using CSS, as you've noticed - have you got any other font settings you're using in Illustrator like kerning or that sort of thing? That could be affecting it.