Epic CSS / Documentation

Typography

Build a readable hierarchy with the font ramp. Choose a font-size class, pair it with a line height, then set a weight where needed.

Compose a type hierarchy

The preview below uses only existing typography, spacing, and color utilities. The markup is the same text you can copy.

<div>
  <p class="fs-14 lh-20 fw-600 clr-primary mb-8">EPIC CSS</p>
  <h3 class="fs-32 lh-37 fw-700 m-0 mb-12">A clear heading for your next idea</h3>
  <p class="fs-16 lh-24 m-0">Pair a stronger heading with comfortable body text. Change the palette without changing your type classes.</p>
</div>

Use HTML heading levels for the structure of your content. A font-size utility changes appearance; it does not change the meaning of the element.

Font sizes

The ramp uses CSS custom properties. At (max-width: 1084px), their values change automatically. The class names describe the wide-screen scale, not a fixed size at every viewport. Resize the page to see the same classes adapt.

This table is generated from the full compiled utility stylesheet. The current ramp also defines --fs-40 for base styles, but does not emit an fs-40 utility. There are no breakpoint-prefixed font-size utilities in this version; the existing classes respond through the shared variables.

Line heights

Choose line height separately from size. A smaller size can still need generous line spacing, especially for paragraphs.

<div class="grid gap-24">
  <p class="fs-16 lh-24 m-0">This paragraph uses the same font size with a more compact line height. Use enough text to see how the lines sit together as the container gets narrower.</p>
  <p class="fs-16 lh-32 m-0">This paragraph keeps the same font size but gives its lines more room. Compare the two settings at both wide and narrow viewport widths.</p>
</div>

There is no lh-40 utility. In the current base styles, some heading declarations reference tokens without a wide-screen default, including --lh-40, --fs-28, and --lh-28. Use explicit existing utilities for predictable examples; this documentation does not add missing tokens or classes.

Font weights

<div class="flex flex-col gap-12">
  <p class="fs-20 lh-29 fw-400 m-0">Regular — comfortable everyday text</p>
  <p class="fs-20 lh-29 fw-600 m-0">Semibold — a little more emphasis</p>
  <p class="fs-20 lh-29 fw-700 m-0">Bold — a stronger visual anchor</p>
</div>

The selected font determines which weight faces are available and whether the browser synthesizes a weight. The ramp itself does not download a webfont.

Text helpers

<p class="fs-20 lh-29 text-center m-0">A centered line with a <span class="text-nowrap">short unbroken label</span>.</p>

text-center centers inline content. text-nowrap prevents wrapping, so keep it for short labels or provide an overflow treatment. No additional text-alignment or responsive text-helper classes are assumed here.

Base styles and customization

The base partial supplies the system font stack, body text, headings, and paragraph styling. Its default body size is 1.125rem. The font-ramp partial supplies the utilities and their variables. You can import them selectively, but importing the ramp alone does not add the base element styles.

To adjust an existing size token, add CSS overrides after the library import. Define both viewport cases if you want to preserve a responsive step. Unlike the palette defaults, the ramp's Sass assignments are not currently optional defaults, so assigning those Sass variables before import is not an override mechanism.

// In your Sass entry, after your chosen library imports:
:root {
  --fs-32: 36px;
}
@media (max-width: 1084px) {
  :root {
    --fs-32: 26px;
  }
}

This changes what fs-32 resolves to; it does not generate a new utility. For palette overrides and import order, see Colors and selective imports.