How to build a typographic grid for a brand guideline
Start with the scale, not the font size
The first decision to make is not 'what font,' but 'what growth factor' will control all sizes in the system. This is the modular scale: each subsequent level of hierarchy is multiplied by the chosen factor relative to the base size. For web, 16px is almost always taken as the base — this is the default body text size in browsers, and deviation from it requires separate justification in the guideline. For print media, 14pt is often used as the base, and this is a fundamentally different grid, not a recalculation of web values into points.
The factor sets the character of the brand even before the font is chosen. The difference between the values is the difference between 'restrained' and 'expressive':
| Coefficient | Name | Character | When to apply |
|---|---|---|---|
| 1.125 | Major Second | dense, restrained hierarchy | dense interface, many text levels, fintech/enterprise |
| 1.200 | Minor Third | moderate contrast | universal choice for mobile interfaces |
| 1.250 | Major Third | balanced, readable | corporate and service brands |
| 1.333 | Perfect Fourth | noticeable, but not shouty | desktop websites, media |
| 1.618 | Golden Ratio | expressive, brand-oriented | headings, hero-blocks, digital art direction |
In practice, it is rarely the case that one coefficient is used for the entire system. The working combination is 1.25 or 1.333 for the main text scale and a separate, larger step (1.5–1.618) for display headings and hero text, where a clear visual emphasis is needed. This is not a violation of systematicity, but its complication up to two levels — this is how the scales are built by most mature brands.
It is worth separately noting the minimum width of the container for text — the LIDS rule: take the phrase "Lorem ipsum dolor sit" at the smallest font size in the scale and measure its width. For example, for 14px Times this is approximately 140px. This value is included in the guidelines as the minimum width of the text block — otherwise, developers will compress headings into narrow cards on actual layouts, and the hierarchy will break.
Adaptive grid: from 320px to 1920px without loss of hierarchy
The mistake of most guidelines is trying to scale all text proportionally to screen width. This only works for display headings. Body text should behave differently.
- Display and h1 scale significantly: a typical shift — 56px on desktop → 36px on mobile. The difference is 1.5–1.6 times — this is normal and expected.
- Body text stays around 16px on all devices or changes minimally (16px → 15px), because readability is more important than visual effect.
- Scale coefficient on mobile should be tighter — around 1.2, and on desktop more spacious — 1.333–1.5. The reason is simple: on narrow screens, large steps between levels consume available space and text begins to wrap awkwardly.
Practical conclusion: in the guidelines, it is necessary to document not one scale, but two — mobile and desktop, with a clear transition point (breakpoint) and indication of which levels scale linearly and which are fixed.
What to document besides font size
Font size is only one parameter out of four, and without the other three, the system does not function as a whole. Below is the mandatory minimum for each level of hierarchy.
| Level | Line-height | Letter-spacing | Font-weight |
|---|---|---|---|
| Hero / Display | 0.9–1.0 | from -0.02em to -0.05em | 700 |
| H2–H3 | 1.25–1.35 | from -0.01em to -0.03em | 600–700 |
| Body | 1.5–1.65 | 0 (default) | 400 |
| Label / Badge | 1.1–1.2 | from +0.04em to +0.16em | 400–600 |
Interline spacing should vary by level, not remain uniform throughout the text — a large heading with line-height 1.5 looks loose, while dense body text with line-height 1.0 is illegible. Letter-spacing works in the opposite direction to size: the larger the type size, the closer the letters should be to each other — this compensates for the optical expansion of large letters. For labels and badges, however, letters are spread apart, because small caps text in tight spacing tends to merge.
By font weight — the rule here is 'less means better'. Analysis of nine real brand guidelines shows that the overwhelming majority use only 2–3 font-weight: either 400/700, or 300/400/700. Five or more weights in a system almost always means that the designer couldn't make a decision at the design stage and left themselves 'backup options' — in the finished guideline, this reads as inconsistency, not flexibility.
How to set up a grid in Figma and transfer it to other media
- Create a library of text styles for each hierarchy level (Display, H1–H4, Body L/M/S, Caption, Label) with fixed size/line-height/letter-spacing/weight in one place — Text Styles, not local settings in layers.
- Set up variables (Variables) for the base size and scale factor separately for mobile and desktop modes — this allows switching breakpoints with one property, rather than manually redrawing styles.
- Document the scale as a table in a separate frame of the guideline: a column for the level, px value, rem equivalent, and justification (why exactly this step was chosen).
- For print, create a separate set of styles based on 14pt — it is not possible to mechanically convert web px to pt, because the optical density of paper and screen differs.
- For social networks, fix the minimum leading based on readability at small previews (usually no less than 24px for headers in cards and stories) — this is a separate mini-scale, not a truncated version of the main one.
Modular grid, baseline grid, and typographic grid — different tools
These three terms are often confused, but in the guideline they address different tasks and do not replace each other.
| Tool | What it regulates | When to use in the guideline |
|---|---|---|
| Modular grid | layout of content blocks, columns, and layout margins | for laying out pages and composing, not for text size |
| Baseline grid | vertical rhythm — alignment of text lines to a common step (usually 4 or 8px) | when you need text in adjacent columns to visually align by lines |
| Typographic grid (modular scale) | ratio of font sizes between hierarchy levels | the foundation of the brand's font system — is set first, before everything else |
For the brand guideline, the order is as follows: first, the typographic scale (coefficient and base) is established, then a baseline grid with a step of 4 or 8px is applied — so that the line-height of each level is a multiple of this step. Only after that does the modular grid of the layout receive margins that are multiples of the same base step. If done in reverse order, the typography will visually 'miss' the columns of the layout.
Common mistakes when building a font grid
- Too many sizes. If the system has more than 7–8 levels of type size — the hierarchy stops being readable, and developers start inventing intermediate values by eye.
- A single line-height for all levels. This is the most common mistake: line-height 1.5 is good for body text, but kills large headings, making them visually loose.
- Ignoring letter-spacing. Without negative tracking on large headings, letters visually 'spread apart', especially with fonts that have wide aperture.
- One scale for mobile and desktop. A coefficient comfortable on a wide screen creates either too large headings or too small body text on 320px — separate values are needed.
- Mechanical transfer of web grid to print. Base 16px and its scale do not work for 14pt print typography — there is another optical density and reading distance there.
- Too many font-weight values. Five or more weights blur the hierarchy instead of strengthening it — stick to 2–3 weights.
Start with the scale, not the font size
The first decision to make is not 'what font,' but 'what growth factor' will control all sizes in the system. This is the modular scale: each subsequent level of hierarchy is multiplied by the chosen factor relative to the base size. For web, 16px is almost always taken as the base — this is the default body text size in browsers, and deviation from it requires separate justification in the guideline. For print media, 14pt is often used as the base, and this is a fundamentally different grid, not a recalculation of web values into points.
The factor sets the character of the brand even before the font is chosen. The difference between the values is the difference between 'restrained' and 'expressive':
| Coefficient | Name | Character | When to apply |
|---|---|---|---|
| 1.125 | Major Second | dense, restrained hierarchy | dense interface, many text levels, fintech/enterprise |
| 1.200 | Minor Third | moderate contrast | universal choice for mobile interfaces |
| 1.250 | Major Third | balanced, readable | corporate and service brands |
| 1.333 | Perfect Fourth | noticeable, but not shouty | desktop websites, media |
| 1.618 | Golden Ratio | expressive, brand-oriented | headings, hero-blocks, digital art direction |
In practice, it is rarely the case that one coefficient is used for the entire system. The working combination is 1.25 or 1.333 for the main text scale and a separate, larger step (1.5–1.618) for display headings and hero text, where a clear visual emphasis is needed. This is not a violation of systematicity, but its complication up to two levels — this is how the scales are built by most mature brands.
It is worth separately noting the minimum width of the container for text — the LIDS rule: take the phrase "Lorem ipsum dolor sit" at the smallest font size in the scale and measure its width. For example, for 14px Times this is approximately 140px. This value is included in the guidelines as the minimum width of the text block — otherwise, developers will compress headings into narrow cards on actual layouts, and the hierarchy will break.
Adaptive grid: from 320px to 1920px without loss of hierarchy
The mistake of most guidelines is trying to scale all text proportionally to screen width. This only works for display headings. Body text should behave differently.
- Display and h1 scale significantly: a typical shift — 56px on desktop → 36px on mobile. The difference is 1.5–1.6 times — this is normal and expected.
- Body text stays around 16px on all devices or changes minimally (16px → 15px), because readability is more important than visual effect.
- Scale coefficient on mobile should be tighter — around 1.2, and on desktop more spacious — 1.333–1.5. The reason is simple: on narrow screens, large steps between levels consume available space and text begins to wrap awkwardly.
Practical conclusion: in the guidelines, it is necessary to document not one scale, but two — mobile and desktop, with a clear transition point (breakpoint) and indication of which levels scale linearly and which are fixed.
What to document besides font size
Font size is only one parameter out of four, and without the other three, the system does not function as a whole. Below is the mandatory minimum for each level of hierarchy.
| Level | Line-height | Letter-spacing | Font-weight |
|---|---|---|---|
| Hero / Display | 0.9–1.0 | from -0.02em to -0.05em | 700 |
| H2–H3 | 1.25–1.35 | from -0.01em to -0.03em | 600–700 |
| Body | 1.5–1.65 | 0 (default) | 400 |
| Label / Badge | 1.1–1.2 | from +0.04em to +0.16em | 400–600 |
Interline spacing should vary by level, not remain uniform throughout the text — a large heading with line-height 1.5 looks loose, while dense body text with line-height 1.0 is illegible. Letter-spacing works in the opposite direction to size: the larger the type size, the closer the letters should be to each other — this compensates for the optical expansion of large letters. For labels and badges, however, letters are spread apart, because small caps text in tight spacing tends to merge.
By font weight — the rule here is 'less means better'. Analysis of nine real brand guidelines shows that the overwhelming majority use only 2–3 font-weight: either 400/700, or 300/400/700. Five or more weights in a system almost always means that the designer couldn't make a decision at the design stage and left themselves 'backup options' — in the finished guideline, this reads as inconsistency, not flexibility.
How to set up a grid in Figma and transfer it to other media
- Create a library of text styles for each hierarchy level (Display, H1–H4, Body L/M/S, Caption, Label) with fixed size/line-height/letter-spacing/weight in one place — Text Styles, not local settings in layers.
- Set up variables (Variables) for the base size and scale factor separately for mobile and desktop modes — this allows switching breakpoints with one property, rather than manually redrawing styles.
- Document the scale as a table in a separate frame of the guideline: a column for the level, px value, rem equivalent, and justification (why exactly this step was chosen).
- For print, create a separate set of styles based on 14pt — it is not possible to mechanically convert web px to pt, because the optical density of paper and screen differs.
- For social networks, fix the minimum leading based on readability at small previews (usually no less than 24px for headers in cards and stories) — this is a separate mini-scale, not a truncated version of the main one.
Modular grid, baseline grid, and typographic grid — different tools
These three terms are often confused, but in the guideline they address different tasks and do not replace each other.
| Tool | What it regulates | When to use in the guideline |
|---|---|---|
| Modular grid | layout of content blocks, columns, and layout margins | for laying out pages and composing, not for text size |
| Baseline grid | vertical rhythm — alignment of text lines to a common step (usually 4 or 8px) | when you need text in adjacent columns to visually align by lines |
| Typographic grid (modular scale) | ratio of font sizes between hierarchy levels | the foundation of the brand's font system — is set first, before everything else |
For the brand guideline, the order is as follows: first, the typographic scale (coefficient and base) is established, then a baseline grid with a step of 4 or 8px is applied — so that the line-height of each level is a multiple of this step. Only after that does the modular grid of the layout receive margins that are multiples of the same base step. If done in reverse order, the typography will visually 'miss' the columns of the layout.
Common mistakes when building a font grid
- Too many sizes. If the system has more than 7–8 levels of type size — the hierarchy stops being readable, and developers start inventing intermediate values by eye.
- A single line-height for all levels. This is the most common mistake: line-height 1.5 is good for body text, but kills large headings, making them visually loose.
- Ignoring letter-spacing. Without negative tracking on large headings, letters visually 'spread apart', especially with fonts that have wide aperture.
- One scale for mobile and desktop. A coefficient comfortable on a wide screen creates either too large headings or too small body text on 320px — separate values are needed.
- Mechanical transfer of web grid to print. Base 16px and its scale do not work for 14pt print typography — there is another optical density and reading distance there.
- Too many font-weight values. Five or more weights blur the hierarchy instead of strengthening it — stick to 2–3 weights.
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
