How Not to Use Pixels for Font Size

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

If you want a responsive web design where the font size can be adjusted by the users preference via the browser, you do not want pixels. Instead use the unit of “em” or percentages.

Here is how.

In your HTML CSS …

html {    
    font-size: 100%;
}

That means that the font will be in the browser’s default size, which is typically 16px.

If your design calls for larger or smaller font than that, use “em”. For example, if you want exactly 16px, then it would be 1em. As in …

body {
    font-size: 1em;
}

If you want your h1 to be 32px, use “2em” as in …

h1 {
    font-size: 2em;
}

If you want your h2 to be 24px, it would be 24/16 = 1.5em.

If you want class “.smalltext” to be 12px, it would be 12/16 = 0.75em.

Advanced note: In HTML5Boilerplate, they use

html {    
    font-size: 100%;
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}

where the 2nd and 3rd line is to “prevent iOS text size adjust after orientation change, without disabling user zoom”.