Typography

Styling Type

Documentation and examples for typography, headings, body text, lists, and more.

Text Alignment

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

Inline text elements

Styling for common inline HTML5 elements.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Case

Utilities for controlling the transformation of text.

Class	Properties
text-lowercase	text-transform: lowercase;
text-uppercase	text-transform: uppercase;
text-capitalize	text-transform: capitalize;

Font Weight

Utilities for controlling the font weight of an element.

Class	Properties
text-light	font-weight: 300;
text-normal	font-weight: 400;
text-semibold	font-weight: 700;
text-bold	font-weight: 900;

Underline & Strikethrough

Class	Properties
text-decoration-none	text-decoration: none;
text-linethrough	text-decoration: line-through;

Line Height

Utilities for controlling the leading (line height) of an element.

Class	Properties
leading-tight	line-height: 1.25;
leading-snug	line-height: 1.375;
leading-normal	line-height: 1.5;
leading-relaxed	line-height: 1.625;
leading-loose	line-height: 2;