{"id":255456,"date":"2017-06-09T05:11:50","date_gmt":"2017-06-09T12:11:50","guid":{"rendered":"http:\/\/css-tricks.com\/?p=255456"},"modified":"2017-06-09T05:11:50","modified_gmt":"2017-06-09T12:11:50","slug":"equilateral-triangle-perfect-paragraph","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/equilateral-triangle-perfect-paragraph\/","title":{"rendered":"The Equilateral Triangle of a Perfect Paragraph"},"content":{"rendered":"

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.<\/p>\n

I created the Better Web Type<\/a> 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\u2014if 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.<\/p>\n

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\u2014a renowned 20th-century typographer and visual communicator, put it:<\/p>\n

\n

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).<\/p>\n

\u2014Josef Mueller\u2013Brockmann<\/cite><\/p><\/blockquote>\n

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: font-size<\/code>, line-height<\/code>, and length of lines need to be in perfect balance. I struggled for a while but then, out of nothing, it hit me\u2014the 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.<\/p>\n

Type size & color<\/h3>\n

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.<\/p>\n

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.<\/p>\n

\"\"
Matching the font size with the text size from a book at an arm’s length. (Source: iA<\/a>)<\/figcaption><\/figure>\n

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.<\/p>\n

\"\"
The same text set in Merriweather seems larger and heavier than when set in Georgia.<\/figcaption><\/figure>\n

“Type color” in typography doesn\u2019t 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.<\/p>\n

Length of lines<\/h3>\n

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.<\/p>\n

The ideal length of a line of text is from 45 to 75 characters\u2014including 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. <\/p>\n

\"\"
Recommended line length in Google’s Material Design Guidelines (Source: material.io<\/a>)<\/figcaption><\/figure>\n

Line-height (leading)<\/h3>\n

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.<\/p>\n

\"\"
Line-height (leading) works differently on the web. It’s evenly distributed below and above the line of text.<\/figcaption><\/figure>\n

Too many designers or web developers that I’ve met think of line-height<\/code> as an isolated text feature. So they tend to set it based on what seems right. Consequently, line-height<\/code> is something that gets set without too much consideration. But line-height<\/code> is too important to be set so mindlessly. The length of the lines affects the line-height<\/code>. The longer the lines, the more space between them is required. Type size affects the line-height<\/code>. The larger it is, the larger the line-height should be as well. <\/p>\n

Type color affects line-height<\/code> 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. <\/p>\n

Now that you know that line-height<\/code> 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<\/code> 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.<\/p>\n

\"\"
Same typeface, same font-size<\/code>, different color. Darker text should have larger line-height<\/code>.<\/figcaption><\/figure>\n
\"\"
Same typeface, same font size, same color, different line length. The longer the line of text, the larger the line-height required.<\/figcaption><\/figure>\n
\"\"
Different typefaces, same font size, same color. Typefaces that seem larger and heavier need more line-height.<\/figcaption><\/figure>\n

The equilateral triangle<\/h3>\n

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. <\/p>\n

And so we come to what I call The Equilateral Triangle of a Perfect Paragraph<\/em>. 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. <\/p>\n

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. <\/p>\n

\"\"
A perfectly balanced paragraph represented by an equilateral triangle.<\/figcaption><\/figure>\n

In the example above, the text is set in Merriweather \u2014 an uncommonly large and heavy typeface. That’s why it’s set to 14px. The line-height<\/code> 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).<\/p>\n

\"\"
Lines of text in this paragraph are too long. The triangle isn’t equilateral. To fix this we’d need to either make the type size and line-height larger or decrease the length of the line.<\/figcaption><\/figure>\n

In the example above, the length of the lines is outside the recommended range of 55\u201375. It’s 84 on average, meaning that the bottom side of the triangle expands on both sides. The triangle is not equilateral anymore.<\/p>\n

