Choose a font for a message and combine text styles without adding unnecessary fonts.
What you will learn.
Compare two heading-and-body pairings on identical words and layout, then choose one for a stated reading reason.
Before you begin.
Start with Use space and line things up. Reuse one message, two text roles, and a stable layout in Figma Design. This prepares your existing ten-layout project; it does not add another ten layouts.
Learn the concept.
Choosing fonts
Words to know.
Font pairing
Choosing text styles or families to use together.
Typefaces used together
Tone
The feeling the visual choices may suggest in this context.
How the words come across
Contrast
A noticeable difference, such as heavy and light letters.
Visible difference between parts
Role
The job of a style, such as heading or paragraph.
A person’s responsibility
The idea in practice
See a worked example.
Keep the same words when comparing fonts.
For exampleUse the same headline when you test two type combinations.
Name the role of each style.
For exampleUse one style for the title and another for the body copy.
Remove a style you cannot explain.
For exampleRemove a third style if it adds no clear reading cue.
Worked pairing. Set “Find a class” above the same short paragraph in both versions. First use one family with bold and regular weights; then compare a distinct heading family with the same body text. Hold layout and words still. If the second family adds no useful separation, the simpler pairing wins for this task.
