Typetester’s base font size

21. Oct 2005.

Characters	962
Syllables	263
Words	218
Sentences	10

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?

Follow @markodugonjic

12 shouts to “Typetester’s base font size”

dusoft
001—2005.11.03.19:10

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…
Rodrigo Amorim
002—2005.12.20.18:22

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?
Toby
003—2005.12.28.01:46

I. Love. This. Tool.

What did I do before I found your site?!?

Thank you so much!
isay
004—2006.01.16.04:07

Really nice trick.
shaggy
005—2006.02.17.01:59

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!
dvessel
006—2006.02.17.02:13

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.
Chris Pritchard
007—2006.03.05.16:56

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
CraZy_DeveLopeR
008—2006.03.05.19:43

Very useful tool.
Thank you!
marko
009—2006.03.06.09:13

“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.”

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 mean font-size: 10px;.
Harry
010—2006.03.27.00:53

Great, great, great tool. Thank you (!)
Nick Sherman
011—2006.04.03.01:16

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.
@kinduff
012—2012.12.31.06:05

Typetester’s base font size http://t.co/1wVqYCgK

Typetester’s base font size

Interested in more content like this?

Read this next: