Still, too many web designers neglect the importance of typography on the web. So far, I’ve only met a few that really understand typography and know how to apply that knowledge to their work. And the lack of knowledge about typography doesn’t come from ignorance. I learned that web designers are commonly either self-taught and haven’t grasped the importance of typography yet, or they actually studied design but typography was just one of the classes they had to attend.
I created the Better Web Type course to help raise awareness of the important role typography plays on the web. In my opinion, both web designers and web developers should learn the basics—if a designer uses ligatures in her designs but the developer doesn’t even know what ligatures are, how can we expect him to correctly transform the most beautifully designed typography into code? With both roles knowing the basics, we’ll be able to start contributing to a better web by producing better web typography. Together.
One of the most important things in typography is to shape a seamless reading experience that invites the reader and presents the content in an objective way. To do that, we need to be able to shape perfect paragraphs. There are three keys to doing that, as Josef Mueller-Brockmann—a renowned 20th-century typographer and visual communicator, put it:
The reader should be able to read the message of a text easily and comfortably. This depends to a not inconsiderable extent on the size of the type, the length of the lines and the leading (line-height).
When I was writing the lessons for the Better Web Type course, I was trying to think of a simple concept that would illustrate exactly that:
line-height, and length of lines need to be in perfect balance. I struggled for a while but then, out of nothing, it hit me—the equilateral triangle. All three sides of an equilateral triangle are equal and so are all the three angles. A great representation of three things in perfect balance. It turned out that it was easy to apply this idea to the three keys that shape a perfect paragraph. But first, let’s take a look at each of them in isolation.
Type size & color
One of the mistakes that most websites make is that they make the main body text too small. Back in the early 2000s it was common practice to set the body text to a size of around 11px. But back then the screens were smaller with lower screen resolutions. 11px then was larger than it is now.
A common rule for setting the body text is to set it to a size that would match the size of the text in a book at an arm’s length distance.
The recommended size for today’s screens is 16px for mobile and from 18 to 22px for desktop. This also depends on the typeface. Some typefaces set at 16px may seem larger than others, as it’s clear in the picture below.
“Type color” in typography doesn’t mean actual color like red, blue or green. Type color means how heavy black type on a light background looks like. A typeface of the same size and same weight may seem heavier than another one. The contrast of the Merriweather typeface in the example above is lower (comparing the serifs and different stems) than the one of Georgia on the right. That makes it look heavier and the color of the type is darker.
Length of lines
Reading very long lines of text is tiring for our eyes. Our eyes need constant pauses which are provided by line breaks. In that instance of switching to the next line, they get that short pause. Short, but long enough to keep them going for longer. It’s like an engine that doesn’t run on full power all the time so it keeps going longer without overheating.
The ideal length of a line of text is from 45 to 75 characters—including spaces. Anything that reaches far from that range becomes hard to read. Too much line switching when lines are too short and too few breaks for the eyes when they’re too long.
Line-height, or leading as it’s usually referred to in print, is the pillar of vertical rhythm in typography. Understanding how it works is key to producing better typography for the web.
Too many designers or web developers that I’ve met think of
line-height as an isolated text feature. So they tend to set it based on what seems right. Consequently,
line-height is something that gets set without too much consideration. But
line-height is too important to be set so mindlessly. The length of the lines affects the
line-height. The longer the lines, the more space between them is required. Type size affects the
line-height. The larger it is, the larger the line-height should be as well.
Type color affects
line-height too. Darker and heavier type requires more space between the lines. And in the end, the typeface itself may affect it as well. As we’ve seen earlier, some typefaces seem larger than others. Some, mostly serifed typefaces, will seem heavier. Those will require more space between the lines too.
Now that you know that
line-height is very important and that it should never be considered as an isolated feature, let’s look at general best practices. For paragraphs, ideal
line-height is usually between 1.3 and 1.7. So a body text set at 16px should have a line-height from 21 to 26px. This will depend on the things mentioned earlier: typeface design, type size, weight etc.
The equilateral triangle
There are some general best practices in typography but they’re never definite. As we saw with the line-height, we’re commonly presented with ranges that we should use. What to choose from that range takes time to learn. The eye needs time to get sharper in noticing these differences.
And so we come to what I call The Equilateral Triangle of a Perfect Paragraph. We’ve looked at type size, measure and line-height in isolation (as much as we could). By doing so, we already learned that these properties are interconnected. They can’t be considered in isolation and they never should be. That’s why an equilateral triangle is a perfect representation of a well-designed paragraph of text. For it, we need a good type size that matches the measure, which matches the line height. Get one of them wrong and your triangle will get skewed.
Unfortunately, I can’t give you definite numbers of a perfect paragraph as there are millions of combinations out there. But I can give you a few examples that will help you train your eye. Try to pay attention to the details and compare the type size, the lengths of the lines and the spacing between them.
In the example above, the text is set in Merriweather — an uncommonly large and heavy typeface. That’s why it’s set to 14px. The
line-height is, therefore, closer to the upper edge of the recommended range of 1.3 to 1.7. The paragraph above neatly fits 55 characters per line (also in the recommended range).
In the example above, the length of the lines is outside the recommended range of 55–75. It’s 84 on average, meaning that the bottom side of the triangle expands on both sides. The triangle is not equilateral anymore.
line-height in the example above is obviously too large. It’s set to 2 and very much outside the recommended range. The lines of text are too far apart. Unfortunately, this happens too often on the web. It seems like there’s a trend of setting type to a light gray color and applying a large line-height on top of it. It’s an attempt to get that clean, minimalistic style but it’s wrong. Texts like that, especially if long, are hard to read.
Fortunately, I don’t encounter this on the web too often. I still wanted to include it, so we cover all the possible options that can come out of this concept. The font size in the example above is way too large for the given line-height and length of the lines. Texts set like this are extremely hard to read.
The learning game
Many of the students of the Better Web Type course have asked me to elaborate on this concept. And what’s the best way to illustrate how this concept works in action? A learning game that will help you sharpen your eyes. Presenting “The Equilateral Triangle of a Perfect Paragraph — A Web Typography Learning Game”.
The game consists of ten levels, each asking you to set one of the three properties: font size, line-height or the length of the lines. At the end, you get a score out of 100 and a chance to participate in the giveaway of the upcoming book Better Web Typography for a Better Web. Four, randomly chosen, highest scores will get a free book, which is based on the popular Better Web Type course.
I hope that as many people as possible come across this game and learn that
font-size, and length of lines always need to be considered together. Try to get the best result and challenge your friends. The more people know about this, the better the web typography will get.
So what’s the formula? You haven’t given me any way to evaluate whether a given set of font-size/line-height/width forms an “equilateral triangle” or not.
Divide “Feels ok” by “Looks right” and multiply the result by “Seems good to me”
There isn’t a formula… it will be different for any given situation – “Unfortunately, I can’t give you definite numbers of a perfect paragraph as there are millions of combinations out there.”.
The post is about training your eye to see what looks “right” (it is subjective to a degree). Typography is more art than science.
I doubt there is such a thing as a “perfect formula” for this. It all depends too much on the type of the font you are using. Also, what type of content your page is “promoting”…
Typography in its own is an art to master… that’s why probably a lot of designers don’t bother too much with it. It comes with its own set of rules.
Try the game! There is a big button for it in the article and it quite literally walks you through those values to get them matched up right.
I did try the game. I guess I just don’t have the eye for it. I think the game could be improved as a training tool by displaying the text laid out as the user selected side-by-side with the text laid out using the target parameters.
I don’t understand the “equilateral triangle” analogy when there is no way to measure the sides.
Thanks for the article though.
I think Ray and I came away from the article with similar thoughts: this is good information about typography; it’s just that the triangle metaphor doesn’t seem useful. I could take the equilateral triangles shown in the article and change the numbers to anything else and it wouldn’t mean anything.
Regardless, thanks for the article!
Sorry Ray, there’s no formula. The point of the triangle theory is to illustrate that after the typeface is chosen, there’s three aspects to defining perfect paragraphs and that they’re connected. That’s it. So far, people found it helpful.
Thanks for the reply Martej. I didn’t mean to come off overly critical, I enjoyed the article. I appreciate you sharing your knowledge.
You can try this tool, which calculates the numbers for you based on one or two inputs.
Interesting way of thinking about web typography. The game would be more useful if it gave clearer information about what the answer “should” be for max points. Especially in the line-length exercises, I couldn’t always tell if I’d made the line too short or too long.
[Later that very same day…] I tried the game to which a link is offered. I acquired one perfect score on the first time through. I tracked my scores and the measurements that yielded them, and became progressively worse. I tried, not by math, but by (admittedly subjective) readability. As a source of a differing point of view, sometimes heartily different, I highly recommend Matthew Butterick’s “book”/site, Practical Typography. But when reading, consider carefully Matthew’s request that you pay for the book!
Nice post, but I feel like a tut on web typography should really be using a sans-serif font. I feel like it’s a little ironic.
Why would a sans-serif font be a better fit?
Sans-serif fonts are better suited for electronic devices. Serif fonts are better suited for actual paper/books.
That’s pretty much typography 101… I found it quite ironic as well…
Well, yeah that was true years ago. High-resolution screens are quite common now. Besides, in most of those examples, I’m using Georgia which is a serif font designed especially for screen usage and that was in the 90s, when screens were very poor in terms of resolution.
@Chris, I apologize if I sounded arrogant… that was not my intention.
@Matej, that rule still holds quite true. Is not only because of how the fonts are being displayed, is also because on the screen, non serif fonts are easier for the eye to read. They are more “user friendly” if you may.
… and you of course have scientific evidence to back up the statement, that generally sans-serif is easier to read on displays?
If you look back in history, the main reason for the sans on the desktop was the missing pixel detail/effort to pixel align serifs and flourishes. That was back when sub pixel AA and AA in general were not a thing.
The font used in the example (Georgia) is an extensively hinted font and is therefore equal in clarity to any sans-serif font. In fact I am sure if you’d make an objective analysis of Georgia vs. Arial, that Georgia is MUCH more legible – even on a screen – than Arial.
An equilateral triangle is a great way to look at this – thanks (and the game is terrific! I did terrible by the way!). An actual formula would be helpful if it took into account the different typefaces.
Check out this tool: https://pearsonified.com/typography/
It doesn’t take the font weight into account, but the ability to calculate a base height, and different block sizes (title, header, paragraph, etc.) gives a great starting point.
“And the lack of knowledge about typography doesn’t come from ignorance. I learned that web designers are commonly either self-taught and haven’t grasped the importance of typography yet”
That is ignorance…
Calm down guys.
I reckon that the main point of this article is to tell us that to make a good typography we need to pay attention font size, font family and line height. The relationship between these three decides how your web page looks, that is it.
Web design is a relatively subjective thing in my opinion, there is no such a formula to satisfy everyone’s appetite.
Mind blown (insert “mind blown” emoji here)!
The “Equilateral Triangle” concept is an absolutely perfect analogy, it provides a physical description of an incredibly subjective task.
Matej, the game is absolutely fantastic, I’ve played it several times and every time I learn a bit more about typography. On the result screen it would be nice to have a clearer description of where one went wrong/not-as-good. But again, I’ve had A TON of fun playing the game and learning a lot as well.
I recommend readers look into who Mr. Matej Latin is, he knows what he’s talking about and has done his typography homework 100-times over.
HUGE Thanks for all you do Matej
There are many valid points and examples here.
Observations in article:
An old standard is shown of comparing a screen view to a print view. There are dozens of human and material factors that make this a poor comparison.
There is an assertion here that implies there is a general recommendation or standard: “The recommended size for today’s screens is 16px for mobile and from 18 to 22px for desktop.” This is not a recommendation I would make. Nor is it one that exists in any of the Human Interface Guidelines. Nor does it take into account the posture and distance between the screen and eye. In general, browsers follow the posture standard, where the default text size is 16 in user agents of typical desktop browsing contexts and 19 in mobile contexts. This is a more human-centric standard, where this triangle model seems more aesthetic and subjective.
Observation in comments:
It is stated that there is no formula, and yet the existence of a scoring mechanism in the game suggests a formula was used.
It is stated that there is no formula, and yet the existence of a scoring mechanism in the game suggests a formula was used. — so true. and this formula could actually be shared with the public ) and that would really be helpful and a great reference point / starting point
I like what you’re trying to do – as a self taught web developer I’ve realized that typography is one of the most important parts of a website. The triangle illustrates that there’s a connectedness to those 3 key properties (width,size,line-height) which is helpful for teaching how those things relate to each other.
The game is cool, but I wish there was more in-depth study material because it feels like I’m randomly ‘wrong’ on these without a sure way to figure out what’s ‘right’.
The game may perhaps have some potential, but I do not see it as (for me) a learning tool. There is no way, for example, to plug in all three (four, including font) for my site, and acquire a picture of the resulting triangle. For example, three numbers: pixels wide for the base. Line pixels times guessed number of characters per line for the left side. Line pixels times line height for the right side. Right? (Of course, all mine are in my CSS as ems…a tricky guess at best!) So, what’s a poor feller to do? I just go with what looks and feels good to my client!
In the 6th chart, the description said: “Same typeface, same font size, same color, different line length. The longer the line of text, the larger the line-height required.”
However, the font sizes are different in the image:
Left: Georgia, 18/26
Right: Georgia, 16/23
Is it a typo? Good article and fantastic game by the way.
Thanks for this very useful post, it was truly enlightening for me. i have one question though, in a website there are many areas of body text with different widths. so that means font sizes and line heights will have to change as well in those individual areas. That leaves with a site with various ‘sizes’ of body texts. could you please tell me how should approach that problem?
Hey Fahim, that’s a very good question. One that I Mark Boulton answered on his Journal by writing about “Incremental leading”. You can find it at http://www.markboulton.co.uk/journal/incremental-leading
It’s still quite limiting but gives you something you can build on. It’s ok to break the rules in typography, but you need to know how to break them well.
Hope this helps!