I thought I’d share this useful tool that the Izilla team have been using for a while now when building our web projects.
The Relative Font Size Reference Chart is a simple, customisable table chart that calculates common, relative font sizes in both percentages and ems.
Why is this important? Well, for IE’s font resizing to work, fonts need to be set using a relative size unit.
It becomes indispensable as your stylesheets become more complex, where trying to calculate nested font-sizes can leave you more than confused.
As the common browsers have a built-in default base font size of 16px, we can use this figure to calculate which value to resize an element by to achieve our desired font size.
To use the Reference Chart, find the base font size along the top row, and then find the cell that correlates to your target font size from the left.
For example, to achieve 12px on the body, find the Base Size - 16px, then Target Size - 12px, which gives you 0.75em.
If you then wished to set h1’s to be 20px, the Base Size is 12px, Target Size is 20px, which gives you 1.667em. Too easy!
The Chart also allows you to alter the size range from 1-50px, and choose which unit (% or em) to display the results in.