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.

You can say this to an AI Agent

Refine the settings typography with distinct page heading, section heading, body, and warning roles. Do not make warnings too small or light or bold the entire page. Verify a clear reading order and readable critical text on desktop and mobile.

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
Page titleSection title
Keep long body text comfortable to read
Body text needs a readable size and line height for long-form reading.
Make dates, notes, and other supporting details quieter
Website redesign v2In progress
Alex Chen updated 3 days ago · visible only to you
Emphasize a small number of truly important words
This update fixed 12 issues; the payment flow changed the most, so test it carefully.

When NOT to use it

Use so many heading styles that the hierarchy disappears
Heading 1Heading 2Heading 3Heading 4Heading 5
Set body text too small or too light to read comfortably
This is an important instruction, but it uses 10px light-gray text that’s hard to read.
Bold a whole paragraph when only one point needs emphasis
When every word is bold, nothing reads as the real priority.
Use spaces and line breaks to force alignment; use Space
Name: Alex Chen
Phone: 138 0000 0000Full-width spaces break alignment when the font changes

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

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A settings page gives its heading, descriptions, and permission warning nearly the same size, while the warning is very light gray. What should change?

A. Define clear heading, body, and warning roles and keep the warning readableB. Bold every piece of text so that every paragraph becomes more prominentC. Make descriptions and warnings smaller and enlarge only the page title

ANS Original Methods

Apply this term in a real workflow

Media & Video Pipeline

Ship Talking-Head Videos in 1–2 Hours: Outline, Auto Rough-Cut, OCR Captions & Drafts

Build in public around real engineering pain points: record in one take from a lean outline, then automate VAD+ASR retake cuts, screen-OCR caption fixes, 16:9/3:4 covers, and safe draft uploads.

AIGC Visual & Video Work

Break Image, Storyboard, and Video Work into Controllable Steps

Lock moodboard, character, and aspect ratio first, then generate assets, select takes, and assemble captions step by step instead of relying on one-shot generation.