Typography

Overview

Typography utilities for controlling font size, weight, line height, and text alignment.

Base font: $font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Control the font size of an element using the text-* classes.

Variables: $font-sizes

.text-xs (0.75rem)

.text-sm (0.875rem)

.text-base (1rem)

.text-lg (1.125rem)

.text-xl (1.25rem)

.text-2xl (1.5rem)

.text-3xl (1.875rem)

.text-4xl (2.25rem)

Control the font weight of an element using the font-* classes.

.font-light (300)

.font-normal (400)

.font-semibold (600)

.font-bold (700)

Control the line height of an element using the lh-* classes.

.lh-1 (1)
This text has a line height of 1. Notice how the lines are very close together.

.lh-sm (1.25)
This text has a line height of 1.25. It provides a bit more spacing between lines.

.lh-base (1.5)
This text has a line height of 1.5. This is typically the default line height for body text.

.lh-lg (2)
This text has a line height of 2. Notice the generous spacing between lines.

Control the text alignment using the text-* classes.

.text-left - This text is left aligned.

.text-center - This text is centered.

.text-right - This text is right aligned.

Control the text casing of an element using the text transform classes.

.uppercase - this text is uppercase

.lowercase - THIS TEXT IS LOWERCASE

.capitalize - this text is capitalized