Font hierarchy in the brand book: headers, text, accents
How to calculate sizes for all levels of hierarchy at once
The mistake of most mid-level brand books — calculating sizes for one medium and then adjusting the rest intuitively by the designer. It works differently: first, a base and coefficient are chosen, then the entire size grid for print, web, and mobile is built simultaneously on those.
- Fix the base text size. For web, this is usually 16px (a standard used by the EU Design System and most frameworks), for print — 9-11pt for A4, for mobile interface — 14-16px as the lower limit of readability.
- Choose a modular ratio coefficient — more details on selection below. For corporate, "serious" brands, Major Third (1.25) is often chosen, for brands aspiring to expressiveness — Perfect Fourth (1.333) or the golden ratio (1.618).
- Multiply the base by the coefficient the required number of times upward (for headers) and divide — downward (for small captions, footnotes).
- For each format, define a separate breakpoint scale: what reads from 3 meters on A3 cannot physically fit in a line on a mobile screen.
- Consolidate everything into one token table — following the SAP model, where each level (H1, H2, Body XL, Body M, etc.) has its own set of values for desktop, tablet, and mobile.
Example in numbers: base 16px, coefficient 1.333. Body = 16px, H3 = 21px, H2 = 28px, H1 = 38px, Display = 50px. For printing, this same proportion is scaled in pt according to format: on A3, the base 16px equivalent becomes 14-16pt, and the Display header becomes 42-48pt, because the reading distance is different.
Contrast between levels: size is small
The rule of ‘1,5-1,6 times larger heading than text’ by itself does not create hierarchy — it only works in combination with font weight. If you increase only the font size but keep the same Regular weight, the eye reads the difference more slowly, and the layout looks less cohesive. The combination of size and weight always produces a cleaner result than a single parameter.
| Level | Size (relative to body) | Typeface | Additional contrast |
|---|---|---|---|
| Heading H1 | ×2,5–3 | Bold / SemiBold | brand color or increased tracking minus |
| Subheading H2 | ×1,6–1,8 | SemiBold | optional color |
| Body text | ×1 | Regular | — |
| Caption | ×0,75–0,85 | Regular / Light | increased line height |
Separately for accessibility: the contrast between text color and background must meet WCAG — at least 4,5:1 for regular text and 3:1 for large text (from 18pt and up). This is not a decorative recommendation, but a requirement that is automatically checked in website audits, and ignoring it is a common reason why a beautiful brand book on the mockup fails validation in production.
Line height, tracking, and kerning: how to set them consistently
Disjointed adjustment of these three parameters is the most common reason why the same font ‘breathes’ differently on a website and in a presentation. The rule works like this: the larger the font size, the tighter the letter spacing and line spacing should be, and vice versa.
- Line height for headings — 1,2–1,3 of font size: large text is already visually ‘spread out’, and extra spacing between lines ruins its balance.
- Leading of the main text — 1,4–1,6: here a simple practical rule applies — there must be room for one lowercase letter of the same font and the same size between two lines. If it doesn't fit, the text will be hard to read in long paragraphs.
- Tracking of headings — from -20 to -30 (letter compression): large letters physically have more 'air' inside, and slight compression makes the word a visually dense block.
- Tracking of the main text — 0 or -10, no more: the body of the text must not 'stick together', otherwise reading speed decreases.
GE HealthCare in its system uses this logic exactly: -20 for headings, -10 for the main text — the numbers are small, but their consistent application throughout the system gives a feeling of thoughtfulness that is not consciously perceived, but felt.
Kerning (the spacing between specific pairs of letters, for example "AV" or "To") in brand typography is set once at the level of the font or logo itself and is not adjusted by the document user — this is the task of whoever prepares the templates, not the one who lays out the presentation.
What is a modular scale and why it is better than "by eye"
A modular scale is a sequence of sizes where each subsequent level is obtained by multiplying the previous one by a fixed coefficient, rather than being arbitrarily adjusted to a specific layout. The difference in practice is huge: without a scale, a designer has to solve anew each time whether "22 or 24 will look better", whereas with a scale the answer is already there — these two numbers simply do not belong to the system.
| The name of the scale | Coefficient | The character it gives to the brand |
|---|---|---|
| Minor Second | 1,067 | Almost imperceptible hierarchy, very dense grid — for strict corporate systems |
| Major Third | 1,25 | Measured, business rhythm — banks, B2B |
| Perfect Fourth | 1,333 | Noticeable, but not aggressive hierarchy — a universal choice |
| Golden Ratio | 1,618 | Expressive, "designerly" presentation — media, lifestyle brands |
This directly answers the question of why coefficients in real brand books are different: BEST splits by 1,7 for subtitles — this is close to the golden ratio and works on expressiveness; SAP maintains a more restrained, stepped grid with individual presets for each level — this is a choice in favor of predictability of the corporate system, rather than effectiveness. The coefficient is not a technical detail, but part of the brand image: the higher it is, the more contrast and 'loud' the hierarchy is perceived.
Material Design in this logic goes even further — it incorporates 13 levels of typographic hierarchy, because the Google interface operates across multiple contexts from watches to tablets, and each requires its own level of detail in the scale.
Transferring hierarchy between print, web, and mobile
The main mistake when scaling is to transfer absolute values in pixels or points from one medium to another. What is correctly transferred is not the size, but the proportion and logic: the scale factor remains the same, but the base and number of steps change according to reading conditions.
- The line length sets the boundaries, not the other way around: for printing comfortable 50-75 characters per line, for web — 60-66. If a heading breaks this length when wrapped on mobile, you should reduce not the entire layout, but specifically this scale level.
- Text on a mobile screen does not increase beyond 14-16px — the distance to the eyes is small there, and large body text only gets in the way. Headers, on the other hand, noticeably compress: SAP sets separate, reduced values for H-levels at S/XS breakpoints, rather than simply proportionally shrinking everything through CSS media queries.
- Leading usually needs to be slightly increased when transitioning from print to web: the screen introduces more visual noise (anti-aliasing, highlighting), and text with print leading on screen looks cramped.
- Heading tracking that looks good in high-resolution print can 'merge' on low pixel density (regular monitors) — it's better to plan for slightly less aggressive tracking for the web version of the same typeface.
Practical conclusion: a brand book should not contain just one size table, but at least three — for print (A3/A4), for web (desktop), and for mobile breakpoints, all built on one modular scale but with different bases and varying numbers of visible steps. It is precisely the lack of such a linkage that is the most common reason why a brand style 'spreads out' when transitioning from presentation to website.
How to calculate sizes for all levels of hierarchy at once
The mistake of most mid-level brand books — calculating sizes for one medium and then adjusting the rest intuitively by the designer. It works differently: first, a base and coefficient are chosen, then the entire size grid for print, web, and mobile is built simultaneously on those.
- Fix the base text size. For web, this is usually 16px (a standard used by the EU Design System and most frameworks), for print — 9-11pt for A4, for mobile interface — 14-16px as the lower limit of readability.
- Choose a modular ratio coefficient — more details on selection below. For corporate, "serious" brands, Major Third (1.25) is often chosen, for brands aspiring to expressiveness — Perfect Fourth (1.333) or the golden ratio (1.618).
- Multiply the base by the coefficient the required number of times upward (for headers) and divide — downward (for small captions, footnotes).
- For each format, define a separate breakpoint scale: what reads from 3 meters on A3 cannot physically fit in a line on a mobile screen.
- Consolidate everything into one token table — following the SAP model, where each level (H1, H2, Body XL, Body M, etc.) has its own set of values for desktop, tablet, and mobile.
Example in numbers: base 16px, coefficient 1.333. Body = 16px, H3 = 21px, H2 = 28px, H1 = 38px, Display = 50px. For printing, this same proportion is scaled in pt according to format: on A3, the base 16px equivalent becomes 14-16pt, and the Display header becomes 42-48pt, because the reading distance is different.
Contrast between levels: size is small
The rule of ‘1,5-1,6 times larger heading than text’ by itself does not create hierarchy — it only works in combination with font weight. If you increase only the font size but keep the same Regular weight, the eye reads the difference more slowly, and the layout looks less cohesive. The combination of size and weight always produces a cleaner result than a single parameter.
| Level | Size (relative to body) | Typeface | Additional contrast |
|---|---|---|---|
| Heading H1 | ×2,5–3 | Bold / SemiBold | brand color or increased tracking minus |
| Subheading H2 | ×1,6–1,8 | SemiBold | optional color |
| Body text | ×1 | Regular | — |
| Caption | ×0,75–0,85 | Regular / Light | increased line height |
Separately for accessibility: the contrast between text color and background must meet WCAG — at least 4,5:1 for regular text and 3:1 for large text (from 18pt and up). This is not a decorative recommendation, but a requirement that is automatically checked in website audits, and ignoring it is a common reason why a beautiful brand book on the mockup fails validation in production.
Line height, tracking, and kerning: how to set them consistently
Disjointed adjustment of these three parameters is the most common reason why the same font ‘breathes’ differently on a website and in a presentation. The rule works like this: the larger the font size, the tighter the letter spacing and line spacing should be, and vice versa.
- Line height for headings — 1,2–1,3 of font size: large text is already visually ‘spread out’, and extra spacing between lines ruins its balance.
- Leading of the main text — 1,4–1,6: here a simple practical rule applies — there must be room for one lowercase letter of the same font and the same size between two lines. If it doesn't fit, the text will be hard to read in long paragraphs.
- Tracking of headings — from -20 to -30 (letter compression): large letters physically have more 'air' inside, and slight compression makes the word a visually dense block.
- Tracking of the main text — 0 or -10, no more: the body of the text must not 'stick together', otherwise reading speed decreases.
GE HealthCare in its system uses this logic exactly: -20 for headings, -10 for the main text — the numbers are small, but their consistent application throughout the system gives a feeling of thoughtfulness that is not consciously perceived, but felt.
Kerning (the spacing between specific pairs of letters, for example "AV" or "To") in brand typography is set once at the level of the font or logo itself and is not adjusted by the document user — this is the task of whoever prepares the templates, not the one who lays out the presentation.
What is a modular scale and why it is better than "by eye"
A modular scale is a sequence of sizes where each subsequent level is obtained by multiplying the previous one by a fixed coefficient, rather than being arbitrarily adjusted to a specific layout. The difference in practice is huge: without a scale, a designer has to solve anew each time whether "22 or 24 will look better", whereas with a scale the answer is already there — these two numbers simply do not belong to the system.
| The name of the scale | Coefficient | The character it gives to the brand |
|---|---|---|
| Minor Second | 1,067 | Almost imperceptible hierarchy, very dense grid — for strict corporate systems |
| Major Third | 1,25 | Measured, business rhythm — banks, B2B |
| Perfect Fourth | 1,333 | Noticeable, but not aggressive hierarchy — a universal choice |
| Golden Ratio | 1,618 | Expressive, "designerly" presentation — media, lifestyle brands |
This directly answers the question of why coefficients in real brand books are different: BEST splits by 1,7 for subtitles — this is close to the golden ratio and works on expressiveness; SAP maintains a more restrained, stepped grid with individual presets for each level — this is a choice in favor of predictability of the corporate system, rather than effectiveness. The coefficient is not a technical detail, but part of the brand image: the higher it is, the more contrast and 'loud' the hierarchy is perceived.
Material Design in this logic goes even further — it incorporates 13 levels of typographic hierarchy, because the Google interface operates across multiple contexts from watches to tablets, and each requires its own level of detail in the scale.
Transferring hierarchy between print, web, and mobile
The main mistake when scaling is to transfer absolute values in pixels or points from one medium to another. What is correctly transferred is not the size, but the proportion and logic: the scale factor remains the same, but the base and number of steps change according to reading conditions.
- The line length sets the boundaries, not the other way around: for printing comfortable 50-75 characters per line, for web — 60-66. If a heading breaks this length when wrapped on mobile, you should reduce not the entire layout, but specifically this scale level.
- Text on a mobile screen does not increase beyond 14-16px — the distance to the eyes is small there, and large body text only gets in the way. Headers, on the other hand, noticeably compress: SAP sets separate, reduced values for H-levels at S/XS breakpoints, rather than simply proportionally shrinking everything through CSS media queries.
- Leading usually needs to be slightly increased when transitioning from print to web: the screen introduces more visual noise (anti-aliasing, highlighting), and text with print leading on screen looks cramped.
- Heading tracking that looks good in high-resolution print can 'merge' on low pixel density (regular monitors) — it's better to plan for slightly less aggressive tracking for the web version of the same typeface.
Practical conclusion: a brand book should not contain just one size table, but at least three — for print (A3/A4), for web (desktop), and for mobile breakpoints, all built on one modular scale but with different bases and varying numbers of visible steps. It is precisely the lack of such a linkage that is the most common reason why a brand style 'spreads out' when transitioning from presentation to website.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
