Typography
Typography is a fundamental element of the interface, influencing readability, information hierarchy, aesthetic perception, and brand identity.
A systematic approach to typography management is critical for ensuring consistency, accessibility, and effective textual content delivery.
Principles
Legibility
The core principle ensuring that individual characters are easily distinguishable and do not merge. Font choice, size, letter-spacing, and line-height are optimized for maximum clarity of perception.
Readability
The principle ensuring ease of reading and understanding long text blocks. It encompasses proper line length, alignment, text contrast, and heading hierarchy.
Hierarchy
Typographic styles are used to create a clear visual hierarchy that helps the user navigate information quickly, highlight key elements, and understand relationships between different content fragments.
Brand Identity
Fonts and their styles contribute to shaping a unique brand voice and character. The chosen typography must harmonize with the overall visual language and brand values.
Accessibility
Typographic solutions must comply with accessibility standards, including minimum font size, adequate background contrast, and the ability to scale text without losing functionality.
Baseline Grid
For each font size, the line height must be a multiple of the baseline grid. Example: If the base grid unit is 8px and the main body text size is 16px, then the line height can be 24px or 32px, depending on the desired text density. Furthermore, even if the font size itself (e.g., 21px) is not a multiple of the base unit, its line height must remain a multiple.
Read more about the baseline grid and see an example of working with a baseline grid
Scale
It is essential to use semantic names for font sizes, which ensures flexibility when adapting to different resolutions or scaling.
Display (Large Display Headings)
From display-1 (or d1) to display-6 (or d6). The largest sizes in the scale. Used for very large, accent headings, such as for landing pages, hero blocks, large quotes, or marketing materials.
Headings
From heading-1 (or h1) to heading-6 (or h6). This clearly indicates their hierarchical function.
Body Text
lead, base, small. Reflects different levels of detail for the core content.
Utility/Caption Text
caption, helper-text, label. For less significant or contextual information.
Buttons and Controls
button-text, input-label.
Font Sizes
A systematic set of font sizes based on mathematical proportions (e.g., 1.25 for “Major Third” or 1.618 for “Golden Ratio”) ensuring a harmonious and proportional text scaling. Parallel to this, the line height of each text element is aligned with the baseline grid, creating a stable vertical rhythm critical for readability and the overall design structure.
It is recommended to use no more than 6–8 font sizes. An excess of styles creates visual chaos and overloads human cognitive capacity (according to Miller's Law). Each size is assigned a precise functional role (e.g., Display, Heading 1, Body, Caption).
As the font size increases, the relative line height should decrease. For small text (Body), a normal height is 1.5 (150%), while for large headings (H1), it is reduced to 1.1–1.2 (110–120%) to prevent the text from falling apart.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5 (the same as lead)
Heading 6 (the same as Paragraph)
lead
Paragraph
Small
Font Weights
Using numerical values for font weights (100, 200... 900) is a recommended and standardized practice in web development and design.
100
Thin
200
Extra Light
300
Light
400
Regular / Normal
500
Medium
600
Semi Bold / Demi Bold
700
Bold
800
Extra Bold / Heavy
900
Black / Ultra Bold
Line Length
The optimal range of characters per line typically spans from 45 to 75. Too short lines lead to frequent breaks, which disrupts reading rhythm, while excessively long lines make it difficult for the eyes to follow from the end of one line to the beginning of the next, causing fatigue and loss of focus.
When a line of text becomes endlessly long, reading it turns into a difficult task for the human eye. The reader reaches the far right edge of the screen and is then forced to make a long reverse eye movement. On this path, focus is lost, and the person mistakenly jumps either to the exact same line or skips a line down, completely losing context.
The correct width of a text block creates a sense of comfort. The gaze slides smoothly along the lines without getting tired from frequent jumps. With this layout, the reader easily finds the beginning of the next sentence. They do not need to strain to maintain focus.
Text should not be very narrow. If the lines are too short, your reading rhythm breaks down. The gaze jumps down every second. The brain simply does not have time to immerse itself in the content. It is exhausting.