Table of Contents
Welcome in the next and probably the last but one part of 33 Laws of Typography series. In this part you are going to learn about how to deal with smaller blocks of text. To give you some example … These can be lists, acronyms, words you want to emphasize or highlight and so on. If you missed the part one or two you might read them first because the laws you are going to learn about follow the previous ones. Anyway, let’s continue to learn how to use typography to your advantage.
How to Format Smaller Blocks of Text
16 Emphasize ten percent or less of text
One of the hardest questions designer and content creators have to face, from time to time, is what information should be highlighted and what not. Or, what percentage of the content should be highlighted at max. Just try to read an article or chapter in a book and highlight the most important. Not that easy right? Believe it or not, this is one of the topics typography has to deal with, while many people have no idea about it.
Why it is so hard? Well, if you use emphasis too much, emphasis itself will lost its meaning. On the other hand, you might skip some information that can indeed be very important for readers for understanding the whole content or context. If you will find yourself in doubt, just use the law of ten percent or less. If you are under ten percent (+/-), it’s okay. If not, re-read the text and check if you emphasized only the crucial information. To test it, let someone else read that and summarize it for you.
17 Avoid all caps and underlined text
All caps can be very tempting to use in text. However, you should avoid it at all costs. Think about the line like a river flowing from left to right (or right to left) and imagine all caps as obstacles in its way. This is typography transformed into the real life. When you do a good job, readers will have no problem reading the content. Their eyes will follow the flow of line and their focus will be untouched. That is example with consistent typography without all caps.
On the other hand, when you use all caps for whatever reason, it will distract your readers. We are wired to spot changes and imbalances around us. This helps us survive in hostile environment. Since our brain looks for patterns in every situation, all caps in consistent lower-case text will present breaking of pattern and attract the eye to it. What’s more, 20th-century studies indicates that all caps text is actually less legible and readable than lower-case text.
From web, we are used to seeing underlined text as indication of links. This applies to documents as well. When you see underlined text, you almost automatically perceive it as a link. Let it that way and use underlines only for links.
18 Set acronyms and initialisms in small caps
In previous rule you learned about avoiding all caps. OK, but how about acronyms … Or initialisms? Solution is simple. Use small caps every time you encounter some of these objects. This will do no harm to the content and it will conserve its meaning without confusing the reader. Your typography will stay consistent, legible, readable and will look great.
19 Hang punctuation in small chunks of text
From time to time you will yourself in situation when you have to use quotations or other punctuation. You have basically two options where to place it – inside or outside the block of text. Without any need to weighting both options or trying them out to compare them visually, go for the inside option. Remember every chunk of text is set inside some grid. You don’t have to be a typography expert to see that. So don’t try to break that grid by placing the punctuation outside it [grid / chunk].
20 Hang bullets and numbers in lists
The exact same thing as with punctuation applies also to the bullets and numbers used in lists. Always place them inside the list to keep the layout consistent without any abnormalities. Don’t break the flow consistency creates and grid of the page by placing them outside.
21 Avoid bad line breaks
You already learned about line breaks in previous part in association with paragraphs. However, let’s briefly repeat it here too. Pay attention to orphans, avoid using line-breaking hyphens and never let less than seven characters on one line. Adjust the width of the page or article as you need to make sure these suggestions are in check. Your users and readers will thank you for it.
22 Use symbols and special characters as needed
Symbols and special characters should be used as much as you need. You don’t have to limit yourself (just don’t overdo-it). However, when designing a website always make sure to use HTML entities and codes so the browsers will render all the symbols and characters correctly no matter the language user is using.
If you need to use any symbol or character and don’t know what the entity for it is, check this reference chart of all available HTML entities.
23 Use proportional old-style figures in body text
You might not hear about this yet (I didn’t), but there are several figural styles you can use in your typography setting for your documents or website. These are tabular lining, proportional old-style, proportional lining and tabular old-style. Every style is supposed to work in different environment. However, if you want to add a bit of elegance and sophistication to your typography proportional old-style is the way to go. Proportional lining is better for all caps (avoid that – rule 17).
For more information about proportional and tabular figures check out this great post on fonts.com.
24 Adjust leading and kerning for large text
Large text will often require special effort when it comes to typography because it can’t be threatened in the same way is small text. There is different leading (i. e. line-height) and kerning (i. e. adjusting the spacing between characters) and don’t forget the tracking (letter-spacing). All these factors must be taken into consideration when dealing with any type of content. If content requires it, adjust the large text. Go with your gut. It doesn’t have to follow the properties of small text. Think about them like independent chunks.
25 Verify software alignments optically
In the end, it doesn’t matter how good your software is. You should always check the typography and correct the flaws and issues. Let the software take care about spelling and grammar while your designer’s eye will focus on the visual part of your work. By the way, only through this practice of observing every detail of typography your design skills will grow steadily. So don’t skip it.
In recap … Emphasize sparingly. If you don’t have reason for it, don’t use all caps and underlined text. Acronyms should be set in small caps. For small pieces of text use hanging punctuation. Bullets and numbers belong inside the lists. You should always plan where the lines will break. When you need some symbol or character, just use it. For figures, forget the lining and go for old—school. Leading and kerning must be result of plan, so adjust it whenever you need. Always use your eye to check the alignment done by software.
If you like today’s post, please share it with your friends and other people, so they too can learn from it and get better in typography and design as well. Typography is complex and difficult subject to master and can discourage many designers from developing their skills of searching for them completely.Another day spent learning is another victory for your future!
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
