Relative Font Size Reference Chart
By Matt Stow at 7:54 in: Design | Development | Typography | UsabilityI 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.
- Permalink
- Bookmark: Digg This! | Del.icio.us | Technorati
Chart needs a starting point so that users are reminded that default font size is 16
Otherwise I like it Matt
There you go Mr Strong. I have added a reminder note about the default base font size. Happy?
Matt’s design is elegant ..great works
Thanks for the useful post. I learned lot about the fonts after reading this. Will definitely like to use it for the next time.
This is a cool tool. Within the past month I’ve been trying to “sleekify” my web-building process, and this chart is something I’ve been using for about a week now - and it’s made things easier. The other “most dramatic” tool I’ve been using is the excellent 960 Grid System that Nathan Smith came up with. (at 960.gs) Thanks for providing yoru chart - I just wanted to let you know it’s being used!
Thanks for the chart. It makes the work easier. Got one question, Is there a specific reason why you use 3 decimals instead of 2? I’ve seen people doing it with up to six decimals like int this example: 16px = 1.333333em
Regards,
Augusto
@ Everyone: Thanks for the positive feedback, and I’m glad you’ve found the Chart useful
@ Augusto: 3 decimals gives me that extra bit of precision, while not going overboard like your 6 decimal example. I’d get bored typing more than 3
I always set my blog to 62.5%, then by doing that anything in em is the same as the pixel’s cousin.
So 1.6em is 16px, 1.2em is 12px…
Thanks for the chart, very useful, particularly when changing over to css
What a great idea! Wish I’d thought of this. Very useful.