Typescale / Typography

Use typography to present your design and content as clearly and efficiently as possible.

Default

The examples use heading utility classes so the documentation page keeps a single, consistent heading hierarchy. Use the matching semantic heading element in application content.

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

paragraph text lorem ipsum

small text bold text some link

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
<p>paragraph text lorem ipsum</p>
<small>small text</small>
<b>bold text</b>
<a href="https://css-utils.oardi.com">some link</a>

Links use the semantic action foregrounds by default. Override the global --action-color* tokens for an application-wide palette or the link tokens on an ancestor for a local treatment.

--link-text-color: var(--action-color);
--link-hover-color: var(--action-color-hover);
--link-active-color: var(--action-color-active);
--link-focus-outline-width: var(--focus-outline-width);
--link-focus-outline-style: var(--focus-outline-style);
--link-focus-outline-color: var(--focus-outline-color);

Text Scales

paragraph with .text-xs

paragraph with .text-sm

paragraph with .text-md

paragraph with .text-lg

paragraph with .text-xl

paragraph with .text-xxl

paragraph with .text-xxxl

<p class="text-xs">paragraph with .text-xs</p>
<p class="text-sm">paragraph with .text-sm</p>
<p class="text-md">paragraph with .text-md</p>
<p class="text-lg">paragraph with .text-lg</p>
<p class="text-xl">paragraph with .text-xl</p>
<p class="text-xxl">paragraph with .text-xxl</p>
<p class="text-xxxl">paragraph with .text-xxxl</p>

Line Height

Use line-height utilities to adjust the vertical spacing within text. Each utility uses its corresponding --line-height-* design token.

Text with .lh-xs uses a line height of 1.
The lines sit tightly together.

Text with .lh-sm uses a line height of 1.125.
The lines have compact spacing.

Text with .lh-md uses a line height of 1.25.
The lines remain moderately compact.

Text with .lh-lg uses a line height of 1.5.
The lines have balanced spacing.

Text with .lh-xl uses a line height of 1.75.
The lines have relaxed spacing.

Text with .lh-xxl uses a line height of 2.
The lines have generous spacing.

Text with .lh-xxxl uses a line height of 2.5.
The lines have the widest spacing.

<p class="lh-xs">Line height 1</p>
<p class="lh-sm">Line height 1.125</p>
<p class="lh-md">Line height 1.25</p>
<p class="lh-lg">Line height 1.5</p>
<p class="lh-xl">Line height 1.75</p>
<p class="lh-xxl">Line height 2</p>
<p class="lh-xxxl">Line height 2.5</p>

Text Transform

Use .text-uppercase to display text in uppercase without changing the text content.

Uppercase text

<p class="text-uppercase">Uppercase text</p>

Letter Spacing

Use letter-spacing utilities to increase the horizontal space between characters from 0px to 5px.

Class	Letter spacing
`.letter-space-0`	`0px`
`.letter-space-1`	`1px`
`.letter-space-2`	`2px`
`.letter-space-3`	`3px`
`.letter-space-4`	`4px`
`.letter-space-5`	`5px`

Text with .letter-space-0

Text with .letter-space-1

Text with .letter-space-2

Text with .letter-space-3

Text with .letter-space-4

Text with .letter-space-5

<p class="text-uppercase letter-space-1">Uppercase text with 1px letter spacing</p>

Text Alignment

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more

Start aligned text.

Center aligned text.

End aligned text.

<p class="text-start">Start aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">End aligned text.</p>

Text Wrapping

Use overflow-wrap utilities to control how otherwise unbreakable text, such as long URLs, behaves when it reaches the edge of its container.

Class	Behavior
`.overflow-wrap-normal`	Keeps the browser's default wrapping behavior.
`.overflow-wrap-break-word`	Breaks an unbreakable string when it would otherwise overflow.
`.overflow-wrap-anywhere`	Allows a break at any point to prevent overflow.

https://example.com/a-very-long-path-without-any-natural-wrap-opportunities-that-stays-inside-its-container

<p class="overflow-wrap-anywhere">A-very-long-unbreakable-string</p>

Flex and grid items use an intrinsic minimum width by default. Add .min-w-0 to an item that needs to shrink so its overflow-wrap utility can take effect inside the available space.

<div class="d-flex">
	<div class="min-w-0 overflow-wrap-anywhere">A-very-long-unbreakable-string</div>
</div>