Image: Calculating Ideal Font Size


Typeset. A JQuery Plug-In

 

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!

 


Be Strong With Emphasis: Semantics

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.


Ideal Font Sizes

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?


Web Safe Fonts

Periodically, I like to revise my list of web safe fonts. I know that these lists exist all over the internet, but I like to keep my own records to reflect my own expectations.

These results check against operating system font installations for Mac OS X 10.3+ and Windows XP.

The web safe fonts are:

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Georgia
  6. Symbol (Interestingly, this is the only font result that isn’t also one of Microsoft’s Core fonts for the Web
  7. Times New Roman
  8. Trebuchet MS
  9. Webdings

Trademark and Copyright Symbols

Some pointers on using trademark and copyright symbols such as ®, ™, and © effectively:

  • It’s okay to use a sans serif symbol with serif text.
  • When using a ® or a ™ after a word in text, the symbol should look a little smaller than half the x-height of your text. As the text gets larger, the symbols should appear proportionately smaller.
  • When the copyright symbol appears before text, its target size should be the same x-height as the next character that follows it.
  • When the copyright symbol appears before a year, its target size should be the height of the smallest number in the group number set.