Table of Contents
Welcome back in 33 Laws of Typography series. In the previous part you learned about various rules you can follow to format a document. Today, you will get a bit closer look under the hood. The main subject of this Part 2 is formatting large bodies of text. Typography rules that will follow will be incredibly useful, for example, when dealing with paragraphs of text. From now, you will no longer go blinded when planning and preparing content for your website or project. Without further ado, let’s continue in the journey through the world of typography.
Note: The numbers of individual typography laws will build upon the previous part so you can easily add them to the older ones.
How to Format Large Bodies of Text
07 Set printed body text from 9 to 11 points (12 points for web)
The first rule you will learn about is a bit complicated. Since web and print are different environments we have to split it explore this rule and separately for both of the environments. Let’s discuss the print as first. Typography in print has one huge advantage. It is stable environment with specified dimension. In other words, it is not possible (yet) that when you buy a newspaper or a magazine in A4 format it will either shrink or extend in your bag. With this on mind, you can control all the variables you work with like width and height of the medium, line length, etc.
This makes print much easier to handle with just a few preset rules or guides for typography. Good rule of thumb for body text in print, when it comes to size, is to set it between 9 and 11 points That’s approximately between 0.125 and 0.153 inches, 0.3175 and 0.388 cm or 12px and 15px if you don’t like to work with points. Staying in this range will allow you to keep the content readable and legible for your readers.
No matter how comfortable can be working with defined unchangeable dimensions, this is not the way web works. When you put some content online it is hard to control on what devices can users view it and what properties will the screen have. However, one thing you can control is the font size of text. Font size have a huge effect on the overall readability of your content and should be important part of your typography plan in every project you are working on. So, how to make sure text is big enough users can read it without hurting their eyes or using magnifying glass? Good rule of thumb is to set 16px or 1em as default for body text (paragraphs).
Let’s take a look at Bootstrap 3 and Foundation 5 to see how they handle this question. Bootstrap 3 uses 14px as a font-size for body element. 14px can be harder to read so please, don’t use it. Take a look at medium. It uses 18(!) pixels as default size for body element and I guess you’ve never complained about readability. Foundation, on the other hand surprised me (in a good sense). It doesn’t use pixels to set the body font-size, but percentages. 100% as default that is for most browsers approximately 16 pixels (1em).
Guys behind the Foundation framework let the browser decide what font size is the best. That’s what you should follow. So, use 16 pixels as a font-size for body text (or 100%).
08 Set body text two to three alphabets wide
Line length is another important factor in typography. Users will be less likely to read text that is too wide, while text to narrow can be hard to follow and damage the experience as well. In order to deal with this problem, people interested in typography made various experiments to find out what length is the best to choose. The result they came up with was range between 50 and 75 characters (including spaces). To simplify this even more, Robert Bringhurst come up with easy to remember 66-character rule.
You can use this as a golden rule for line length. However, there can be situations when you will need to make include more content on single line, so if you have to go wider just make sure keep it under 75 character. To control the length of line, use the width of paragraph followed by good old counting of characters to find out the right length. Sometimes, just using your eyes can be a good way to get the job done. You know, follow you designer’s instincts (or 66 rule).
09 Favor flush-left, ragged-right body text
This one is going to be quick. Whenever you will find yourself working with text, always flush it on the left and rag on right. In other words, align the text on the left and don’t use justification. Even though justified text can look in some situations, it can easily break. Examples of it can be too wide gaps between words in paragraph. When you justify the text, you cannot control the size of these gaps or get rid of them. So, always align it to left (flush-left, ragged-right).
10 Separate sentences with one space, not two
I’m not sure if this even needs any more explanation. Never ever ever ever ever use two spaces to separate sentences in your text. It is not just bad typography habit, but also waste of space and nonsense. So please remember, one space between sentences.
11 Don’t allow less than seven characters on a line
Have you ever though how bad a single word on new line can look? Well, your instincts were right. From typography point of view you should never let fewer than 7 characters stand on new line. Example of this problem can be orphan. That is single word on the whole line. How to control this (in certain degree)? Again, you can use width of paragraph and change to make it either wider – no need for new line – or narrower – new line with more characters.
12 Avoid bad paragraph breaks
When there is too much content or to narrow line length, certain situation can happen. Orphan can appear. You already learned about orphans in previous rule – single word on line. It is good typography habit to make sure no orphans are appearing in your content. Solution is, again, width of paragraph … Or improving the content.
13 Avoid line-breaking hyphens
Never let the hyphen be the last character of the line. That’s not the form you should present your content in. If you have to use some lengthier word or have narrower line, it will be better to put the whole on new line without breaking it. I know it can be annoying and boring, but it will improve the readability and overall experience your users will have on your website. And that’s the main goal, right?
14 Signal new paragraphs once, not twice
There are two ways you can signal the reader (user) new paragraph. First is using indentation for the first line (indent the first word). Second is including empty line between paragraphs. These are most often used styles in typography. Some people like to use both of these styles in the same time – include empty line and indent the first line. No matter what reason for this can be, just stick to one option. When driving a car, you don’t use winker and your hand (out of the window) to signal you are about to turn. Use the same in typography, choose one.
15 Break up large blocks of text
Long content can easily discourage users either from continue reading or reading it at all. We all experience it. Imagine a two A4 long article in one paragraph. Would you read it? Would you even think about reading it? Probably not and you are not alone. The majority of people would reject to read that stuff. So, if you don’t want to lose readers you should split longer content into series of smaller paragraphs. Good rule to follow by Neil Patel is to start new paragraph after about five lines (I know!). It is simple and your users will love you.
You learn a bunch of great stuff today! Like what is the best font size for body text, what is the best length of line, that you should left align the text instead justifying it, proper way to separate sentences, to avoid less than seven characters on line, to avoid bad paragraph breaks (orphans), to never let hyphens be the last character on the line, how to signal new paragraph and how many lines paragraph should have to keep the readers engaged.
If you like this post about typography, please share it so other people can learn from it and get better in typography and design as well. Typography as a subject is complex and hard to master and can discourage many designers from doing what they love.
What’s coming next? How about formatting smaller blocks of text?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
