Guide to Font Role Naming

How to name your typographic roles so your team speaks the same language.

Why Role Names Matter

Role names are how your team communicates about typography. A good name tells you where and how a style should be used without opening the inspector. Consistent naming also makes the Palette Extractor and compliance checking more useful — when a component is flagged as non-compliant, the recommended role name should immediately tell you what it should be.

Rule of thumb: If you can’t tell where a role belongs just from its name, rename it.

Common Naming Systems

There is no single “right” system. Pick one that fits your project and stick with it.

1. Semantic / Purpose-Based

Names describe the function of the text, not its appearance. This is the most common system and what most design tools (Figma, Material Design) use.

Role Name	Typical Use	Example
`Display`	Hero text, splash screens, marketing headers	Game title on main menu
`Header`	Section or screen titles	“SETTINGS”, “LEADERBOARD”
`Subheader`	Secondary headings within a section	“Audio Settings”, “Team Roster”
`Body`	Main readable text, descriptions, paragraphs	Item descriptions, tutorial text
`Caption`	Small supporting text, timestamps, metadata	“Last played 2 hours ago”
`Label`	Field labels, form names, short identifiers	“Username:”, “Score:”
`Button`	Interactive button text	“PLAY”, “CONFIRM”, “CANCEL”
`Overline`	Small all-caps text above a heading	“CHAPTER 3” above “The Dark Forest”
`Tooltip`	Hover/contextual help text	“Press E to interact”
`Badge`	Status indicators, tags, counters	“NEW”, “3/10”, “MVP”

Material Design scale: Display > Headline > Title > Body > Label. Each has Large / Medium / Small variants. FontOps doesn’t enforce this — use it if it fits.

2. Size-Based (T-Shirt Sizing)

Names describe relative size. Simple and unambiguous, but doesn’t communicate purpose. Works well for small teams or prototyping.

Role Name	Size Range	Typical Use
`XXL`	48–72px	Splash / hero text
`XL`	32–48px	Screen titles
`LG`	24–32px	Section headers
`MD`	16–24px	Body text, descriptions
`SM`	12–16px	Captions, labels
`XS`	8–12px	Fine print, legal, badges

3. Hierarchical (H1–H6 Style)

Borrowed from HTML/web conventions. Straightforward for developers but less intuitive for designers.

Role Name	Equivalent	Example
`H1`	Display / Page Title	Main menu title
`H2`	Section Header	Settings category
`H3`	Subsection Header	Audio > Music Volume
`Body`	Paragraph text	Descriptions
`Small`	Fine print	Copyright, version

4. Context-Specific (Screen/Feature Prefixed)

For large projects with distinct visual areas (e.g., HUD vs. menus vs. dialogue). Prefix the role name with the context.

Role Name	Where	Example
`HUD/Score`	In-game overlay	Score counter
`HUD/Timer`	In-game overlay	Countdown clock
`HUD/Ammo`	In-game overlay	Ammo count
`Menu/Title`	Menu screens	Screen name
`Menu/Body`	Menu screens	Description text
`Menu/Button`	Menu screens	Button labels
`Dialog/Speaker`	Dialogue system	Character name
`Dialog/Line`	Dialogue system	Spoken text
`Dialog/Choice`	Dialogue system	Player response options
`Scoreboard/Name`	Leaderboard	Player name column
`Scoreboard/Stat`	Leaderboard	K/D/A numbers
`Scoreboard/Header`	Leaderboard	Column headers

When to use this: When the same font size/style serves completely different purposes in different parts of your game. A “Body” in a menu and a “Body” in a HUD might look identical today but evolve differently. Separate roles let you change them independently.

Real-World Examples

Mobile Casual Game

A party game with bright, bouncy UI. One font family, multiple weights.

Role	Font	Size	Style	Used For
`Display`	Baloo 2	48px	Bold	Game title, win/lose splash
`Header`	Baloo 2	32px	Bold	Screen titles
`Body`	Baloo 2	20px	Regular	Rules text, descriptions
`Button`	Baloo 2	24px	Bold	PLAY, SETTINGS, BACK
`Caption`	Baloo 2	14px	Regular	Player count, lobby code
`Badge`	Baloo 2	12px	Bold	NEW, 1ST, MVP