\"\"
The line-height<\/code> of this paragraph is too large. The lines of text are starting to drift apart. This example could be improved if we increased the length of the lines. To properly fix it we’d also need to increase the font size to balance it out. A simpler way to fix it would be to decrease the line-height.<\/figcaption><\/figure>\n

The line-height<\/code> 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.<\/p>\n

\"\"
The font-size<\/code> is way too large in this paragraph. It forces the length of the lines to 30 characters and completely skews the triangle. The lines of text are too close together. To fix this we’d either have to decrease the size of the text or increase both line-height and the length of the lines.<\/figcaption><\/figure>\n

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. <\/p>\n

The learning game<\/h3>\n

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 \u2014 A Web Typography Learning Game”.<\/p>\n

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<\/em>. Four, randomly chosen, highest scores will get a free book, which is based on the popular Better Web Type course.<\/p>\n

\"\"<\/figure>\n

I hope that as many people as possible come across this game and learn that line-height<\/code>, font-size<\/code>, 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.<\/p>\n

Check out the game<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":248883,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[837,843,1287,746,587],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":344411,"url":"https:\/\/css-tricks.com\/some-typography-links-vi\/","url_meta":{"origin":255456,"position":0},"title":"Some Typography Links VI","date":"July 16, 2021","format":false,"excerpt":"Glitter text \u2014 whO (I learned a name for people who go by a one-word moniker like that: Mononymous) created a builder for fancy SVG-based type. It's a custom font with , and the fancy comes in with a gradient and somewhat exotic filters that make noise and blend the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/typography.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304176,"url":"https:\/\/css-tricks.com\/just-dropping-some-type-links\/","url_meta":{"origin":255456,"position":1},"title":"Just Dropping Some Type Links","date":"March 3, 2020","format":false,"excerpt":"I've had a bunch of tabs open that just so happen to all be related to typography, so I figured I'd give myself the mental release of closing them by blogging them. How's that for a blog post format for ya: whatever random tabs you've had open for far too\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/font-directory.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360711,"url":"https:\/\/css-tricks.com\/typography-links-january-2022\/","url_meta":{"origin":255456,"position":2},"title":"8 Interesting Typography Links for January 2022","date":"January 7, 2022","format":false,"excerpt":"Every now and then, I find that I've accumulated a bunch of links about various things I find interesting. Typography is one of those things! Here's a list of typography links to other articles that I've been saving up and think are worth sharing. An awesome new font from OH\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-06-at-11.01.40-AM.png?fit=1200%2C773&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":242884,"url":"https:\/\/css-tricks.com\/typography-handbooks\/","url_meta":{"origin":255456,"position":3},"title":"Typography Handbook(s)","date":"June 15, 2016","format":false,"excerpt":"I ran across this Typography Handbook the other day and thought it was very well done. It gets you right away by looking at two resumes and having your rather instinctively prefer the one with nice type, even though the information on them is exactly the same. Reminds me of\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337892,"url":"https:\/\/css-tricks.com\/intrinsic-typography-is-the-future-of-styling-text-on-the-web\/","url_meta":{"origin":255456,"position":4},"title":"Intrinsic Typography is the Future of Styling Text on the Web","date":"April 20, 2021","format":false,"excerpt":"The way we style text hasn\u2019t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. This is especially true of text styling. We write code\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/type-scale.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":263255,"url":"https:\/\/css-tricks.com\/big-list-typography-books\/","url_meta":{"origin":255456,"position":5},"title":"A Big List of Typography Books","date":"December 2, 2017","format":false,"excerpt":"For your holiday gift shopping needs! These my picks for some of the most popular books out there on typography, with a tilt toward web typography. Plus a couple of bonus picks by our own Robin Rendle.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/1665x7054.png?fit=1200%2C508&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/255456"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248883"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=255456"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/255456\/revisions"}],"predecessor-version":[{"id":255469,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/255456\/revisions\/255469"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=255456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=255456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=255456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}