If you are into em-based layouts, you probably want more precision when translating your photoshop designs into pixel-perfect HTML and CSS creations. Simply setting the font-size in your body element to 62.5%, will make sure that from now on, you can rely on the rule of 1em = 10 pixels.
body {
font-size: 62.5%; /* 1em = 10px */
}
Note: Careful if you modify the font-size on a container element – that will break the 10px rule on all the contained elements!
Subscribe (RSS)
January 21st, 2009 at 12:36 pm
* {
font-size: 62.5%; /* 1em = 10px */
}
h1,h2,h3{font-size:150%;….}
January 21st, 2009 at 1:50 pm
That is a valid possibility, grosser. I became so used to include a reset style sheet at the top of my other styles that I prefer setting the font-size property to the body element only as other elements get reset anyway. Later, just as you do, I get to specify font sizes to other elements like titles, paragraphs, … etc.
It may be just me, but I don’t trust the star selector… it makes me itch.
January 21st, 2009 at 7:07 pm
To be pixel perfect compared to your photoshop design is IMHO silly and pointless. The web is not meant to be pixel perfect. It’s meant to look beautiful regardless of sizes.
Why I’m bothered by the ems is, that browsers round the numbers differently. So if you’re ems don’t round up to a full pixel, you won’t get the same font size across browsers. A pitty.
p.s.: a little typo, you wrote 63.5% in the text, but the number is correct in the code
January 21st, 2009 at 8:49 pm
Well, I am pretty much aware that the web is not meant to be pixel perfect – just look at this site – that was just an expression.
Still, you can’t deny that it is much easier to translate the graphical concept to a web page if the units are similar.
On your note about rounding em units, I don’t think this proves to be a problem as you won’t get that much of an error to be noticeable. Also I prefer not to use ems or percentages all around, some elements still need to be specified in pixels to do the job.
By the way, thanks for spotting the typo.