Ideal Line Widths for Web Fonts
I’ve made a tool to calculate ideal line widths (using lengths of 50-75 characters) for web safe fonts. You can find it here. This is the story of why I made it today.
I have loved typography since I was a kid. Which, admittedly in this case was only 20 years ago(!) When we finally got a “personal computer” when I was 10 (after months of begging), Times New Roman was my first love.
I remember going through the various fonts on my computer when I was in high school and rating them out of 5 stars. Naturally, Garamond, Felix Titling, Trajan and Caslon (some of my new favourites) scored 5/5. Comic Sans and its ilk scored… lower. Embarrassingly, I used to type up my creative writing in Lucida Script. It’s not terrible but it’s not very readable either.
I always had a soft spot for serif fonts. Perhaps it’s the old-school in me. I learnt calligraphy with messy gusto in Primary School and carry a fountain pen at all times. I do enjoy reading the newspaper (when I have time). Handwritten notes and the feel of pen on paper are a joyous luxury.
For the first few years that I played around with HTML, the options for nice fonts were limited. Who am I kidding? It was the 90's and everything was on GeoCities and written in either Times New Roman (which by the age of 14 had lost its appeal for me) or Arial (which to this day I cannot stand).
In fact, even until a few years ago, web typography really was limited to the limited selection of web-safe fonts. Now, with the advent of @font-face and its support in major browsers, we can finally enjoy a bit more range, helped by services such as Google Web Fonts, Typekit, Webfonts.info, FontShop and more. It’s still not ideal though, and in general even if we pick a nice brand spanking new font, we need to back it up with a variety of fall-backs, all of which may have different average character widths.
As has been discussed widely before, line length in terms of character count has a major effect on readability. Too short and your attention gets broken by the line breaks; too long and you get lost in the sea of words. Ideal line length is usually described as somewhere between 50 and 75 characters though some think 75 is a little too long. I personally prefer 67 characters per line or so but you obviously need to tailor it to what you’re doing.
I was surprised given the amount of information out there on web typography that there wasn’t a simple chart or set of information out there about what the actual ideal width of text in ems for each “web-safe font” was.
I guess it shows- the line lengths vary a lot on the web and even completely professional sites have line lengths that are far too long or far too short (usually too long). The Times, the esteemed institution that commissioned Times New Roman has a very civilised character count of 60-70 per line. The venerable New York Times’s is 85-90. The Tuts+ websites weigh in at about 100. The Guardian (happily) sits at a comfortable 60-70. The Huffington Post’s is 80-85. TechCrunch boasts another weighty 100. Adobe’s website is 95-100. Medium is in the mid-60s.
The blame is usually put with responsive web layouts for being too variable, however all the of the above websites have a fixed, centred layout. Additionally, it is more than possible to design a website that caters for variable viewport widths and maintains a readable line length. The easiest way that I’ve found is careful use of CSS floats that reflow the website when the browser width decreases.
So, equipped with my web fonts, a pixel ruler, some CSS and my newly found jQuery skills, I decided to make a tool myself. It took me about 3 hours or so and is very spartan looking (hey, I’m not a professional web developer!) but I’m very happy with the result so far.
There is a simple table with the ideal line length ranges for each font in ems. There is a tool where you can play around with font, font size, characters per line and letter spacing. And it gives you what that width is in both ems and pixels.
The formula for ideal width is quite simple. It is:
Where:
And of course, the website is done with a (simple) responsive layout and an ideal line length.
Please play with it, improve on it, mash it up, and give me your feedback on what works and what could be improved. I hope it is useful for everyone.
The tool is on my website and it is also available on GitHub. It is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
