Typography in design: selection, hierarchy, and practical application

Typography is the visual organisation of language. Before a reader processes a single word, they've already registered the type's weight, scale, and structure, and formed an expectation about what kind of thing they're reading. This guide covers the core typographic principles designers need to work with, from type classification and hierarchy to spacing and pairing, with a practical walkthrough of how to apply them in Linearity Curve.

Type classification

Typefaces are organised into categories that describe their visual character and typical use cases. Understanding these categories is the starting point for making deliberate type choices rather than instinctive ones.

The single most important rule in type selection is function before preference. Body text needs to sustain readability across long passages at small sizes — that eliminates most display faces and many scripts before you've opened a type library. A headline can carry significantly more personality because it's read in a glance rather than sustained over paragraphs.

The six major typeface categories, same word, radically different tone. Type choice communicates before content is read.

Typographic hierarchy

Typographic hierarchy is the system that tells a reader what to read first, second, and third. Without hierarchy, every element competes equally for attention — which means nothing is read with the right weight.

This is one of the most common problems in early design work: all the content is present, but there's no direction. The reader's eye doesn't know where to start.

Hierarchy is created through a combination of:

• Size — larger type reads first
• Weight — bolder type draws more attention than lighter
• Colour and contrast — higher contrast reads before lower contrast
• Spacing — more space around an element gives it more visual prominence
• Style — uppercase, italic, or tracked type signals a different role

Most design systems define three to four hierarchy levels. Each level has defined size, weight, and spacing — applied consistently across the entire system rather than decided case by case.

Hierarchy through spacing is often more elegant than hierarchy through size alone. More space above an H2 than below it signals its role as a section opener without requiring a larger font size. Many professional typographers reduce the number of size steps and use spacing, weight, and colour to do the differentiation work.

A four-level typographic hierarchy communicates structure before content, the reader knows what to read first without being told.

Type pairing

Most designs use more than one typeface. Getting pairing right is less about finding two faces that look beautiful together and more about finding two that serve distinct functions without creating visual conflict.

The principle is contrast, not conflict. Two typefaces should be different enough to clearly serve different purposes — a headline face and a body face — but harmonious enough to share a page. The most reliable pairings combine a serif with a sans-serif, because the contrast between the two is functional and clear: each face has an unambiguous role.

Three reliable pairing strategies:

1. Same foundry or superfamily. Many type foundries design companion faces — a serif and a sans-serif built to work together with matching proportions and spacing. Pairing within a superfamily (Freight Display + Freight Text, for example) removes most of the guesswork.

2. Contrast in style, match in weight. A bold display serif headline paired with a light sans-serif body works because the contrast is clear (style) and the visual weight across the page is balanced (both feel proportionally appropriate for their use).

3. Neutral body, expressive headline. A highly legible, neutral sans-serif for body text (Inter, Source Sans, DM Sans) lets the headline face take all the personality. The body stays out of the way; the headline does the character work.

What to avoid:

• Two display faces competing for attention
• Two typefaces from the same category with similar proportions — they'll look like a mistake rather than a choice
• More than two typefaces in one design (almost always)

Spacing: tracking, kerning, and leading

Spacing is where typography moves from functional to refined. Most legibility problems in real design work aren't caused by the wrong typeface — they're caused by incorrect spacing.

Tracking is the uniform spacing between all letters in a block of text. It controls overall density and rhythm.

• Body text: 0 to slightly negative tracking (–10 to 0) — positive tracking makes body text harder to read
• Headlines: slight negative tracking (–20 to –50) for large sizes feels tighter and more intentional
• Uppercase labels and small caps: always increase tracking significantly (+50 to +200) — uppercase letters need more space between them to read comfortably

Kerning is the spacing between specific letter pairs. Unlike tracking, kerning is manual — it corrects optical imbalances between specific character combinations. "VA," "AW," "To," "WA" are classic kerning pairs where the default spacing looks wrong optically even when it's technically correct. Most design tools handle this automatically using the typeface's built-in kerning tables, but large headlines often need manual attention.

Leading (line height) controls the vertical space between lines of text.

• Body text: 140–160% of the font size is the standard readable range. At 16pt, that means 22–26pt line height.
• Headlines: tighter leading (110–130%) feels more intentional at large sizes
• Too little leading: lines feel cramped, the eye struggles to track from one line to the next
• Too much leading: the text loses coherence, lines feel disconnected

Leading has a significant effect on readability, too tight creates cramping, too loose breaks visual coherence.

The relationship between type size, line length, and leading is interdependent. A wider column needs more leading. A narrow column can tolerate tighter leading. A good rule of thumb: 45–75 characters per line is the comfortable reading range for body text — adjust column width and type size together, then set leading to match.

Typography in practice: Linearity Curve workflow

Linearity Curve's Text Tool gives designers precise control over the typographic variables that matter most. Here's how to work with them.

Setting up type with the Text Tool

Activate the Text Tool (T) and click to place a text box. The Style panel on the right immediately shows all typographic controls: Font Family, basic styling (bold, italic, underline), Font Size (up to 1000pt), and alignment.

Three text box behaviours control how the container responds to content:

• Auto width — the box expands horizontally as you type. Use for headlines and short labels.
• Auto height — the box expands vertically. Use for body text where the column width is fixed.
• Fixed width — the box stays at a set width. Use when you need precise column control in a layout.

Controlling spacing in Curve

Letter Spacing: the Letter Spacing control in the Text panel adjusts spacing between characters in points. Increase for uppercase labels and wide-set display type, keep at or near 0 for body text.

Line Height: shown as "Auto" by default in the Text panel, which lets Curve calculate appropriate line spacing for the chosen typeface and size. Override Auto with a specific point value when you need precise leading control — for body text at 16pt, 24pt is a reliable starting point.

Curve applies the typeface's built-in kerning tables automatically. There's no manual per-pair kerning control — for headline work where optical balance matters, use Letter Spacing globally or adjust letterforms after outlining with Outline Text.

Font management

Curve provides access to all fonts installed on your device directly within the Font Picker. For custom fonts, there's an upload button next to the font selector, you can upload TTF files individually or in bulk, on both Mac and iPad, directly within Curve without needing any third-party software.

Advanced typographic features

Text on a path: select both a text box and a vector path, then tap "Text on Path" in the Style panel. The text follows the curve of the path — the individual text properties (font, size, tracking) are maintained and remain adjustable. Once placed, the path loses its own fill and stroke properties.

Outline Text: the "Outline Text" button in the Text Options panel converts text to editable vector paths — turning each letter into an independently adjustable shape. This is essential before exporting for print (to avoid font substitution), before applying complex effects, or when you want to manipulate individual letterforms. After outlining, the text is no longer editable as text — keep a copy of the original text layer.

Common typography mistakes

This article is a part of the design principles guide , covering colour, typography, composition, and white space in professional design work.