Typetester’s base font size
As much as I’m proud of the Typetester’s popularity and the recent revival of typography for screen, there’s still significant number of web designers, who are confused about the TT’s base font size. Until I place default sizing control into TT’s 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’d set font size to 16px (or 100%, or not set it up altogether), the 1.1em would be 17.6px, which is pretty nasty number to work with, since the screen can’t display 0.6 of a pixel.
Still not convinced? Try calculating what would be font size in ems, if we’d want our heading in 18px?
11 Comments
Interesting - I haven’t read anything about 62,5% before or 16px default.
I don’t use pixels anymore. Mostly I choose em as a base, but then Exploder has different counting, so mostly absolute keywords do it for me - small, medium, large…
Comment (#) by dusoft — 3rd November 2005.
I must congratulate you on the excellent tool that Typesetter is. Excellent work!
The issue of default text size is a tricky one, especially with IE getting it so different from everyone else. Also, what about that issue of the W3C declaring pixels as a “relative measurement"? (see Jeffrey Zeldman’s “The average lenght of a web user’s arm” article in his 2003 book). Do you think the 62.5% would get us safely around that issue?
Comment (#) by Rodrigo Amorim — 20th December 2005.
I. Love. This. Tool.
What did I do before I found your site?!?
Thank you so much!
Comment (#) by Toby — 28th December 2005.
Really nice trick.
Comment (#) by isay — 16th January 2006.
cool!
Would it be possible to do a typster light?
i’m not sure what could go but it would be nice to have it fit all on one screen.
very nice!
Comment (#) by shaggy — 17th February 2006.
Wow! This is great! It’s nice seeing how it renders with my own fonts in MacOSX but it would be even better if you had screen captures or emulate some how so we could preview what it’d look like in Windows.
Amazing tool anyways and the presentation is beautiful. Thanks for creating it.
Comment (#) by dvessel — 17th February 2006.
Nice, tool. However, I am sort of curious as to why you believe a base value of pixels should be set and em value to adjust.
I recently read Bulletproof Web Design, by Dan Cederholm. He advises using a base value of small and use percentages to adjust. Claiming a more bulletproof design.
What’s your take on his approach
Comment (#) by Chris Pritchard — 5th March 2006.
Very useful tool.
Thank you!
Comment (#) by CraZy_DeveLopeR — 5th March 2006.
You see, that is the trouble with web standards. People blindly follow what some guru writes in his book. Dan’s method is bulletproof, but it’s certainly no the only way.
Most of the time I don’t use pixels (even though in TT I did set it in pixels), but when I write
font-size: 62.5%, I actually meanfont-size: 10px;.Comment (#) by marko — 6th March 2006.
Great, great, great tool. Thank you (!)
Comment (#) by Harry — 27th March 2006.
Being a traditional letterpress typographer, as well as a digital one, I think I might understand the em unit differently than many web designers.
I specify font size not in relative ems, but in the absolute unit of points (or pixels in the digital realm). Once the font size is set, that is when the em unit comes in?for specifying leading, letterspacing, paragraph margins, etc? In other words, the font size is at the top level of typographic hierarchy?set in absolute units?and it is not relative to a paramount ?base-size?.
I understand the idea behind the base-size concept, but I don’t see it being too useful, since I can never imagine a situation where I would want to increase or decrease every element on the page all at once.
I think the benefit to the em unit, especially in the digital realm, is in being able to change the font size for, say, different styles of paragraphs which exist on the same page while retaining their proportionally relative leading, paragraph indents, letter-spacing, etc. With the use of a base-size system, if you want to increase a paragraph’s font size, you then also have to alter these things one by one to retain the same proportions.
Maybe I don’t understand the benefit of the base-size concept fully vs the traditional use of the em unit, in which case I am curious to hear more.
Comment (#) by Nick Sherman — 3rd April 2006.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.