Make Your Design Readable With These Seven Simple Principles of Typography
Typography has always been a special science used in the print media because of its ability to draw attention to specific details. With the introduction of web and mobile media, designers focused on the graphic elements vs the text layout that displayed content. After the arrival of flat design, the role of typography has taken over the hearts and minds of designers who work in web and mobile applications. In this article, I will share seven simple principles of proper typography to help avoid frequent mistakes and make your text more readable.
1. Proximity Rule
Observing the rule of proximity, the title in the text should visually and in meaning refers to the block/paragraph, which means that the title should not “fly” between the texts of the previous and next blocks. It is better to choose the distance above the heading so that it is 2−3 times greater than the distance under it. Thus, the title will visually refer to the subsequent text or block.
2. Logical hierarchy for headings
In order to visually differentiate the levels of text and not lose your hierarchy, you need to use contrast to separate the different hierarchy levels. For this, it is necessary that the headings are always large and the subtitles are noticeably smaller, but stand out clearly in the text, to easily navigate through all of the content.
3. Sufficient Leading
Leading is the spacing between lines of type. While typing it is very important to choose the correct leading for readability purposes. It is much more pleasant to read text when there is a place to rest your eyes between the lines. There are many ways to choose the right leading and the situation may depend on the following: the amount of text, tolerable blocks, photographs or other graphics objects that are linked and integrated into text blocks, etc.
The easiest way to apply good leading practice is to achieve a balance between text and “air”, making sure to make the leading about one and a half times the height of lowercase letters or set the leading to 125% of the font size.
4. Hanging Punctuation
Hanging punctuation is a method of setting punctuation marks outside the margins of a body of text. Quotes, brackets, hyphens, periods, and commas should be taken out of the dialing line because it always looks more elegant and helps keep the paragraph shape looking good.
5. Capital Letters
It is very difficult to read a text typed in capital letters, due to the fact that all of the letters have the same relative height. The eyes of the user quickly get tired reading text that is written in all caps. Do not abuse the use of capital letters. The length of writing in all caps should not exceed one line.
6. Proper center text alignment
Aligning text to the center should only be done in small batches of words, otherwise, it will be difficult for a reader to concentrate and reduces readability.
The method of center alignment is commonly used in headings and to put an accentuation on the certain text so that elements/blocks can be distinguishable from the mass. With this kind of alignment, the text should be larger so that it looks different from the main text.
7. Equal Length Text Columns
When splitting text into columns, make sure that they are visually equal (one length) with a small difference not exceeding 1–2 lines. Otherwise, there will be an imbalance of text blocks due to the incorrect use of empty space, there will more emphasis put on the block with more text and the columns will be more difficult to read.
I hope you’ve enjoyed these quick tips on how to improve the readability of text in your designs. Simple changes can make a big difference in look and feel of your web pages and applications. If you’re looking for more inspiration, I suggest taking a look at typography books, such as The New Typography — by Jan Tschichold. Good luck!
