Archive

For those who don’t already know, there’s been some really interesting conversation in the web design community on the topic of responsive design. In short, it describes a method by which a single site template can serve content for both largish sized screens like desktops and laptops, as well as smallish sized screens like smartphones, and perhaps tablets.

But the typography guy in me has always been somewhat conflicted about whether the font sizes in the content are being displayed adequately. Especially after reading an article like the one on Smashing Magazine: 16 PIXELS For Body Copy. Anything Less Is A Costly Mistake. In short, it suggests that a larger font size works for web copy because it is usually viewed from further away. In other words, the ideal font size will vary depending on the viewing distance between the content and the reader. This led me to another realization. As we strive to future-proof our designs, we should expect that ideal font sizes will change as monitor resolutions increase, so is there a way we can calculate the ideal font size? I think there might be.

Influence of ideal reading text size

As mentioned earlier, this post was influenced by an article, reiterated on the iA site, that states that there is a relationship between reading material distance, and it’s ideal legible font size. My first question was: How do you define ideal font size in relative terms?

The answer to this I think lies in something called fovea centralis:

The fovea is responsible for sharp central vision (also called foveal vision), which is necessary in humans for reading

So we need “foveal vision” to read, fine. How does it work? The part that stuck out for me was:

The fovea sees only the central two degrees of the visual field.

I’ve also read that it’s only one degree. But regardless, it’s small. And within this visual field, one can focus on about 4 letters at a time. This probably means that with any book you read, you’ll be inclined to place it far enough away so that you can read about 4 letters at a time, per the comfort of your foveal vision. Interesting, but is that useful information? Maybe, but not on its own. Must read more.

Common comfort distances for viewing screens, in home theatres?

Doing more searching, I stumbled upon a discussion about angle of view (or field of view) in the context of the ideal distance to put a large HDTV away from the couch. It was anywhere from 20-40 degrees, an average of 30 degrees. Interesting. It made me think that there must be a similar discussion in the context of positioning one’s monitor.

That led me to this gem from my very own Canadian government. It confirms that the ideal viewing angle is 30 degrees.

Lightbulb

Like the crackle of an incandescent bulb, I realized something. Ideal viewing distance should mean that the reading media is positioned far enough away to accommodate a 30 degree viewing angle, give or take. Within this field of view lies foveal vision, which uses 1-2 degrees of FOV. Does this not sound like the beginnings of a ratio that can be calculated? It sure does!

Calculations for ideal font size (The Meat)

Here we go. Let’s assume that you have a screen, any size really but we’ll say that it’s 1600 x 900.

Like a good proper computer user you are, you’ve situated the screen at the proper distance of about a 30 degree field of view. Well done.

The next step, admittedly, I fudged a little. But we don’t use square monitors, so let’s average 1600 x 900 to arrive at a 1250 pixel perfect circle diameter. This circle reflects a 30 degree field of view, and within it is our 1 degree or so of foveal vision. So:

1250 * (1/30) = 42 (rounded). Our foveal vision on this screen is about 42 pixels wide.

But let’s not forget, the foveal vision accommodates 4 letters, so:

42 / 4 = 11 (rounded). One letter should be set for 11 pixels wide.

But wait, fonts are not usually measured by width, and certainly not on the web, so now what? I found that there is no easy answer to translating width measurement to font height. While it seems there are scripts that allow you to detect a font’s x-height, they are laborious. Browsers don’t usually calculate them. I haven’t found an elegant solution for this part yet, so it’s time for another fudgery. Assuming that the font is reasonably well proportioned, we can use the golden ratio to extrapolate what an ideal font height might be.

11 * 1.61803398875 = 18 (rounded).

And there you have it. The ideal font size on my laptop is about 18 pixels, give or take. While perhaps not foolproof, this at least starts the process of finding a reliable and repeatable calculation to decide what the ideal font size should be for any screen.

Web designers? What do you think?