Importance of typography

It may not feel like typography is that important, but it can have a major effect on your reader's experience. Typography is essentially the art and techniques for displaying your written words.

Typography can have positive and negative effects on your words without you realizing it.

Positive Effects of good typography:

• Keep the readers more engaged.
• Guide the readers focus to the more important content.
• Persuade your readers based on mood and feeling.

Negative Effects of bad typography:

• Disinterested in boring text.
• Exhaustion when it's difficult to read.
• Misleading or hard to follow.

Your reader's attention is the most important part of producing content. Think about how busy your reader might be. They have their own life and challenges. When they are offering their precious time and attention, you should make it easy for them. The less effort it takes for them to read, the more likely they will continue to read and provide their attention. Typography is not for you, it is for your reader.

Rules I learned for better typography

1. Try to always use justify left.
   Most of your readers probably read left to right, top to bottom. Justify left will make this easier. Justify center only works with headings and things like invitations. It's also difficult to read when you have large paragraphs with difference sized rows. You should just stay away from forced justify. The spacing between words can leave rivers of spaces and look less appealing.
   

2. Use one font until you know how your fonts work together.
   For every font you add, you need to understand more about typography. It is definitely possible to pick fonts that are complementary, but can be difficult. The best way to have them complementary is to use fonts with a different classification: serif, sans-serif, slab-serif.

3. Stay away from the goofy and monospaced fonts for body text.
   Goofy can make it feel out of place unless it is follows your design. Monospaced fonts should be used for code blocks.

4. When choosing font weights, always skip a level. fine/medium, light/bold, medium/extra-bold
   

5. Always use multiples when choosing sizes for fonts and rules. 2x/4x, 2x/8x, 4x/8x
   

6. For body text on the web, stick to 15-25px.

7. The line space should be roughly 120-145%.

8. When using ALL CAPS, add extra letter spacing (5-12%).

9. Do not be afraid to play around with it. Just make small incremental changes.

10. Do not be afraid of negative (empty) space. Give your reader some room to breathe.

I am still learning and will continue to add more rules to my list. Maybe we can compare and share as you learn also.

Sources

• Butterick's Practical Typography: Web Book
• The Futur's Typography Manual: Youtube Video

---

• Follow me on Twitter for random posts about tech and programming. I am also documenting my journey learning design.

Comments

[Michiel Hendriks]

Full justify is great for reading much better than left justification. However the justification and hyphenation engines in Browsers suck. Or rather, they lack an engine to hyphenate so that you do not get big gaps. Further more it means that letter spacing isn't dynamic either in browsers.
A lot of work went in TeX to properly do full justification, but this technology was never copied to browsers.

So for browsers, left align in basically the only option.

The site you linked has a similar conclusion:

Keep in mind that the justification engine of a word processor or web browser is rudimentary compared to that of a professional page-layout program. So if I’m making a word-processor document or web page, I’ll always left-align the text, because justification can look clunky and coarse. Whereas if I’m using a professional layout program, I might justify.