Typography

You might say

All the text on this page runs together—separate the headings, body copy, and notes so the important stuff stands out.

Use text size and style to show what matters firstTypography separates headings, body text, and supporting information through size, line height, weight, and color. Define a small set of reusable text roles, then adapt them for different screens so readers can find the main point and follow the content.

Page Title · 22px bold

Section Title · 16px

Body · 14px: detail text with 1.6+ line height that stays easy to read.

Caption · 12px: timestamps, notes, secondary info.

Typography≠Heading

Typography is the full system of text roles and styles, including headings, body copy, and supporting text. A heading is only one text role that marks page or section hierarchy.

When to use it

Create clear levels for page, section, and item headings
Keep long body text comfortable to read
Make dates, notes, and other supporting details quieter
Emphasize a small number of truly important words

When NOT to use it

Use so many heading styles that the hierarchy disappears
Set body text too small or too light to read comfortably
Bold a whole paragraph when only one point needs emphasis
Use spaces and line breaks to force alignment; use Space

Anatomy

2026 Product Plan Body text: explain the background, goals, and next steps clearly. Supporting text: Alex Chen Updated 3 days ago

Largest and heaviest text — use sparingly on each page

Carries the main content; around 14px with a line height of 1.6 or more

Small gray text for timestamps, notes, and other secondary info

Variants

Page Title

Data Dashboard

One per page — tells users where they are

Section Title

Basic Info

Names each content block for easy scanning

Body

This is a paragraph of body text.

For every paragraph that carries the main reading

Caption

Updated 2026-07-20

Timestamps, notes, secondary info — kept quiet

Typical use cases

Article page

2026 Product Roadmap: Do Less, Do It Well

Alex · Updated 3 days ago · 5 min read

This year we do three things: lift conversion on the core flow, make onboarding self-explanatory, and finish off the lingering performance issues.

Onboarding is the Q1 focus — design and engineering in parallel, with a clickable prototype by end of month.

Form labels and help

Create a new project

Projects group files and members; you can rename one anytime

Project name

Description

Card hierarchy

Dashboard Rebuild In progress

Merge 12 scattered reports into 3 core dashboards with custom filters and one-click export.

Owned by Alex · Due Jul 30

Data dashboard

Visits today

12,847

↑ 8.2% vs yesterday

Sign-ups

3,204

↑ 3.1% vs yesterday

Paid conversion

4.6%

↓ 0.4% vs yesterday