Doing Digital Typography The Right Way

Typography can either make or break your design. Good typography can make reading effortless, while poor typography does the opposite and could even make it worse. This is true in most industry where is key, but more so in web design. From Oliver Reichenstein’s own words in his essay, Web Design is 95% Typography.

Typography has one plain duty before it and that is to convey information in writing.

Basically, web designers now has the job that typographers did many years ago. And to do great at your job, we managed to compile a few recommendations and tips to make sure your typography is honoring content and improving readability!

10 Practical tips for typography you can do in your next project.

Keep the number of fonts to a minimum.

You might want to avoid situations like this where using three typefaces makes your site look busy and unstructured. So we advise you to keep in mind our “two is plenty and one is sufficient” mantra. Plus, we have three tips you can follow that’s a sure fire way to improve font pairing.

• Start with selecting a typeface for your body text.
• Stay with one font until you master it.
• Ensure font families complement each other.

The reason is because, one, the body text is the most common element in your website. It has the greatest impact on the quality of your design. Two, modern typefaces already comes with many different styles you can play with and master. And three, fonts can overshadow it’s pair or completely harmonize with another.

Choose the proper font size.

Just like how the number of typefaces in your typography can impact your design, it’s pretty much the same with font sizes. Texts that are too small is harder to read and might strain your users, while texts that are too big can be distracting and tends to call too much attention. So what’s the most comfortable font size for your body text? Well it’s hard to give a one-fits-all solution, but as a general rule of thumb, depending on the device, you can follow these recommendations below.

• For desktops, use 16px font or higher.
• For iOS devices, use at least 11 points.
• For android devices, it’s highly recommended to use 14sp.

Tip: Use a modular scale and find your golden ratio or use tools like Gridlover to find the best font size for your chosen ratio.

Justify left and mind the gap.

Typography is not just about font types and sizes, it involves basically how to let your readers read the information you give much easier. By justifying to the left and letting the eye of the reader find the edge, you make it easier for them to read your text. Because the western way of reading is from top to bottom and left to right, which is what most of us are used to.

Tip: Be careful of widows, a Widow is a single word or a very short line of text at the end of a paragraph.

Choose a typeface that is versatile.

Each year, the sea of typefaces to choose from for your typography becomes wider and wider. And since users do not only read in their desktop screens, it’s important to choose a typeface that maintains readability in various sizes. Make sure it’s legible in smaller screens, avoid cursive scripts.

Use fonts with distinguishable letters.

Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. But there are many legibility issues you might encounter such as, confusing “i” and “l”. Another issue is letter spacing, poor letter spacing may lead to confusion. Example is “r” and “n” may be confused with “m” as a result of poor letter spacing.

Limit line length

Line length is the horizontal distance of a block of text. And unfortunately, long lines are a common digital typography mistake. What with the ever famous Wikipedia still overflowing with too much line length.

The ideal line length for comfortable reading on a desktop is 60 characters per line, including spaces. According to E. Ruder, this line length has a positive impact on reading rhythm, our mind is energized when jumping from one line to another as long as it’s not too frequent.

Although it’s very rare, in mobile devices, 60 characters tend to extend beyond the screen’s boundaries. If so, it’s advisable to have 30-40 characters for mobile screens.

Avoid all caps.

As mentioned by Miles Tinker, in his landmark work, Legibility of Print, all-capital print greatly retards the speed of scanning and reading in comparison with lower-case type.  So basically, it’s better to avoid all caps when your message involves reading, although this could work when using acronyms and logos.

Don’t lose your rag.

A rag is the edge of a block of text. When text is justified, the words on the line are spaced equally so that there’s no rag on either side. It’s better to avoid using forced justified type because it results in inconsistent whitespace.

Don’t minimize spacing between lines.

Typography is all about spacing. In typography, we have a special term for the spacing between two lines of text — leading (or line height). In word-processing software, this concept is usually referred to as “line spacing.”

Bad spacing leads to text looking crowded. Good spacing aids readability. It gives readers the perception that text isn’t too dense and feels easier to read. The rule of thumb for line spacing is 30% more than the character height for good readability.

Make sure your text has the right color contrast.

Contrast is particularly important when designing for mobile because of the potential for distracting glare. And finding the right amount can be tricky, sometimes text color is too similar to background color or there’s too much contrast. If you don’t know where to start, you can master color contrast with WC3’s Web Content Accessibility Guidelines.

Tip: To ensure best readability, you can use contrast ratio tools to check if you’re within optimal range.

Typography is a skill every designer needs to master because it doesn’t just allow it’s reader to read but to also feel. Our recommendations is just the first step, you’re just getting started. Next step is for you to practice them, put them to good use, it’s only by doing it will you learn it.

Final tip: After mastering the art of text, make sure the right audience gets to read it by making it search engine friendly! Read our SEO Beginner’s Guide!