Typographic Principles

Everybody knows the conventional wisdom in the design world: you should be exceptionally careful when selecting a typeface so that the text in your designs looks readable. Or is it legible? Or do these terms, legibility and readability, mean the same thing?

Legibility refers to the typeface's design and the shape of the glyphs and falls under the influence of typographers. In contrast, readability is more about the readers' perception of the text and how easily they can decipher, process, and make meaning of it. Readability is the responsibility of copywriters and UX writers. However, typographical features of the text have a profound impact on the text's fluency and comprehension.

What typographical factors affect readability?

• Type size: The smaller the size, the harder the type is to read. From an accessibility standpoint, it's generally recommended to set body text at no less than 16px.
• Type case: While headlines and short phrases (like captions or subheads) get along with all caps and title cases, you should avoid these cases for body text. Sentence case is the most natural for people — after all, that's how we learned to read and write.
• Line spacing (leading): Line spacing depends on the size of the font. The larger the font is, the bigger the line spacing should be to avoid letters overlapping.
• Line length: Long lines are hard to follow. Short lines are no better. They're too abrupt and wear on users' attention, forcing their eyes to go back and forth too often. The optimal line length is 45-70 characters, including spaces.^[1]
• Contrast: Low text-to-background contrast ratio increases eye strain and dramatically affects usability.

According to Nielsen Norman Group research conducted in 1997 on how people read on the web, 79% of participants prefer scanning content before reading when approaching an unfamiliar website. Only 3% of people read text word by word.^[2] Scanning helps readers understand within a few seconds whether the page is worth their attention and can provide value for them.

Scannability is the principle of arranging content in a way that allows users to scan it quickly, figure out if the page contains the information they need, and understand the main message.

So, what makes text scannable?

• Headings and subheadings
• Bulleted and numbered lists
• Short paragraphs
• Captions
• Bold and italic formatting
• Block quotes and pull quotes

Typography is more than a tool for presenting text. It can add to a website's brand personality, reinforce ideas, and even evoke emotions.

In the 2007's Helvetica documentary, English graphic designer, typographer, and art director Neville Brody stated that the typeface influences people's emotional response to an advertising message.

When they see the text "Buy these jeans" in a grunge font, they're likely to expect to see ripped jeans sold in some underground clothing store. When the same message appears in Helvetica, many customers will imagine The Gap, where they can find a plain pair of jeans that doesn't make them stand out in a crowd.

Typefaces help designers set expectations about the product and complement the brand image. Headlines and logos in slab serifs are attention-grabbing and bold; sans serifs appear simple, straightforward, and credible; meanwhile, serifs carry a sense of tradition and experience.

Modern variations of serif typefaces, like Didone, seem like the right fit for luxury products and high fashion and glamour industries. A strong contrast between thin and thick strokes, narrow apertures, and overall classy, rational design contribute to brands that want to convey feelings of style, elegance, and respectability.^[3]

Before committing to a typeface, you should assess its styles, legibility, weights, mood, and ability to complement your content. Let's say you have a couple of candidates, and here arises the question: how many typefaces are enough for your product?

The conventional wisdom says that a website, an app, or any other digital product should contain no more than 3 typefaces. Usually, one typeface with a good variety of font styles for different purposes works fine. Too many typefaces create a mess and disorient users. Plus, it becomes harder to maintain consistency across the product and balance out the visual hierarchy.

When selecting typefaces, make sure they contrast enough but remain visually compatible. For example, simple sans serifs work better for body copy. They allow you to let loose and experiment with more unique typefaces for headlines.

Traditionally, typographic scale refers to the different font sizes used in a design for various types of content. In modern usage, it may also include things like font weight, style, and other elements that set each kind of text content apart.^[4]

According to the Material Design type scale, there are 5 type categories each product should include:

• Headlines: The largest text that spans from a range of 1 through 6. They should use eye-catching, expressive fonts.
• Subtitles (or subheadings): These are smaller than headlines and shouldn't be as prominent.
• Body text: The main text of the content and is usually used for larger sections of writing. Serif and sans serifs are a good fit for this category.
• Captions and overlines: The smallest text and should use simple and legible fonts.
• Button or label text: The text used in buttons, tabs, dialogs, and cards. It usually uses serifs or sans serifs for better legibility and can be written in all caps.

There's no magic number of type sizes to use in design. As a starting point, you can take a browser default value of 16px and calculate the next font sizes using the golden ratio or another multiplier. As for type styles, rely on your sense of harmony and aesthetics.

Distinct differences between body text, headlines, subheads, and captions make the design look cohesive and add to its scannability, allowing users to navigate the content and use headlines and subheadings as anchors.

To pick the right type scale ratio for your design, you can check the Type Scale Calculator.

Good design is far more than just choosing typefaces, placing text on a page, and calling it a day. It's essential to create a solid typographic hierarchy that influences in what order users scan the content. Commonly, it depends on the typeface, font size, weight, case, style, spacing, alignment, and other essential aspects.

Traditionally, in left-to-right languages, body text is left-aligned to provide a higher level of scannability. Right alignment is used to create balance or contrast, while center alignment is rare and mainly applied to headlines. To generate interest and guide user attention, designers can leverage complex alignment — a combination of several alignment types in one composition.

This method allows designers to break from tradition and experiment with positioning text elements such as pull quotes, captions, headings, and body text. In combination with contrasting font weight, size, spacing, and style, you can create ingenious compositions to reinforce the product's message.

Working with typography in design implies that at some point, designers need to apply emphasis to highlight the important information and draw users' attention to it.

The most common emphasis techniques in Western typography include:

• Italics & obliques: Italics (a slanted type style that uses unique glyph shapes) and obliques (a slanted version of the Roman type style) create the softest emphasis, although the degree depends on the surrounding text. This method of emphasis is commonly used for book titles, words from foreign languages, or internal dialogue.
• Bold: Bold text usually has a stronger effect than italics or obliques, using a heavier weight than the surrounding text.
• All caps: All caps help emphasize subheadings, column headlines, and occasionally for words within running text.
• Type size: Larger type works well for headlines and subheads in digital and printed designs.
• Color: Emphasis using color has a stronger effect when combined with other techniques like font-weight or case alterations.^[5]

Methods of emphasis also include variations in letter spacing, underlining, and overlining.

The principle of proximity implies that related elements are placed near each other. In turn, unrelated elements are set at a distance. When arranging text in a composition, designers use white space to group related sentences into paragraphs, making sure users can identify which headlines and subheads relate to which paragraphs.

Additionally, proximity is one of the strongest design principles — it can overpower similarity of color or shape. This means that even if you use the same typeface and color for a headline and body text but place them too far from each other, users might consider them to belong to separate groups and overlook them.^[6]

Just like human beings can't exist without air, design can't function without white space. White space ensures content readability, emphasizes elements, creates balance, and helps users scan pages more efficiently.

There are two types of white space:

• Micro white space is the space between small elements like letters, text lines, paragraphs, icons, and buttons.
• Macro white space is the space between larger elements like text and images and also refers to padding and margins.

When done wisely, white space is a vital instrument that helps users identify related groups of text or other elements (for example, an input label and the associated input or sentences in a paragraph) and also contributes to a minimalistic, clean, and aesthetically pleasing design composition.