Competitive Tactical Shooter

Dark UI with high information density. Two font families — sans-serif for UI, monospace for data.

Role	Font	Size	Style	Used For
`HUD/Score`	Rajdhani	28px	Bold	Kill count, round score
`HUD/Timer`	Share Tech Mono	24px	Regular	Round timer, bomb timer
`HUD/Ammo`	Share Tech Mono	20px	Regular	30/90 ammo display
`Menu/Title`	Rajdhani	36px	Bold	LOADOUT, OPERATORS
`Menu/Body`	Rajdhani	16px	Regular	Operator bios, patch notes
`Menu/Button`	Rajdhani	18px	Bold	READY, QUEUE, EXIT
`Scoreboard/Name`	Rajdhani	16px	Regular	Player names
`Scoreboard/Stat`	Share Tech Mono	14px	Regular	K/D/A columns
`Scoreboard/Header`	Rajdhani	12px	Bold	Column headers (KILLS, DEATHS)

Story-Driven RPG

Rich narrative with dialogue, inventory, and world-building lore. Three font families.

Role	Font	Size	Style	Used For
`Display`	Cinzel	56px	Bold	Chapter titles, location reveals
`Header`	Cinzel	32px	Regular	Menu headers, quest log titles
`Body`	Lora	18px	Regular	Item descriptions, lore entries
`Body Italic`	Lora	18px	Italic	Flavour text, internal thoughts
`Dialog/Speaker`	Cinzel	20px	Bold	Character name above dialogue
`Dialog/Line`	Lora	20px	Regular	Spoken dialogue text
`Dialog/Choice`	Lora	18px	Regular	Player response options
`UI/Label`	Nunito Sans	14px	Regular	Stat names: STR, DEX, INT
`UI/Value`	Nunito Sans	16px	Bold	Stat values: 42, +5, 1200 XP
`UI/Button`	Nunito Sans	16px	Bold	EQUIP, SELL, USE
`Tooltip`	Nunito Sans	13px	Regular	Hover info on items/skills
`Caption`	Nunito Sans	11px	Regular	Rarity, weight, quest markers

Minimalist Puzzle Game

Clean, simple. One font, few roles.

Role	Font	Size	Style	Used For
`Title`	Inter	36px	Light	Level name, game title
`Body`	Inter	18px	Regular	Instructions, hints
`Button`	Inter	16px	Medium	RESTART, NEXT, MENU
`Counter`	Inter	24px	Bold	Move count, timer

Best Practices

Do

Be consistent. Pick one naming system and use it everywhere. Mixing “H1” with “Display” with “Title” creates confusion.
Name for function, not appearance. “Button” is better than “Bold 16px” — if you later change the button font to 18px, the name still makes sense.
Start small. 4–6 roles covers most simple games. Add more only when you have a real need, not “just in case.”
Use prefixes for complex projects. When the same visual treatment serves different contexts (HUD vs. menu), prefixed names like HUD/Score and Menu/Score prevent role pollution.
Document your palette. Use the palette’s Description field to note who owns it and when to use it vs. another palette.

Don’t

Don’t name after the font. “Montserrat Bold 14” is a description, not a role. If you switch fonts, the name becomes a lie.
Don’t create a role for every unique size. If two components differ by 1–2px, they probably belong to the same role. Standardize on one size.
Don’t use vague names. “Text”, “Default”, “Custom” tell you nothing. Be specific.
Don’t over-engineer. A puzzle game doesn’t need 20 roles. If your palette has more roles than screens, you’ve gone too far.

Quick-Start Cheat Sheet

Not sure where to start? Use this minimal set and expand from there:

Role	What It Covers
`Header`	Screen/section titles — the biggest text on any screen
`Body`	Everything readable — descriptions, instructions, paragraphs
`Button`	All interactive text — buttons, links, tappable labels
`Caption`	Everything small — metadata, timestamps, footnotes

That’s four roles. Most small-to-medium games never need more than six. Add Display if you have hero/splash text, and Label if you have form fields or stat sheets.