Explain how text is arranged, recognize a font family and its styles, and spot serif and sans serif letters.
What you will learn.
Identify one visible serif or sans-serif feature, compare two weights of one family, and explain what the heading and paragraph do.
Before you begin.
Start with Make text easy to read and the C27 Academy file in Figma Design. Use one website or document with a headline and paragraph. Reuse the same sample words in every comparison.
Learn the concept.
Letters and font families
Words to know.
Typeface / font family
The overall design of a related set of letters.
Letters with shared features
Font
A particular style within the family.
A defined type style
Weight
The thickness of the letter strokes.
Compare the larger heavy title letters with lighter reading text. A style guide names the role of each style and records the font, size, weight, and spacing used in the real design.
Slide 4.
A small set of text styles
Headline
The text that introduces the message.
The main message
Body copy
The main text you read.
Text for longer reading
Serif / sans serif
Letters with small finishing strokes / letters without them.
Letters with or without serifs
The idea in practice
See a worked example.
Look at one actual letter shape.
For exampleCompare the shape of the letter “a” in two fonts.
Name the job of the headline and paragraph.
For exampleThe headline announces the topic; the paragraph explains it.
Use size, weight, and spacing for a reason.
For exampleMake the headline larger if it should be read first.
Worked observation. Start with the same words in regular and bold weights. The bold strokes in the heading are visibly thicker, so the heading may attract attention first. A serif example has small finishing strokes on letters; name one you can actually see. Check the observation against the letters, not the font name alone.
