Text style

Utilities for common typographic treatments and sizes.

Quick reference

Class	Styles
af-text-muted	color: var(--af-color-text-muted)
af-text-mono	font-family: var(--af-font-code)
af-text-sm	font-size: var(--af-text-sm)
af-text-md	font-size: var(--af-text-md)
af-text-lg	font-size: var(--af-text-lg)
af-text-body-sm	font-size: var(--af-text-sm)
af-text-strong	font-weight: var(--af-weight-semibold)
af-title	large title style (2xl + semibold)

Examples

Text size

af-text-sm

af-text-md

af-text-lg

<div style="display:grid; gap: var(--af-space-2);">
  <p class="af-text-sm">
    af-text-sm
  </p>
  <p class="af-text-md">
    af-text-md
  </p>
  <p class="af-text-lg">
    af-text-lg
  </p>
</div>

Available classes

• af-text-muted
• af-text-mono
• af-text-sm
• af-text-md
• af-text-lg
• af-text-body-sm
• af-text-strong
• af-title

Responsive variants

All text style utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Text alignment