Search code examples
cssfont-sizeadobe-illustratormockups

mockup web layout font is smaller than illustrator

It may sound obvious:

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.

enter image description here

//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

Solution

  • 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.