If you’re as meticulous a developer as I am, you’ll appreciate what I’m talking about today. If your development style is more along the lines of “Ehhh … that looks about right” you’re going to think that I’m out of my ever-loving mind.

The problem is simple. When cutting up a design, I check it to make sure that I’m getting all the font sizes correct. Since Photoshop has an annoying habit of setting font sizes to figures like 18.39px, I round to the nearest even number.

In the past, our reset style sheet used a 14px base font size, and everything else is set via ems. That means, if I want a H3 tag to have a computed style of 20px, then the correct em size would be 20/14, or 1.4285714286em. “Whargarbl!,” says you. “I’m not putting that crazy number in my code! It’s unsemantic/unseemly/unkind to kids who don’t know long division! And I agree.

You could round it to 1.42em, but that’s not very memorable, and you’re counting on the browser to round it correctly for you, which it might not do all the time.

The problem is that 14 isn’t very divisible: its divisible factors are 7 and 2; but 16 is divisible by 8, 4 and 2. What difference does that make? I have a handy table to show the advantage of using 16px as a base font size:

Some additional advantages of using 16px as your base font size are:

1. Just about any even number divided by 16 will have a maximum of three decimal places.
2. You’ll be able to do the math quicker: every 4px, add .25 (20 = 1.25, 24 = 1.5, 28 = 1.75, etc.). If you’re going up by 2, add .125 (18 = 1.125, 22 = 1.375, etc.).
3. Learning this system and using it consistently will allow you to develop more efficiently, and you won’t be going to bed at night with math conniptions anymore.
4. There are many additional benefits.
5. If you want some further reading about typography on the web, I cannot recommend Butterick’s Practical Typography highly enough.