CSS use EM as a relative font-size, instead of PX

It goes back to Internet Explorer 3.0, but EMs are still the better way to define font-sizes. It takes a small learning curve to get the hang of it, but when it comes to quick changes in overall font-size, this is the way to go. Default font-size for most common browsers is 16 pixels. There are only three articles you need to read to tame that size with relative ems.

1em = 12pt = 16px = 100%

Useful reads

The EM formula

Child pixels / Parent pixels = Size in EM

Not good at calculating? Use the EM calculator

Still targeting Internet Explorer 6?

While Internet Explorer handles EM, it does so only when the base font is set to a percentage!

body { font-size: 62.5%; }
body wrapper { font-size: 1em; }

Leave a Reply

Your email address will not be published. Required fields are marked *