Browse Learn

Typography

Give every screen a clear hierarchy. Use a consistent type scale, comfortable line lengths, and enough space for the content to breathe.

Use fewer sizes, with purpose

Small label / 11px

Make something meaningful.

A heading that brings structure.

Body copy should be easy to read. Keep line lengths comfortable and give each paragraph enough room to breathe.

Supporting details should remain legible in both modes.

<p class="eyebrow">Small label</p>
<h1>Page title</h1>
<h2>Section title</h2>
<p>Readable body copy.</p>
<small class="muted">Supporting detail.</small>

Native fonts, immediate text

The system font stack uses fonts already on the device. There are no remote font requests or font downloads. Exact letterforms vary across platforms.

Writing with intent

Use one descriptive first-level heading per page.
Keep actions short and specific: “Create Project,” “Save Changes,” or “Get CSS.”
Use title case for navigation and buttons. Keep form labels and messages in sentence case, and explain what a control will do.
Use semantic heading levels; visual size does not determine document structure.