Font Weight & Style

Font utilities control typographic emphasis and hierarchy — from readable body text and compact interface labels to buttons, navigation items, dashboards, and production design system components.

FrontAlign provides a clean set of font weight and font style utilities, along with a default font stack and a path to custom Google Fonts at runtime or build time.

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

Quick reference

Font weight scale

Apply weight utilities directly on headings, paragraphs, buttons, labels, and links. Each class maps to a single, predictable font-weight value.

<h1 class="font-black">
  Build modern interfaces faster.
</h1>

<p class="font-normal">
  FrontAlign gives you flexible typography utilities for real production UI.
</p>

Font style utilities

<p class="font-italic">
  Design is intelligence made visible.

  <span class="font-not-italic">
    This part stays upright.
  </span>
</p>

Default font stack

FrontAlign ships with a modern system font stack by default, designed to be fast, native, and reliable across macOS, Windows, Linux, Android, and iOS. It avoids unnecessary font downloads while still providing excellent rendering.

--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", "Noto Sans", sans-serif;

--font-monospace: Monaco, Consolas, "Courier New", SFMono-Regular,
  Menlo, "Liberation Mono", monospace;

Custom fonts

FrontAlign isn't limited to the default stack. Any Google Font can be loaded at runtime or build time with a single JavaScript configuration line, so a project can adopt brand-specific typography without rewriting its CSS system.

For full setup instructions, see the Typography and Configuration documentation.

Where each weight belongs

Real world examples

Dashboard metric

<div class="border rounded-4 shadow">
  <span class="font-medium">
    Revenue
  </span>

  <h2 class="font-black">
    $24,800
  </h2>
</div>

Feature card

<div class="border rounded-4 shadow">
  <h3 class="font-bold">
    Runtime Engine
  </h3>

  <p class="font-normal">
    Build interactive interfaces without framework lock-in.
  </p>
</div>

Pricing card

<div class="border rounded-4 shadow">
  <h3 class="font-bold">
    Pro
  </h3>

  <p class="font-black">
    $29
  </p>

  <span class="font-medium">
    per month
  </span>
</div>

Testimonial

<blockquote class="is-boxed">
  <p class="font-italic">
    FrontAlign feels fast, clean, and production-ready.
  </p>

  <footer class="blockquote-footer font-medium">
    Product Designer
  </footer>
</blockquote>

Badge

<span class="font-semibold">
  Beta
</span>

Accessibility notes

Typography weight should improve hierarchy, not reduce readability. Avoid using very thin weights for small text — font-thin and font-light are best suited for large display text or decorative typography, not body copy.

Best practices