CSS font-size Property

Just so you know, we’re not all print all the time here at FontShop. In fact a great majority of my work here has been conveyed solely over the internet. In terms of graphic design, print’s my first love, but I distinctly remember some time in late 2009 that I heard something about webfonts, the canvas element, pseudo-selectors, transitions, and a number of other experimental and not-widely-supported web technologies, and thought, ‘I need to really dig down into this stuff.’ One ambitious autoinitiated web project later (it was something similar to Readability, before I knew it existed, indeed, perhaps before it did exist), and I was happily up to my nose in markup, CSS, JavaScript, and preprocessing, feeling good about the direction of the internet and electronic media in general.

Picture 1

Since then I’ve tried to keep up with at least the aspects that touch web typography, but I’m not a current practicing web designer, or a specialist in web composition. That distinction goes to people like Eric Meyer. I am though, like most typographers, a natural fiddler and figure-outer, and so briefly I’d like to share one tiny but important practice regarding sizing type on the web.

body { font-size: 100%; }

This is it. Start by specifying the font-size as 100%. Assuming that you are capable of controlling all other viewing conditions, this is the equivalent to specifying 12pt, 16px, 1em, the keyword medium, or its associated number value, 3. Actually, after testing it, I would never recommend using those old html number values, but the rest hold up. From here, all other font-size specifications should be in em units, e.g. this: h1 { font-size: 3em; }

So why percent? And why 100%?

First, percent holds up where the others don’t, namely in not interfering with font scaling, user overrides, and not wrecking everything in older browsers. About 100: It behaves predictably, and it’s large enough to comfortably read on just about any screen. (The text you’re reading now is set to 100% or 16px.) A caveat: There’s a strain of thought regarding font-size that says 16px is an unusual reference size, so why not shift the scale so that 1em is the same as 10px, 1.4em the same as 14px, and so on? To do so, divide 10 by 16, and set your body font-size at this percent, 62.5%. Then set subsequent elements in relation to this, in em units. This is easily achievable and works reliably in most browsers, but still gives you problems in the older browsers. So weigh your options, and stick with what you know works in the majority of cases.

Speaking of sticking with what works, you should also consider doing the opposite: abandoning older browsers for newer ones, taking advantage of newer CSS functionality, and letting a service such as Modernizr or Sass deliver more primitive CSS to the old browsers.

Hang on, what kind of new CSS functionality?

One that directly relates to this subject is calc(), which lets you do simple math in your CSS. It’s really handy for specifying fractional units simply, and for mixed-unit calculations. Another is a new unit of measure, rem, which unlike em, functions as a constant, referencing the root em rather than the em specified in the parent element.

So what size is it going to be, really?

We’ve arrived at the saddest part of this piece on sizing. At this point in time there’s no definitive answer. With screen resolutions all over the place, a pixel is not a pixel is not a pixel, and while absolute units such as the point, (1 in = 72 pt) ought to stay absolute, apparently doing so would break old designs, and we’re stuck with them being reduced to the task of stand-in multipliers for relative units. So an inch is 96 reference pixels, a point is 1.333333px, and a physical pixel may be anywhere from 1px to 2px or more in reference pixels.

The good news


If there’s anything I’ve learned about web standards in the past five years, it’s that people who care about this stuff are in a position to set the standards. At TypeCon in Atlanta back in 2009, there was a panel discussion about what form commercial webfonts would ultimately take. It was less than a year after that that all major browsers were planning to support the new format, woff. Standards bodies followed the lead of the browsers. So ultimately we’re the ones driving this.

That’s it for now. Thanks to Pieter van Rosmalen’s Nitti for setting this week’s nameplate. Using Type continues here Thursday.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s