search⌘K

Typography

How do we use type in DS3.0

In DS3.0, we’ve set up a typography system that focuses on readability and clarity when presented with UI content. Additionally, we have some support for marketing copy built in. Below you can read general guidelines around copy in the Infinity 2.0.

General content guidelines and best practices

General application of styles

DS3.0 uses a purpose-driven typography system so intent is built directly into how styles are named: use Display for landmark or anchoring titles, use Heading for page and content headings, Label for labels and smaller titling, Body for body content, and Numeric for any numeric content. Choose the style that matches the content’s purpose. Do not force a Body style to do a Title’s job or a Title style to carry paragraph text. When copy mixes words and numerals, default to Number styles only when more than 75% of the content is numeric. Otherwise, keep it in Body.

Case rules

How to apply letter casing depends on the content you’re building. In DS3.0, the preference is to use sentence case to retain a smooth visual reading experience. That being said, some cases do benefit from title case, and we will use them accordingly.

Instances where to use title case:

  • UI labels
    • In badges, field titles, chips, buttons, etc.
  • Page titles

Instances where to use sentence case:

  • Paragraph headings
  • General copy
  • Placeholder labels
    • In text fields, text areas, search bars, etc.
  • When UI labels exceed 5 words in length
    • This avoids the constant up/down the eye would need to follow on longer labels

Terminology, acronyms & other jargon

Optimal user experiences are highly impacted by how much work someone’s brain must do to understand what they are reading. In Infinity 2.0 all copy writing should be clear, concise, and approachable. Avoid jargon that could confuse or slow readers, and choose plain language whenever possible. Users should understand the message quickly without extra interpretation.

When handling acronyms, immediate use adds complexity and ambiguity. Use them only when they are clearly explained elsewhere on the same page and when they provide real value. If in doubt, spell it out.

Industry jargon is more nuanced and thus should be used carefully. Use industry terms only when the audience is limited to that industry and the terms are widely recognized. This ensures precision without alienating people outside the field. Clarity should always come first. In fields where use of jargon is standard, such as medicine or technology, use your judgment. Include specialized terms only when they are essential for accuracy.

For long form content

Apply the correct Label and Body styles consistently to establish structure and rhythm. Keep sentences focused, paragraphs short, and use headings to break up content. This makes information easier to digest.

AI-generated text should not be relied upon, and should only ever be used in a drafting environment, not a final product. If you do choose to use AI-generated text, be sure to edit critically to remove redundancy, improve clarity, and match the voice to other content.

Generally speaking and wherever feasible, pay attention to common typography issues such as rivers, valleys, widows, and orphans, and fix them to maintain a polished reading experience.

Download fonts

DS3.0 ships with Geist and Geist Mono. Download them from Google Fonts for local design tools and offline use.

Type scale

Live samples of each typography token in the system.

display — The quick brown fox

Geist · 48px

supportive — The quick brown fox

Geist · 12px

heading-xl — The quick brown fox

Geist · 36px

heading-l — The quick brown fox

Geist · 28px

heading-m — The quick brown fox

Geist · 22px

heading-s — The quick brown fox

Geist · 18px

label-l — The quick brown fox

Geist · 17px

label-m — The quick brown fox

Geist · 15px

label-s — The quick brown fox

Geist · 13px

label-xs — The quick brown fox

Geist · 11px

body-l — The quick brown fox

Geist · 17px

body-m — The quick brown fox

Geist · 15px

body-s — The quick brown fox

Geist · 13px

numeric-lg — The quick brown fox

Geist Mono · 48px

numeric-md — The quick brown fox

Geist Mono · 32px

numeric-sm — The quick brown fox

Geist Mono · 20px

numeric-xs — The quick brown fox

Geist Mono · 14px

numeric-xxs — The quick brown fox

Geist Mono · 11px