Typetester’s base font size

As much as I’m proud of the Typetester’s popularity and the recent revival of typography for the screen, there’s still a significant number of web designers, who are confused about the TT’s base font size. Until I place default sizing control into the interface, here’s a quick clarification. The base size control is now added.

The base font size of the TT is 10px, which means 1em is 10px, 1.2em is 12px and so on.

The ems for the screen are actually multipliers of the document’s base font size. The good practice is to set document’s font size to 10px (or if you want it to be resizable by the Internet Explorer users, set it to 62.5%).

body { font-size: 62.5%; }

Once you fix your global sizing (which is 16px by default in most of today’s graphic user agents), it’s easy to multiply textual elements with ems.

body { font-size: 62.5%;  /* 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The reason behind setting the body element’s font size to 10px, is the ease of multiplying everything else with round number 10. If we set font size to 16px (or 100%, or not set it up altogether), the 1.1em would be 17.6px, which is a pretty nasty number to work with, since the current screens can’t render 0.6 of a pixel.

Still not convinced? Try calculating what would be the font size value set in ems, if we wanted to typeset a text at 18px?

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?