Text

Text utilities define the foundation of readable interface typography. FrontAlign includes paragraph defaults, display text sizes, muted text, drop caps, and responsive text scale utilities for content-heavy pages, landing pages, dashboards, cards, and editorial layouts.

This page focuses on text sizing and content presentation. For alignment, decoration, wrapping, truncation, and text transforms, see the Text Formatting documentation.

All text utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	Effect	Common use
Small text	`text-tiny`, `text-small`	`font-size: 0.75rem – 0.875rem`	Labels, captions, metadata, helper text.
Body text	`text-base`, `text-large`	`font-size: 1rem – 1.125rem`	Body content, lead paragraphs, descriptions.
Display text	`text-2xlarge`, `text-3xlarge`, `text-4xlarge`, `text-5xlarge`	`font-size: clamp(...)`	Hero headings, section titles, marketing copy.
Muted text	`text-muted`	`color: var(--text-muted)`	Secondary content, timestamps, helper text.
Drop cap	`dropcap`	`::first-letter — float, font-size, line-height`	Editorial intros, blog articles, magazine layouts.

Usage

Paragraphs

FrontAlign normalizes paragraph spacing for consistent vertical rhythm.

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

<p>
  FrontAlign provides a clean typography foundation for modern web interfaces.
</p>

FrontAlign provides a clean typography foundation for modern web interfaces.

Small text

Use small text for captions, metadata, labels, and helper content.

<p className="text-small">
  Last updated 2 minutes ago.
</p>

<span className="text-tiny">
  BETA
</span>

Last updated 2 minutes ago.

BETA

Body text

Use text-base for normal interface and content typography.

<p className="text-base">
  FrontAlign gives your project a consistent typography foundation.
</p>

FrontAlign gives your project a consistent typography foundation.

Lead text

Use text-large for intro paragraphs and supporting marketing copy.

<p className="text-large">
  A next-generation UI engine combining utility-first flexibility, components, runtime behavior, and semantic tokens.
</p>

A next-generation UI engine combining utility-first flexibility, components, runtime behavior, and semantic tokens.

Display text

Display text utilities use fluid responsive sizing with clamp(). Apply them to heading elements for marketing sections and hero content.

<h1 className="text-5xlarge">
  Build modern interfaces without framework chaos.
</h1>

<h2 className="text-4xlarge">
  One engine. Every interface.
</h2>

<p className="text-3xlarge">
  Production-ready utilities and components.
</p>

Build modern interfaces without framework chaos.

One engine. Every interface.

Production-ready utilities and components.

Muted text

Use text-muted for secondary information that supports the main content without competing with it.

<p className="text-muted">
  This information is helpful, but not the primary focus.
</p>

This information is helpful, but not the primary focus.

Drop cap

Drop caps create an editorial first-letter effect. Use sparingly for blog intros, magazine-style layouts, and featured articles.

<p className="dropcap">
  FrontAlign is designed to help developers build modern interfaces with less friction and more consistency.
</p>

FrontAlign is designed to help developers build modern interfaces with less friction and more consistency.

Text size scale

Class	Size	Recommended use
`text-tiny`	`0.75rem`	Metadata, helper labels, compact UI.
`text-small`	`0.875rem`	Secondary text, form hints, captions.
`text-base`	`1rem`	Default body text.
`text-large`	`1.125rem`	Lead text, descriptions, intro paragraphs.
`text-2xlarge`	`clamp(1.5rem, 3vw, 1.875rem)`	Small display headings.
`text-3xlarge`	`clamp(1.875rem, 4vw, 2.25rem)`	Section display text.
`text-4xlarge`	`clamp(2.25rem, 5vw, 3rem)`	Large marketing text.
`text-5xlarge`	`clamp(2.25rem, 6vw, 3.75rem)`	Hero display text.

Real-world examples

Hero section

<section>
  <h1 className="text-5xlarge">
    Build with utilities. Ship with components.
  </h1>

  <p className="text-large text-muted">
    Power everything with one runtime engine.
  </p>
</section>

Build with utilities. Ship with components.

Power everything with one runtime engine.

Card

<div className="border rounded-4 shadow">
  <h3 className="text-2xlarge">
    Runtime Engine
  </h3>

  <p className="text-base">
    Add behavior only when your interface needs it.
  </p>

  <p className="text-small text-muted">
    Works across CDN, NPM, React, and any stack.
  </p>
</div>

Runtime Engine

Add behavior only when your interface needs it.

Works across CDN, NPM, React, and any stack.

Dashboard stat

<div className="border rounded-4 shadow">
  <span className="text-small text-muted">
    Monthly Revenue
  </span>

  <h2 className="text-4xlarge">
    $24,800
  </h2>

  <p className="text-base">
    Revenue increased compared to the previous month.
  </p>
</div>

Monthly Revenue

$24,800

Revenue increased compared to the previous month.

Article layout

<article>
  <h1 className="text-5xlarge">
    Designing Better Interface Systems
  </h1>

  <p className="text-large">
    A good interface system improves consistency, speed, and developer confidence.
  </p>

  <p className="dropcap">
    FrontAlign provides the structure needed to build scalable UI without unnecessary framework complexity.
  </p>
</article>

Designing Better Interface Systems

A good interface system improves consistency, speed, and developer confidence.

FrontAlign provides the structure needed to build scalable UI without unnecessary framework complexity.

Choosing the right utility

Use case	Recommended utility
Helper labels	`text-tiny`
Captions and metadata	`text-small`
Body text	`text-base`
Lead paragraphs	`text-large`
Section display text	`text-3xlarge` or `text-4xlarge`
Hero text	`text-5xlarge`
Secondary content	`text-muted`
Editorial intros	`dropcap`

Usage notes

Use text-base for most body content.
Use text-small and text-tiny for secondary UI text, form hints, and compact labels.
Use text-large for lead paragraphs and intro copy.
Use display text utilities (text-2xlarge through text-5xlarge) for marketing sections and hero content — they scale fluidly with clamp().
Use text-muted for supporting information, timestamps, and descriptions — not for primary content.
Use dropcap sparingly; it works best as a single editorial accent on a page.
Keep heading semantics (h1–h6) separate from visual text size when accessibility matters — a <p className="text-5xlarge"> and an <h1 className="text-5xlarge"> look the same but carry different semantic weight.