Typography
Type scale classes for headings, body text, and helper styles.
The quick brown fox
iOS
The quick brown fox
Android
The quick brown fox
Web
tsx
Default
Display
H1
H2
H3
H4
H5
Lead
Body
Small
Tiny
Muted
Caption
Code
Mono
Semibold
Primary
Success
Destructive
Underline
Tight leading
Tabular
Props
Do & Don’t
display
Don’t
Two display-size lines in one view fight for attention and leave no clear focal point.
Do
Welcome
Sign in to pick up where you left off.
Use display once per hero, then drop to a muted line for the supporting copy.
h1
Don’t
Two h1 titles on a page break the document outline and confuse assistive tech.
Do
Billing
Invoices
Give each page a single h1, then step down to h2 for the sections beneath it.
h2
Don’t
Jumping from h1 straight to h4 skips a level and flattens the visible hierarchy.
Do
Settings
Profile
Follow an h1 with h2 for its top-level sections; don't skip the scale.
h3
Don’t
Body copy set in a heading style is hard to read in bulk and flattens the hierarchy.
Do
About Canvas
Canvas is a universal React Native UI kit for building consistent product interfaces.
Reserve heading styles for titles; set running text in a small body utility.
h4
Don’t
h4 is a minor heading, not a place for full sentences; long text at this weight reads as a wall.
Do
Notifications
Choose how and when we reach you.
Keep h4 to a short label and carry the explanation in a small supporting line.
h5
Don’t
Setting the value in h5 too makes the label and its data indistinguishable.
Do
Members
Aisha, Bao, Cleo, and 9 others have access.
Use h5 only for the label; render the value in body so the pair stays scannable.
body
Don’t
All-caps emphasis inside body copy shouts and undercuts the relaxed reading rhythm.
Do
Runnpm install, then restart the dev server before you continue.
Keep body copy in sentence case and let inline code carry the technical emphasis.
small
Don’t
small is muted-foreground; on a colored button it loses contrast and looks disabled.
Do
Save changes
Last saved 2 minutes ago.
Use small for secondary captions on a plain surface, not for the primary label.
tiny
Don’t
tiny is for metadata, not legal prose; long copy at 11px strains the eye.
Do
Deploy succeeded
3m ago
Reserve tiny for short metadata like timestamps and counts beside the main text.
muted
Don’t
A primary, clickable action in muted-foreground reads as disabled and is easy to miss.
Do
Payment due May 31.View invoices
Keep muted for de-emphasized context; give the actual action full foreground or primary color.
caption
Don’t
Uppercase, letter-spaced caption text is illegible for anything longer than a label.
Do
Billing
Your subscription renews automatically each month.
Use caption as a short eyebrow label above a section, then explain in body.
code
Don’t
The inline code utility has tight padding and no scroll; multi-line blocks overflow and clip.
Do
Create a branch withgit checkout -b featurebefore committing.
Use code for inline tokens inside a sentence; reach for the code block component for multi-line snippets.
mono
Don’t
Mono spacing makes prose sentences sparse and slow to read; it is meant for fixed-width data.
Do
Request ID
req_8f2c10ab
Use mono for identifiers and hashes, where every character must line up; set figures in a column or a changing value in tabular instead.
tabular
Don’t
Tabular figures in running prose space the digits out of the sentence's rhythm; prose keeps the face's own figures.
Do
Uptime
99.982%
Latency
118 ms
Set figures read down a column or updated in place in tabular, so every digit takes the same width and the column lines up.
Inline links (href)
Inline text that NAVIGATES should be a real link, not pressable text that sets location: pass href and the web render becomes a genuine browser link (middle-click, new tab, crawlers, and assistive tech all treat it as one). Native platforms ignore href, so pair it with an onPress that runs the same navigation through your router; underline supplies the conventional link look, and hrefAttrs forwards target / rel / download on the web.
Read the Canvas docs for the full component list.
tsx