← PerspectivesUPCRAFTED JOURNALTypography & identity
Typography & identity / Essay

Typography as a working identity

A brand’s typography has to survive long names, dense tables and everyday documents. Here is how to build a distinctive voice that people can actually use.

Stillform brand applications showing coordinated headline and reading typography.
Stillform concept brand · UpCrafted layout specimen

Start with the difficult page

Bell Centennial was designed for the telephone directory. MoMA’s account describes Matthew Carter solving a production problem: small letters, cheap newsprint and ink that crowded the joints of the characters. The unusual cuts in the letters made sense when the type was printed at its intended size.

That is a better starting point for an identity than a wall of adjectives. We think a brand’s typography earns its character in the price list, the long title and the everyday email. A launch poster gets a designer’s attention. The rest of the system has to work when that designer is somewhere else.

Before choosing a face, collect the awkward material. Find the longest product name, the smallest label and the table with the most columns. Set those first. They will tell you more than another page of beautifully spaced capitals.

Source ↗ MoMA · Matthew Carter, Bell Centennial, 1976–78

Give each voice a job

A display face can carry personality while a quieter companion handles instructions, dates and prices. The pairing needs a division of labor. Two expressive typefaces competing for every line rarely make the information clearer.

Decide which face introduces an idea, which explains it and which helps someone act. Then test those jobs with actual copy. A second line in a headline should feel intentional; a price should stay attached to its unit; a date should remain easy to find. These are design decisions, not cleanup tasks.

Specify the behavior

A font name is not a complete instruction.

Write down the useful rules: headline weight, line spacing, alignment, numeral style and the point at which a title changes scale. Include a long heading beside a short one. Show a caption and a dense paragraph. Give the next person a working example, not just an alphabet.

In our Stillform examples, the contrast between a sculptural headline and a plain reading face is deliberate. The typography specimen shows the same voice in a pull quote, a small social panel and a details card. Those are concept applications, but they expose whether the rules travel between formats. A system that only works on its cover is unfinished.

Leave some room for judgment. A headline scale is a starting point, not a command to squeeze every sentence into the same shape. Define the minimum readable size and the allowed alternatives before someone starts improvising.

A font name is not a complete instruction.UpCrafted editorial

Hand over a stress test

Ask someone who did not build the identity to lay out a new page. Give them the fonts, the rules and a messy brief. Watch where they hesitate. If they cannot tell whether a number is a headline or a label, the hierarchy needs another example.

Check the result at its real size, on a phone and on an ordinary office printout. Confirm that the supplied font license covers the intended use, and note what happens when the preferred font is unavailable.

For the next handoff, add one page that deliberately uses the longest heading, the smallest caption and the densest table. Fix that page before polishing the launch poster.

THE PRODUCTION TEST / WCAG 2.2 AA

Character still needs contrast.

07 contrast ratio
Regular text4.5:1
Large text3:1

Check the type in the application, not only on the specimen sheet.

Minimum text-to-background contrast ratios under SC 1.4.3. Large text means at least 18 pt regular or 14 pt bold. Exceptions include logotypes and incidental text; these are thresholds, not research outcomes.

W3C · Understanding Contrast (Minimum) ↗
View values & context
contrast ratio
MeasureValue
Regular text4.5:1
Large text3:1
THE ADAPTABILITY TEST / WCAG 2.2 AA

Give the reader room to adjust.

1.5×Line height
2×After paragraphs
0.12×Letter spacing
0.16×Word spacing

An expressive type system should survive changes to its spacing.

SC 1.4.12 requires no loss of content or function at these user overrides, where applicable. These are not mandatory default design settings. Values are multiples of the font size.

W3C · Understanding Text Spacing ↗
View values & context
font size
MeasureValue
Line height1.5×
After paragraphs2×
Letter spacing0.12×
Word spacing0.16×
✳
The reading file

Sources & further reading

Primary material and published research behind this essay. The analysis and visual studies are UpCrafted’s editorial interpretation.

  1. MoMA · Matthew Carter, Bell Centennial, 1976–78 ↗
  2. W3C · Understanding Contrast (Minimum) ↗
  3. W3C · Understanding Text Spacing ↗