Typography, hierarchy and readability in digital media
How to conduct yourself if a workplace investigation is underway
Observing change
§Font families and their personality
Font types are broadly divided into families, each with their own expression. Serif fonts have small feet at the end of letter strokes and are perceived as classical and serious — they are often used for long texts in print. Sans-serif fonts lack the feet, look simpler and more modern, and are therefore the most common font type for screens. Monospace fonts have the same width on each character and are typically used for code. Display fonts are designed to be decorative and work best in large headings, never in body text.
§Basic concepts: kerning, tracking and line spacing
- 01Kerning — the space between two specific letters, adjusted so pairs like 'AV' or 'To' do not look too tight or sparse.
- 02Tracking (letter spacing) — general distance between all letters in word or text often increased slightly in capitals to ease reading
- 03Line spacing (leading) — the distance between lines of text. Too little line spacing makes text difficult to follow; too much line spacing visually splits the paragraph.
- 04X-height — the height of the font's small letters without ascenders or descenders, e.g. a small 'x'. A large x-height makes a font more readable on small screens.
§Hierarchy — guide the eye through the page
A visual hierarchy tells the reader what to read first, next, and last. It is typically built with size, weight (thin, normal, bold) and color: a large, bold heading pulls the eye first, a medium-sized subheading follows, and body text comes last. Without a clear hierarchy, everything is equally important on the page—and when everything shouts equally loud, you really hear nothing.
§Font types and their typical use
| Category | Characteristic | Typical use |
|---|---|---|
| Serif | Small feet on the letters, classic expression | Long texts in print, serious expression |
| Sans-serif | Simple lines without feet | Screens, web, modern expression |
| Monospace | All characters have the same width | Code technical documents |
| Display | Decorator | Large headings and logos, never body text |
§Contrast and accessibility
Typography is not just aesthetics — it is also an accessibility requirement. According to WCAG (Web Content Accessibility Guidelines), normal text must have a contrast ratio of at least 4.5:1 against the background, while large text can have at least 3:1. Low contrast, such as light grey text on a white background, may look elegant in a mood board but makes the text actually unreadable for many users — even those without visual impairment if they are in bright sunlight on a mobile screen.
§Typography pitfalls
- 01Small text on mobile — always test design on a real small screen not just your large design screen.
- 02For long line length — wide text columns make it hard for the eye to find the next line.
- 03Centered body text in long paragraphs — looks nice in small quantities but is tiring to read over time.
- 04Missing compliance with font license — a beautiful font is unusable if you do not have permission to use it in the finished product.
“Good typography is invisible — it disappears and only the message remains. Bad typography is all the reader remembers.”
— Professional view on typography in digital media.