“Content is king” for most websites, so choosing the right font and font-size can have great impact on your website’s usability and accessibility. There are a few approaches when setting a font size for your website:
- Don’t define font-sizes in your style sheet and let your browser take control
good choice if you’re short on time and don’t mind cross-browser differences
- Define absolute font sizes in your style sheet using keywords (xx-small, x-small, small, medium, large, x-large, xx-large)
interpreted different throughout browsers
- Define absolute font sizes using pixels
Cross-browser support for pixels is good; downside is that Internet Explorers’ build-in text-sizing option refuses to resize text that is set in pixel values. Other browsers might force text-sizing, overruling the pixel values
- Define absolute values using points
Points are not meant to be used for screens, so just don’t
- Define relative values using ems and percentages
advised by the Web Accessibility Initiative (WAI).
A great number of website owners choose to set their font sizes at absolute pixel values, taking full control over their site’s appearance. But why not let your website users choose a font-size of their preference? They are the ones reading your content after all! Relative font sizing provides this option. Here are some facts to keep in mind when using relative values:
- The default font-size for virtually all web browsers is the equivalent of 16 pixels
- Both ems (e.g. 2em) and percentages (e.g. 200%) are relative units, always computed with respect to their parent element (this is called “inheritance”)
- ems and percentages give similar results when applied to font-sizing, but behave different when used for sizing html elements.
Consider the following un-styled html code:
{code type=codetype}
<body>
<p></p>
</body>
{/code}
The font-size of the paragraph text will be that of the (first styled) parent element. Since there are no sized applied yet, the paragraph text will inherit the font-size of the <body> element that is equal to the browsers’ default 16px
Setting the paragraph to a value of 1em will result in an equivalent of 16px, 2em in an equivalent of 32px etc. but what if you would like to set the paragraph text to an equivalent of 18px? You would need to set a value of 18/16 = 1.13em.
To avoid these kind of calculations, I would advice to apply the 62,5% method in your style sheet.
{code type=codetype}body {font-size:62.5%}{/code}
This will reset the initial font size from 16px to 10px, making conversion a whole lot easier (1em=10px, 1.8em=18px etc.). Remember that the 10px value is only applied to the direct descendants of the <body> tag. When calculating font-sizes for nested elements, it can be useful to use this handy em calculator.
To control your font-size, i wrote this jQuery plugin, check it out.
