Typography

A guide to the typography system and how to apply it in your project.

Overview

Architectural

Future-proof infrastructure

From typography to spacing, every detail is intentionally designed to provide visual harmony, adaptability, and intuitive customization across your entire site.

…<div class="uppercase font:semibold text:2xs tracking:widest …">Architectural</div><div class="font:medium text:md …">Future-proof infrastructure</div><div class="text:sm …">    From typography to spacing, every...</div>…

The typography system in Master CSS provides a cohesive and scalable approach, text:<size>, to setting text styles. It combines font size, line height, and letter spacing into unified tokens to ensure consistency and visual rhythm across interfaces—from fine print to large headlines.

Namespaces for typography

The typography system is built on a set of variables that are organized into namespaces. This allows for easy customization and consistent application across your design.

• variables.font-size for font sizes, text sizes
• variables.font-family for font families
• variables.font-weight for font weights
• variables.line-height for line height
• variables.letter-spacing for letter spacing

All-in-one text scale

At its core, the system is powered by a semantic type scale (text:3xs to text:10xl) and corresponding font utilities (font:*, leading:*, tracking:*) defined through design tokens. These values are carefully calibrated—not just mathematically scaled—to produce an optimal reading experience.

Rather than manually composing multiple properties, you can use text:<size> to apply all three attributes—font-size, line-height, and letter-spacing—with a single class, tuned to the specific needs of each text scale.

• text:3xs ~ text:xs — For fine print, annotations, captions, or table labels
• text:sm ~ text:lg — Standard text sizes for body copy, paragraphs, and buttons
• text:xl ~ text:3xl — Ideal for subheadings, lead paragraphs, or callouts
• text:4xl ~ text:10xl — Reserved for large headings, page titles, and hero sections

See some classic examples in the following sections. All examples use text:<size>, which automatically applies the ideal font size, line height, and letter spacing in a single utility.

Body text

Use tokens like text:sm, text:md, and text:lg to style body text, descriptions, and paragraphs.

<p class="text:sm">Design is not just about aesthetics—it’s...</p><p class="text:md">Design is not just about aesthetics—it’s...</p><p class="text:lg">Design is not just about aesthetics—it’s...</p>

Headings

Use tokens like text:lg, text:xl, and text:2xl to style article headings.

<h2 class="text:2xl">Design is not just about aesthetics—it’s...</h2><h3 class="text:xl">Design is not just about aesthetics—it’s...</h3><h4 class="text:lg">Design is not just about aesthetics—it’s...</h4>

Page titles

Use tokens like text:3xl and text:4xl to style page titles and hero sections.

<h1 class="text:4xl">Designing for clarity and consistency...</h1><h1 class="text:3xl">Designing for clarity and consistency...</h1>

Without vs With text:<size>

Manually configuring typography often requires juggling multiple CSS properties like font-size, line-height, and letter-spacing. This can quickly become inconsistent, especially when reused across different components or pages.

Let’s compare a manual approach with the simplified text:<size> utility:

Manually add the most appropriate style for the title each time

<h1 class="font:3xl tracking:-0.048rem leading:2.4rem">...</h1>

You may also find yourself tweaking these values individually for each heading or paragraph, which increases cognitive load and the risk of visual inconsistency.

Using text:3xl utility token

<h1 class="text:3xl">...</h1>

The text:lg token applies a finely tuned combination of:

@layer base, theme, preset, components, general;@layer general {    .text\:3xl {        font-size: 2rem;        line-height: max(1.8em - max(0rem, 2rem - 1rem) * 1.12, 2rem);        letter-spacing: clamp(-0.072em, calc((2rem - 1rem) * -0.048), 0em)    }}

All values are calibrated to provide optimal readability and consistent rhythm across the type scale. No manual calculation, no guesswork—just a reliable, semantic shortcut.

Why this matters? Using text:<size> ensures:

• Consistency — every instance of text:lg looks exactly the same
• Maintainability — no need to audit multiple values across stylesheets
• Scalability — easier to theme or adjust from a central design token

Whenever possible, prefer text:<size> over ad hoc styles. It’s faster, safer, and makes your typography systematically predictable.

Type scale

The font scale ranges from font:3xs to font:10xl, with each size intentionally designed to deliver visual harmony and clear hierarchy across a variety of use cases.

Use font size tokens like font:xs, font:sm, and font:md to set the font size of an element.

<div class="font:xs">Sphinx of black quartz, judge my vow.</div><div class="font:sm">Sphinx of black quartz, judge my vow.</div><div class="font:md">Sphinx of black quartz, judge my vow.</div><div class="font:lg">Sphinx of black quartz, judge my vow.</div><div class="font:xl">Sphinx of black quartz, judge my vow.</div><div class="font:2xl">Sphinx of black quartz, judge my vow.</div>

Font families

Use tokens like font:sans, font:serif and font:mono to set font families for elements.

<p class="font:sans">Heavy boxes perform quick waltzes and jigs.</p><p class="font:serif">Heavy boxes perform quick waltzes and jigs.</p><p class="font:mono">Heavy boxes perform quick waltzes and jigs.</p>

See the font family reference for more details on how to add custom fonts.

Font weights

Our typography system defines a semantic range of font weight tokens, from font:thin to font:heavy, providing clear naming for visual emphasis and typographic hierarchy.

• font:thin extra-light strokes for subtle or elegant UI elements
• font:light light weight, ideal for large headings or minimalist design
• font:regular default weight for body text and general readability
• font:medium slightly bolder for subheadings or emphasis
• font:bold strong emphasis, often used in call-to-action or UI labels
• font:heavy maximum weight for impact, branding, or visual anchors

Use tokens like font:thin, font:regular, and font:bold to set the font weight of an element.

<div class="font:thin">Elegant forms shape visual harmony.</div><div class="font:extralight">Elegant forms shape visual harmony.</div><div class="font:regular">Elegant forms shape visual harmony.</div><div class="font:medium">Elegant forms shape visual harmony.</div><div class="font:semibold">Elegant forms shape visual harmony.</div><div class="font:bold">Elegant forms shape visual harmony.</div><div class="font:extrabold">Elegant forms shape visual harmony.</div><div class="font:heavy">Elegant forms shape visual harmony.</div>

Line height

Use the predefined line height tokens like leading:xs, leading:sm, and leading:lg to set the line height of an element.

<div class="leading:xs">Design is not just about aesthetics—it’s...</div><div class="leading:sm">Design is not just about aesthetics—it’s...</div><div class="leading:md">Design is not just about aesthetics—it’s...</div><div class="leading:lg">Design is not just about aesthetics—it’s...</div><div class="leading:xl">Design is not just about aesthetics—it’s...</div>

Letter spacing

Use tokens like tracking:tight and tracking:wider to set letter spacing.

<div class="tracking:tightest">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tighter">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tight">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:normal">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wide">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wider">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:widest">LETTERS ALIGN WITH PERFECT RHYTHM</div>