What is typography design?
Typography design covers everything that happens to words once they are written: which typefaces are used, how big, in what weight, with what spacing between letters, words and lines, in what hierarchy and on what grid. It is distinct from typeface design, which is drawing the letterforms themselves, and from lettering, which is drawing one set of words once. Typography design works with existing fonts, chooses them and sets them.
In brand work the output is a type system: a primary and a secondary typeface, the weights allowed, a scale of sizes, the rules for headlines, body copy and captions, and how all of it behaves in print, on screen and in motion. On a film it is the title treatment, the lower thirds and the end card.
Why it matters
Why typography design matters
Type is the voice you can see. Before anyone has read a word they have registered the tone, and the same sentence set in a condensed grotesk and in a high-contrast serif says two different things about who is speaking. After the logo, typography is usually the most visible part of an identity, and across packaging, a website, a film title and a social post it is what makes separate pieces read as one brand.
It is also a reading tool. Hierarchy tells the eye where to go first; spacing decides whether a paragraph is effortless or exhausting. Bad typography does not look bad to most people. It just makes them stop reading, which is worse.
In practice
How typography design works in practice
- 01
The work starts with the brand strategy: what should this feel like, and who is reading. Then selection. A shortlist of typefaces is tested in real situations rather than on a specimen sheet: a headline, a paragraph, a caption, a title on a dark frame, a label at the size it will be printed. Licensing is checked early, because fonts are licensed per use (desktop, web, app, broadcast) and the wrong license is a quiet legal problem waiting to surface.
- 02
Then the system: a size scale, a hierarchy, spacing rules, pairings, and fallbacks for email and systems where the brand font cannot load. Motion gets its own pass, because kerning that is fine on a page falls apart at twenty-four frames a second. All of it is written into the brand guidelines so the next designer sets type the same way.
- 03
On screen there is a further layer of engineering. Web fonts are loaded as files, so the type system has to be built with performance in mind: which weights are actually needed, how the font loads, and what the page looks like for the half second before it does. A beautiful typeface that adds a second to every page load is costing the brand more than it is giving, and the typography designer who ignores that has handed the decision to a developer.
- 04
Before the system is signed off it is proofed with real copy: the longest product name, the legal line, a price with a currency symbol, a table of figures, a headline in the languages the brand sells in. That is how a missing glyph, an accent that renders in a fallback font or numerals that refuse to line up in a column get caught. The smallest caption gets the same treatment, checked for size and contrast on a phone at arm's length.
At RIOT
Typography design at RIOT
Type runs through everything we make, from the title treatment on a film to the wordmarks of our own products. Those products are a small lesson in it: vandal_, our creative shop, is set lowercase with a trailing underscore, and the name does not exist without that typographic decision. On our films the type is designed with the picture, so a title that works on the poster also survives as a thumbnail and an end card.
Watch out
What people get wrong about typography design
Using too many typefaces. Two is usually enough, and one with a good range of weights is often better. Choosing from a specimen instead of in use, which is how a beautiful display face ends up as unreadable body copy. Ignoring licensing until the lawyer's letter arrives. Treating typography as decoration, when hierarchy and spacing are what make a page readable. And forgetting where the words will live: on a phone screen at arm's length, or on a film that is moving.
