Image: Calculating Ideal Font Size

A few years ago, I posted an idea on how to decide ideal font sizes for a screen. I’ve since simplified the method in a way that can be implemented into a website adaptively, and explained it in this image.

See my Typography Script on Github

In July 2012, I wrote a blog post on calculating the ideal font size for any viewing device. I’ve since written a JQuery plugin that typesets elements on a page automatically. I call it TypeSet. All settings are applied inline, for now, using relative em units. I still consider it a work in progress, it will probably have bugs, but I encourage you to check it out and give feedback!

Check out TypeSet

The plug-in queries your monitor resolution and uses it to calculate what your ideal font size should be, and is designed to be future-friendly.

You might be wondering: What about mobile devices? Their screens are quite small, wouldn’t that shrink that calculated font size? In this case, TypeSet gets the users default font size, compares it to its calculation, and uses the larger of the two.

Enjoy!

There are advantages of using <strong> over <b>, and <em> (as in emphasis) over <i>. I’ll try to explain the differences of these semantics as simply as possible.

In HTML, <b> tells the browser to display type as bold, and <i> tells the browser to display type in italics. The problem with this is that these terms are only applicable to visual display, and become problematic when you are trying to make your site compatible for accessibility devices.

Enter <strong> and <em>. While in a browser display they might look no different to their <b> and <i> counterparts, they can semantically have meaning for accessibility devices such as screen readers, and can be rendered accordingly for the device a website visitor is using.

There are additional arguments also about separating style from the document structure. This is called Semantic HTML. In this case, bold and italic styles should be contained within the CSS of your site, rather than in the HTML using <b> and <i> tags. What’s interesting about this is that <strong> and <em> does not have to mean “make bold” or “make italic” if you decide to redefine it’s style to simply a change of color.

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?