In a design system, what is a semantic text style such as heading, body or caption, and why use named styles over raw sizes?
answer
- properties that always travel together
- a role, not a number
- one change, every screen
- shared vocabulary for design and code
- the scale supplies sizes, styles pick combinations
basics
~20 sA semantic text style is a named typographic role, such as body or caption, that bundles size, weight, line height and letter spacing. Teams choose the role, not the numbers, so text stays consistent and one edit updates every screen.
solid answer
~50 sA **text style** packages the typographic properties that always travel together — font family, size, weight, line height, letter spacing — under a name that describes its **role**: display, heading, title, body, label, caption. In a ride-hailing driver app, the fare on an incoming ride request uses a display style, the pickup address uses body, the accept button's text uses label, and the rider's rating line uses caption. Choosing a role instead of raw values means two teams building similar screens land on the same result, hierarchy follows a system rather than taste, and design files and code share one vocabulary. It also makes change cheap: adjusting the body style's line height updates every screen that uses body. The raw sizes come from the type scale underneath; the styles are the small, named set of combinations the product actually uses.
go deeper
Recall what a text style bundles, the common roles from display to caption, and why you pick a role rather than typing sizes.
Explain why role names outlast appearance names, why color is often kept out of styles, and how styles sit on top of the type scale.
Show you can spot screens bypassing the styles and trace the inconsistency and change cost that creates across platforms.
Discuss how named roles let many teams stay consistent without coordination, and where a system should allow local typographic freedom.
## From values to roles A **type scale** gives a product its list of allowed font sizes. That alone does not tell anyone how to set a pickup address or a fare. A **text style** (also called a type style or typographic role) answers that by bundling the properties that are always chosen together: - **font family** — which typeface; - **size** — one step from the type scale; - **weight** — regular, medium, bold and so on; - **line height** — the vertical space each line occupies; - **letter spacing** — often tightened for large text and loosened for small uppercase labels. The style gets a **semantic name** — a name for what the text is for, not what it looks like. Designers apply the style in design files, engineers reference the same named style in code, and native mobile and web implementations each map it to their own text-styling mechanism. ## A typical role set | Role | Purpose | Typical traits | Driver-app example | |---|---|---|---| | **Display** | The one number or phrase that must be seen first | Largest size, often bold, tight letter spacing | Fare estimate on a ride request | | **Heading** | Titles a screen or a section | Large, strong weight | Today's earnings screen title | | **Title** | Names a card, list item or dialog | Medium size, medium or bold weight | Rider name on a trip card | | **Body** | Running text and most content | Base size, regular weight, comfortable line height | Pickup and drop-off addresses | | **Label** | Text on controls and form fields | Small to base size, medium weight | Accept and decline buttons | | **Caption** | Secondary metadata | Smallest size, regular weight | Rider rating, distance to pickup | Many systems split roles into two or three sizes each (large, medium, small), which is why real sets run to a dozen or so styles rather than six. The exact names vary by system; what matters is that each name describes a role. ## Why roles beat raw values 1. **Consistency without coordination.** Two teams building a trip summary and an earnings summary pick body and caption, and their screens match without a meeting. 2. **Deliberate hierarchy.** Because each role has a fixed relationship to the others, hierarchy comes from the system rather than from each designer's eye on the day. 3. **Cheap, safe change.** Raising the caption style from regular to medium weight after drivers report it is hard to read in sunlight is one edit that reaches every screen using caption, on every platform. 4. **A shared vocabulary.** A review comment that says this should be label, not body is precise for designers and engineers alike. 5. **Auditability.** It is easy to find every use of a role; it is nearly impossible to find every place someone typed a particular size and weight. ## What a style includes, and what it often leaves out Styles always cover the typographic properties above. **Color** is often kept out, so one caption style can appear on a light card, on a dark map overlay or in an emphasized state without a new style for each; color then comes from separate color roles. Some systems do include color in styles for simplicity. Both are defensible; the cost of including it is a style count that multiplies with every color. ## Naming by role, not appearance A style called caption survives a redesign; a style called gray-12-regular becomes a lie the day caption moves to 13 medium. Role names also stop people choosing a style because it happens to have the right look for an unrelated job — which is how a caption style ends up on a button and later breaks when caption changes. ## How it fits with the rest of the system - The **type scale** below supplies the sizes each style may use. - The **tokens** layer publishes each style, often as a composite token, so every platform receives the same combination. - **Components** reference styles by role: a button uses label, a list item uses title and body. The result is that hierarchy, consistency and change all operate on a short list of named roles rather than on thousands of scattered numbers.
- Why do many systems keep color out of text styles?So one style can appear on different surfaces and in different emphasis states without a new style per color. Color then comes from separate color roles. Including color is simpler to apply, but the number of styles multiplies with every color, which is how style sets sprawl.
- What should happen when a screen needs text that no style fits?First check whether an existing role fits after all; most one-off needs are an existing role with a different color or emphasis. If a recurring role genuinely has no style, propose adding one to the system rather than hard-coding values on that screen.
- How does a text style reach native mobile and web code?The system publishes each style once, commonly as a composite token holding family, size, weight, line height and letter spacing, and each platform's build maps it to its own text-styling mechanism. Every platform then receives the same combination under the same role name.
saying these in an interview costs you the question
- Text styles are just another name for the list of font sizes.
- Naming styles by appearance, such as gray-12-regular, is clearer than naming them by role.
- Any style with the right look can be reused for an unrelated role.
- Applying the body style guarantees accessibility conformance for that text.
- Each screen should define its own styles so it can be tuned independently.