A Brief Guide To Web Typography And The Fundamentals of Good Readability. 

Choosing a typeface may seem like a relatively simple process. Just choose a font that looks nice from a pre-determined list. But the truth of the matter is it is far from simple. Deciding upon the correct typeface for your website and blog posts is one of the most important factors of the design process, and is a decision that can have a massive impact on how long users spend reading your content and browsing your site.

This short guide will hopefully provide you with a little more insight into the importance of web typography, the difference between fonts and typefaces and choosing the perfect font to make your pages pop.

Designers take many things into consideration when choosing a typeface for a particular design. The project, the business and the industry are all factors when deciding upon the right typeface.

Graphic designers have, for a long time, studied the elemental points of typography in terms of print design, especially prior to the digital age. But with design spanning across the wide abundance of digital media, typography is now much more complicated. What may look great on the larger screen of a laptop or desktop computer may not translate so well on that of a mobile device. The web typography tips we discuss below will offer some guidance when choosing a typeface for your project.

typography

Best Font Choice For On-Screen Reading?

Web typography has come a long way. We now have a massive selection when deciding on an option for a typeface. It was only a few years ago that we were vastly more limited when choosing a font. Only a few were truly compatible with monitors of the time period. Fast forward to today and fonts have been designed purely for screen display and are designed with legibility in mind.

Easy On The Eyes

Choosing your typeface is only the first step. Line height and length can have drastic effects, both positive and negative on a design. Our suggestions when implementing your design are simple enough.
Don’t use more than two fonts, and avoid using all upper case, unless with a title using h1 or h2 tags.

The background colour behind the text is as equally important as the font colour. The contrast between the two of them will decide how legible the text will be.

The text size used depends on the chosen typeface due to factors like x-height and counter openness impacting legibility. The text size will determine the length and line-height.

Serif Fonts

Serif fonts have a line or stroke attached to the end of a larger stroke in a letter or symbol within a font or family of fonts. A typeface or “font-family” making use of serifs is called a serif typeface.

Serifs have a few different types, dating back through the years.

Humanist

Humanist typefaces arose in the 1460s with a strong calligraphic influence. They contain diagonal stress, lower stroke contrast and a small x-height. They don’t contain refined serifs. These typefaces are not as common today but examples include Kennerley and Centaur.

Old-Style

Old-style typefaces date back to the 15th century. They contain less diagonal stress with wedge-like serifs. Examples of old-style fonts include Goudy Old Style and Perpetua.

Transitional

Transitional typefaces date back to the 18th century. They have a decreased calligraphic flow with vertical stress. They are thinner in nature with flatter serifs. They also have a more exaggerated contrast between the thicker and thinner parts of their styling. Examples include Baskerville and Bookman.

Didone.

Didone typefaces date back to the late 18th century and have a much less of a pen influenced style. Their serifs are even thinner with no sign of bracketing. Contrast is much more extreme with thick verticals and very thin horizontals and they are used within the fashion industry. You will have noticed them on many fashion websites and magazines. They also work very well at large sizes and have a decent amount of white space surrounding them.
Examples of Didone include Bodoni and Didot.

Slab.

Slab typefaces arose in the early 19th Century and are extremely thick with slab-like serifs and low contrast. They have a bold “look at me” style and were popular in advertising. They are used primarily in large sizes but some do look nice when used smaller.
Examples include Rockwell and Clarendon

A sans serif, gothic, or simply sans letterform does not have serifs at the end of strokes. Sans serif fonts usually have less variation in stroke width than their serif font counterparts. They are often used for simplicity and modernity.

Sans-serif fonts are widely used for the display of text on screens. On lower-resolution digital displays, fine details like serifs may disappear or appear too large. The addition of ‘sans’ comes from the French word sans, meaning ‘without’, so sans serifs means simply ‘without serifs.’

There are a few different sans typefaces, including Grotesque, Geometrics and Neo-Grotesque.

Choosing The Right Letterforms For Your Website.

Choose typefaces with easily recognisable letterforms. Ensure your eyes can distinguish different letters. For example, try typing the word ill. Certain fonts will make the three letters indistinguishable, and will instead make the word look like the roman numeral for three.

Open Forms

Letters that are open are much less likely to blur when used in smaller font sizes. This will improve overall readability.

Text Size

Text size for body copy will depend on the screen size. We recommend the following for best readability across multiple devices.

Mobile: 12pt – 16pt
Tablet: 15pt – 20pt
Larger Screen: 15pt – 22pt

Leading

The spacing between lines of text will depend on the chosen typeface, but the smaller the text, the tighter the space between lines should be.