Set type that reads well
Hierarchy, pairing, size, measure, leading and tracking: the numbers that make text easy to read, and where to set each one in Voidcanvas.
Beginner5 min readUpdated 25 September 2026Editor · Type
On this page
Most text problems come down to six decisions: what matters most, which fonts, how big, how long the lines are, how far apart they sit, and how tightly the letters pack. Get these right and plain type looks designed. Get them wrong and no effect will rescue it.
Hierarchy: decide what is read first
Before you pick a font, rank the words. A poster usually has three levels: the one thing (headline or event name), the facts (date, place, price) and the small print. Each level should be clearly different from the next, not slightly different. A heading 10 per cent bigger than the body looks like a mistake; one at least 1.5 times bigger looks like a decision.
You have four levers: size, weight, colour and space. Use two at a time. A bold heading in the same size as the body can work; a bigger, bolder, coloured, underlined heading is shouting. Limit a single piece to three or four sizes.
Pairing fonts
One family with a range of weights is always safe. If you pair two, pair for contrast of structure and agreement of proportion: a serif display face over a clean sans for reading, or a condensed bold sans over a wide, calm text face. Two fonts that are nearly the same (two geometric sans, say) look like an error.
- Give each font one job: headings, reading text, and optionally numbers or code.
- Check the x-height (the height of a lowercase x). Faces with similar x-heights sit well together on the same line.
- Choose families that have the weights you need. A heading at 700 and body at 400 needs both weights to exist.
- Stop at two families. A third is for data or code, not for variety.
The brand guideline builder in Studio pairs within a personality. For example, Refined reaches for DM Serif Display with DM Sans, or Playfair Display with Lora; Minimal uses Inter, Manrope or IBM Plex Sans on its own and carries hierarchy with weight and size.
Size
On screen, body text should be at least 16 px. The brand guideline builder flags a body size under 16 px as hard to read. In print, body text is usually 9 to 12 pt, captions 7 to 8 pt, and anything under 6 pt is legal small print at best.
A point is 1/72 of an inch (0.353 mm). Voidcanvas works in pixels, so convert: at 300 ppi one point is about 4.2 px. That means 10 pt body text on the A4 flyer preset (2480 px wide, 300 ppi) is about 42 px, and a 48 pt headline is 200 px. Designers often set print text far too small because 42 px looks tiny on a zoomed-out canvas.
Use a type scale
A scale multiplies a base size by a fixed ratio for each step up. With a 16 px base and a ratio of 1.25 (a major third) you get 16, 20, 25, 31, 39, 49. Every size is related to every other, so the page feels consistent even when you cannot say why.
| Ratio | Name | Feels |
|---|---|---|
| 1.2 | Minor third | Quiet. Good for dense documents and interfaces. |
| 1.25 | Major third | Balanced. A safe default. |
| 1.333 | Perfect fourth | Clear steps. Editorial. |
| 1.5 | Perfect fifth | Dramatic. Posters and landing pages. |
| 1.618 | Golden ratio | Very steep. Few steps fit on one page. |
Measure: how long a line is
Measure is line length in characters. For body text, aim for 45 to 75 characters per line, with about 66 as the sweet spot. Shorter lines make the eye jump back too often; longer lines make it lose its place on the return. Headlines and captions can break the rule because they are read differently.
A rough way to size a text box: many text faces average about half an em per character, so 66 characters at 16 px needs roughly 66 × 0.5 × 16 = 528 px. Set it, then count a line and adjust.
Leading: space between lines
Leading (line spacing) is written as a multiple of the font size. Body text wants 1.4 to 1.6. Big headlines want much less, 1.0 to 1.15, because the gaps grow with the size and a two-line heading at 1.5 falls apart. Longer lines need a little more leading than short ones.
The type scale in the brand guideline builder follows this: 1.5 for sizes around body text, 1.25 from 22 px, 1.15 from 32 px and 1.05 from 48 px.
Tracking and kerning
Kerning adjusts the space between particular pairs (AV, To). Good fonts ship with kerning tables; leave them on. Tracking changes spacing evenly across a whole line.
- Large display text looks loose by default. Tighten it slightly: about -0.025 em at 48 px and above.
- All caps and small caps need more room: +0.05 to +0.1 em.
- Body text: leave tracking at 0.
- Small text under 14 px can take a touch more, about +0.01 em.
Design apps often measure tracking in thousandths of an em, where -25 means -0.025 em. Voidcanvas measures it in pixels, so multiply by the font size: -0.025 em at 96 px is -2.4 px; +0.08 em on 24 px capitals is about +2 px.
Alignment
Left-aligned, ragged-right text is the easiest to read in most Latin-script languages because every line starts in the same place. Centre short things only: a headline, an invitation, three lines at most. Justified text needs a long measure, or it opens up rivers of white space between words.
Do it in Voidcanvas
- Press T for the Type tool. Click for a single line of text, or drag a box for a paragraph that wraps.
- Open the Character panel (Window menu) for Size, Weight, Leading (as a multiple, ×), Tracking (px), Word spacing, Baseline shift and Width. Keep Use the font's kerning ticked.
- Use the TT and Tt buttons for all caps and small caps, then add positive tracking.
- Open the Paragraph panel for alignment, Wrap in a text box, Box width, First-line indent and Space after paragraph. Set Box width to control the measure; the panel shows the line count.
- For a quick change, the Properties panel has More type options with Size, Line spacing and Letter spacing sliders.
To plan a whole system, open Studio, choose Brand guideline builder, and use the Type tab: pick Headings, Body and Data and code fonts, a Scale (Minor third to Golden ratio) and a Base size from 14 to 18. The preview lists every step from Display to Caption with its pixel size, and the tokens export gives developers the same numbers.
Common problems
- Justify does nothing. Justify needs a text box to spread lines across. Tick Wrap in a text box first.
- A font looks different on another computer. The font was not available there. Google fonts load by name; fonts you add from a file are saved inside the design. See Type.
- Everything looks the same weight. You changed size but not weight or colour, or the steps are too close. Go up a step in the scale.
- Headline lines crash into each other. Leading below 1.0 with tall ascenders or accents. Raise it until the marks clear.