Typography

  1. Components
  2. Typography

Editorial composition

A complete example of readable hierarchy.

Workspace journal

Clear words make better experiences

Good typography helps people understand what matters and what to do next.

Build a consistent hierarchy with clear headings, useful descriptions, and readable body text. Give each idea enough space and keep supporting details close to the action they explain.

Explore the team

Reading notes

  • Use clear, descriptive headings.
  • Keep line lengths comfortable.
  • Give related content a consistent rhythm.

Heading hierarchy

Native heading levels with clear visual relationships.

Heading level 1

h1

Heading level 2

h2

Heading level 3

h3

Heading level 4

h4
Heading level 5
h5
Heading level 6
h6

Project type scale

Use the existing font-size utilities.

Thoughtful workspace designfs-28
Thoughtful workspace designfs-24
Thoughtful workspace designfs-20
Thoughtful workspace designfs-18
Thoughtful workspace designfs-16
Thoughtful workspace designfs-14
Thoughtful workspace designfs-13
Thoughtful workspace designfs-12

Weights & emphasis

Use weight, italic, and decoration utilities.

Light text

Regular text

Medium emphasis

Semibold emphasis

Bold emphasis

Italic annotation

Underlined text

Replaced content

Semantic text colors

Use color alongside a clear written meaning.

Project information

Supporting category

Changes saved successfully

Review the payment details

The upload could not be completed

A new workspace tip is available

Updated October 4, 2026

Inline meaning

HTML elements communicate purpose within a sentence.

Use strong emphasis for important information and emphasis for a shift in meaning. Highlight key details, annotate supporting information, and show removed wording alongside updated wording.

Use UX research to understand the workflow. Press Ctrl + S to save in your editor.

Quotation card

Separate a quote from its attribution.

Simple language gives good ideas room to stand out.

Liam Carter / Product team

Lists & descriptions

Choose a structure that matches the information.

Release checklist

  1. Review the research.
  2. Approve the design.
  3. Prepare the release.
Project owner
Liam Carter
Next milestone
Implementation review
Due date
October 16, 2026

Alignment & wrapping

Common text layouts for compact interfaces.

Start-aligned text for body content.

Centered text for short notices.

End-aligned text for totals and metadata.

A longer project description that is truncated when there is not enough space.

workspace/project/customer-research-and-onboarding-improvements

Code & technical text

Use monospace only where it supports understanding.

Apply fw-semibold to a heading and text-muted to supporting text. 

<h2 class="fs-16 fw-semibold">Project overview</h2>
<p class="text-muted fs-13">Supporting details.</p>

Compact metadata

Combine labels and supporting details without clutter.

PRODUCT / RESEARCH

Customer discovery summary

Findings from 12 workspace administrator interviews.

Liam CarterOct 4, 20265 min read