Typography

Font Size

Utilities for controlling the font size of an element.

Quick reference

Class	Description
text-detail	font-size: var(--w-font-size-xs) line-height: var(--w-line-height-xs)
text-caption	font-size: var(--w-font-size-s) line-height: var(--w-line-height-s)
text-body	font-size: var(--w-font-size-m) line-height: var(--w-line-height-m)
text-preamble	font-size: var(--w-font-size-ml) line-height: var(--w-line-height-ml)
text-display	font-size: var(--w-font-size-xxxl) line-height: var(--w-line-height-xxxl)
t6	font-weight: 700 font-size: var(--w-font-size-xs) line-height: var(--w-line-height-xs)
t5	font-weight: 700 font-size: var(--w-font-size-s) line-height: var(--w-line-height-s)
t4	font-weight: 700 font-size: var(--w-font-size-m) line-height: var(--w-line-height-m)
t3	font-weight: 700 font-size: var(--w-font-size-l) line-height: var(--w-line-height-l)
t2	font-weight: 700 font-size: var(--w-font-size-xl) line-height: var(--w-line-height-xl)
t1	font-weight: 700 font-size: var(--w-font-size-xxl) line-height: var(--w-line-height-xxl)
text-xs	font-size: var(--w-font-size-xs) line-height: var(--w-line-height-xs)
text-s	font-size: var(--w-font-size-s) line-height: var(--w-line-height-s)
text-m	font-size: var(--w-font-size-m) line-height: var(--w-line-height-m)
text-ml	font-size: var(--w-font-size-ml) line-height: var(--w-line-height-ml)
text-l	font-size: var(--w-font-size-l) line-height: var(--w-line-height-l)
text-xl	font-size: var(--w-font-size-xl) line-height: var(--w-line-height-xl)
text-xxl	font-size: var(--w-font-size-xxl) line-height: var(--w-line-height-xxl)
text-xxxl	font-size: var(--w-font-size-xxxl) line-height: var(--w-line-height-xxxl)

Basic usage

Setting the font size

Control the font size of an element using the text-{size} utilities. These come with built-in line-heights. Line-heights can be overridden by the .leading-{size} classes, but please only do that as a last resort since that might take them out of the brand theming patterns.

text-xs

The quick warp scientist

text-s

The quick warp scientist

text-m

The quick warp scientist

text-ml

The quick warp scientist

text-l

The quick warp scientist

text-xl

The quick warp scientist

text-xxl

The quick warp scientist

text-xxxl

The quick warp scientist

<p class="text-xs ...">The quick warp scientist ...</p>
<p class="text-s ...">The quick warp scientist ...</p>
<p class="text-m ...">The quick warp scientist ...</p>
<p class="text-ml ...">The quick warp scientist ...</p>
<p class="text-l ...">The quick warp scientist ...</p>
<p class="text-xl ...">The quick warp scientist ...</p>
<p class="text-xxl ...">The quick warp scientist ...</p>
<p class="text-xxxl ...">The quick warp scientist ...</p>

Setting the headings

Control the heading sizes using the t1 - t5 utilities. These classes aim to contain all the styling needed for each heading-level per brand.

Note

The heading tags (<h1> - <h5>) should be implemented strictly semantic in a clear tree structure. Use the t1 - t5 classes to give them the correct visual size and appearance.

Warping

The process

The quick smart warp scientist ...

The goal

The quick smart warp scientist ...

<h1 class="t3">Warping</h1>
<h2 class="t2">The process</h2>
<p>The quick smart warp scientist ...</p>
<h2 class="t2">The goal</h2>
<p>The quick smart warp scientist ...</p>

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:text-detail to apply the text-detail utility at only medium screen sizes and above.

<p class="text-body md:text-detail">
  <!-- ... -->
</p>