I’m kinda tired of seeing blog posts advocate
html { font-size: 62.5%; }
In case you’re not aware, this makes the default font size for your entire website 10px (assuming the browser’s default font size is 16px, which is the standard but is also user-configurable). Sure, it makes the math easier when you’re working with relative font sizes from that point on (either ems or the more future-friendly rems), but it kinda ignores the point of setting a default font size in the first place.
If you’re going to set a master font size for your entire website, I’d wager that you wouldn’t want that size to be 10 pixels. That would be hideously small for most applications, even for visitors with 20/20 vision viewing your site on the latest, greatest Retina MacBook Pro.
Instead, I believe that a website’s default font size should be what you actually want your text to be by default. I know, sounds crazy. This is usually going to fall somewhere in the 12-14 pixel range, although it can vary.
“But Tracy,” I can hear you say, “the math! You’re making the math harder!” Well, first off, there are calculators built into every major operating system you’re likely to be developing on. If you think that calculating the proper font size over and over is incredibly tedious, well, you’re right. I’ve been there and I’ve done that. But that’s still preferable to a litany of jobs out there in the world.
Secondly, there are tools to help you. CSS preprocessors (which you may have noticed I’ve become rather fond of) will let you create functions that do all the math for you. All you have to put in your Sass or LESS stylesheet is something along the lines of:
h1 { font-size: calc-em(20px, 13px); }
This would produce the following CSS:
h1 { font-size: 1.53846153846154em; }
Oooh, that’s an ugly em. But what do you care? It’s the browser’s problem, and it doesn’t really have a problem with it.
Lastly, if you’re using ems, then nesting is going to wreak havoc with your “simplified” math anyway. Of course, this problem is solved by rems, but rems introduce their own problems. I know, you can’t win. Fortunately, if you’re using CSS preprocessors (there it is again), you can use a mixin to get around the lack of rem support in some browsers (or just grab my responsive sass mixins off GitHub).
So please, stop thinking in terms of easy math, and start thinking in terms of easy maintenance. Set your default font size in terms of what you want the default font size to be, and build your other elements around that.