Font and Text

Typography utilities are a core part of AliasCSS because text styling appears in almost every UI. AliasCSS covers font family, size, weight, style, alignment, decoration, wrapping, transformation, and text shadow in a syntax that stays close to native CSS concepts [web:19][web:157].

Font and text utilities

AliasCSS supports both semantic property names and shorthand forms for many text-related styles.

Examples

The CSS font-family property should generally include fallback fonts, and multi-word family names should be quoted, which matches the utility patterns shown above [web:166].

Font families

Font family utilities are especially useful because they let you express fallback stacks directly in class names.

Examples such as ff-Inter__Segoe_UI__Arial__sans-serif or ff-Georgia__Times_New_Roman__serif make it possible to define a primary font, then list progressively safer fallbacks in the same utility string. This mirrors how CSS expects font stacks to be written, with the preferred family first and a generic family at the end [web:166][web:157].

Font size, weight, and style

AliasCSS covers the most common typography controls:

• font-size for type scale decisions.
• font-weight for emphasis and hierarchy.
• font-style for italic, oblique, or normal rendering.

These are some of the most frequently used text controls in CSS, and numeric weight values such as 600, 700, and 800 are standard for fine-grained emphasis [web:157][web:160].

Alignment, decoration, and transform

Text alignment and text decoration utilities are useful for headings, links, labels, buttons, and structured content. AliasCSS also includes text transformation utilities for uppercase, lowercase, and capitalized text.

These patterns help keep typographic decisions visible in markup, especially in component-driven interfaces where small text changes often matter as much as layout changes [web:19][web:157].

Text wrapping

AliasCSS exposes text-wrap values directly, including modern options like balance and pretty. MDN describes text-wrap as the shorthand that controls how text inside an element is wrapped, while the related text-wrap-mode property controls whether text should wrap at all [web:163][web:161].

Why this matters

Modern text wrapping values are especially useful for:

• Balancing headings across multiple lines.
• Improving paragraph rag in compact layouts.
• Preventing awkward wrapping in cards, callouts, and dashboards.

Text shadow

AliasCSS also includes text-shadow utilities for glow, depth, contrast, and layered text effects. MDN describes text-shadow as a property that adds shadows to text and accepts a comma-separated list of shadows [web:165].

Examples

Usage

<h1
  class="p-32px br-8px txs-1px-1px-2px--black/7 d-f w-100px mh-64px"
>
  Hello, World
</h1>

Text shadows can be subtle or decorative, but in most modern UI they work best when used lightly for hero text, image overlays, or contrast enhancement rather than on every heading [web:165].

CSS variables for complex text values

When font stacks or text shadows become too complex, CSS variables are the best escape hatch.

<button
  class="display-inline-flex b-1px-s-primary600 txs--text-shadow-sm"
  style='
    --text-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.2), 0 1px 2px rgb(24 0 0 / 0.1)
  '
>
  Hello, World
</button>

This pattern is especially useful when your project has reusable typographic tokens such as --text-shadow-sm, --heading-font, or --body-font-stack.

Guidance

A practical way to use font and text utilities in AliasCSS is:

• Use font-family utilities with full fallback stacks.
• Use numeric font-weight values for consistent hierarchy.
• Use alignment and transform utilities sparingly and intentionally.
• Use modern text-wrap values where readability benefits.
• Use text shadows only when they improve contrast or create a deliberate visual effect.
• Move complex font stacks and shadow recipes into CSS variables when the class name becomes too dense.

That keeps typography expressive without making the markup harder to read.