Typography is the craft of visualizing written language. It’s the new age for age-old art: we need to decide when to embrace the old design practices and when to diverge from them. This article, along with this series, will bring out the best practices regarding typography in web development. We’ll give special attention to accessibility, as well.

Although, it should be said that there are no strict rules in typography. What we do have, however, is a set of principles, design patterns, and methods that will work… in most of the cases. And those are nice guidelines for designers, especially beginners, to take the creative, and sometimes confusing reigns of typography.

Some Basic Properties In Typography Regarding Accessibility

To start our journey, we need some core knowledge to cope with issues about the topic at hand. Let’s have a look at some essentials first.

Typeface Contrast

The contrast of a typeface refers to several aspects. One of them is the differences in the thickness of strokes of its characters. Typefaces whose strokes vary in width from hairline thin to very broad are known as high-contrast. On the other hand, typefaces whose stroke widths are consistent throughout are monoline designs. However, don’t think that monoline typefaces have less contrast. Monoline designs with too little contrast in stroke or distinction between letterforms, as in the case of Helvetica, can be a bad choice for a long paragraph because the letterforms appear too uniform, reducing legibility. Here is when the rule of there being no rules in typography comes into play. You need to find the right balance yourself.

Contrast also involves the density of the letters, or in other words, the whitespace between and inside the letters. The larger the whitespace, the less contrast the typeface has. The difference accumulates noticeably, especially for long texts such as a paragraph, and this is likely to slow down the reading as readers, both consciously and unconsciously, notice the variance in letters.

X-height

A typeface’s x-height refers to the height of its lowercase letters from the baseline to the midline. This property can be as large or small as the type designer intends.

A low x-height typeface looks more elegant with an interesting tension between letterforms, as the contrast is more distinguishable between upper and lower cases. On the contrary, a high x-height provides more space for the letterform, meaning more information to help the reader. This comes from the fact that letters generally carry more of their identifying features in their top halves. Therefore, a higher x-height usually tends to be more informative. However, the larger the x-height in a text face, the less room there is for other distinctive characteristics. For instance, the letters a and d, or n and h, can become difficult to distinguish as the x-height increases. Once again, you need to find the balance that fits your purpose of using a certain typeface.

Good Practices in Typography

Headlines

Headlines attract attention. It is one of the key factors determining whether or not people keep reading. It helps readers navigate and serves as a kind of handshake and smile. A headline should not only stand out from other text on the page (so as not to confuse the eye) but also help anchor the page as a whole. Headlines usually wear a larger text, but it does not have to be limited to that. Alignment, color, spacing, or weight are usable tools for this purpose as well.

Due to those qualities, usually, a headline should fulfill the following requirements:

Higher-contrast typeface

Typefaces with high-contrast grab attention quickly so they easily distinguish themselves from the text of paragraphs. A good example of this is the Bauer Bodoni typeface.

Low x-height typeface

For the same reasons with higher-contrast typeface, low x-height actually creates a high contrast that sets the headlines apart from normal text. Mrs. Eaves typeface is an exemplar in this aspect.

Slightly condensed typeface for length-strict headlinets

For a typical news site with numerous articles, more than often headlines vary in lengths, names that may require punctuation or accented characters, cited works set in italics, and more. A typeface with moderately small whitespace can work well in these situations, as you can pack more characters on each line and avoid awkward line breaks. As an example, FF Meta Serif is a quite narrow face, which bundles a few more characters per line than a wider serif such as Georgia does.

San serif typeface for length-strict headlines

This practice comes from the simple fact that most sans serifs can be tied in tighter than serifs because the letters take up less space. Therefore, you can afford more character per line as well as a larger type size. For example, instead of using FF Meta Serif as above, you could choose a more succinct San Serif version such as FF Meta

Double or triple the body text size to find a potential headline size

Looking for a suitable font size for a headline sounds simple, just go by your intuition, right? However, you should try to double or triple the text size of the body paragraph.  If you have body text with a font size of 16px, it’s a safe choice to pick 32px for your headline text size or experience with font sizes ranging from 32 to 48px to see what fits the best.

Paragraphs

The paragraph is the basic building block for most sites with content. It is where you spend most of your time reading, so you need to use typefaces that incentivize the reader to stay longer, or in other words, try to avoid factors that make the eyes feel uncomfortable to read further. You might notice, now, that the typographic qualities of a pre-eminent headline and a legible paragraph are opposites.

Typefaces with less contrast

Opposite to headlines, if the typeface of a paragraph is too distinctive, readers may perceive the prominence of letters and that will distract the reading. Thus, a typeface of lesser contrast, such as Chaparral, is a great choice to keep the focus of readers on the content of the paragraph.

High x-height typeface

High x-height makes the typeface look uniformed, making it easy for the reader to quickly scan through the text. Take JAF Facit as an example. It can get very small, but it remains clear and legible because of its simple construction with mildly high x-height. Note that at the extreme end, too high of an x-height causes the typeface to look indistinguishable in some characters, which will ruin the readability.

Font size of 16px to 18px

Considering the typical distance and common text sizes in digital reading content, it is recommended that the font size of a base text, which is usually the paragraph text, around 16 or 18px, or 1 to 1.2ems. In your own work, you should use ems, rems, or percentages to represent your font size value so that it could be systematic and responsive.

That’s All About Typography, Folks

These pointers should get you started in using typography as an effective tool in your web design. Next time, I’ll write about inclusive design patterns. Stay tuned!

P.S. Have you not yet read the previous part of the series? You can view it here!