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.
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.
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:
Instances where to use sentence case:
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.
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.
DS3.0 ships with Geist and Geist Mono. Download them from Google Fonts for local design tools and offline use.
Geist
Primary sans-serif for Display, Heading, Label, Body, and Supportive styles.
Geist Mono
Monospace face for Numeric styles and code-adjacent content.
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