Typography

Type scale, font tokens, and text styling in Olyx.

Olyx uses a type scale defined entirely in CSS custom properties. One font family variable, fifteen shorthand tokens, zero runtime overhead.

Font Family

Olyx uses DM Sans — a geometric sans-serif with clean proportions at small sizes and comfortable reading at body sizes.

--font-family: var(--font-dm-sans), sans-serif;

The --font-dm-sans CSS variable is set on <html> and consumed by --font-family.

Type Scale

Each token is a CSS font shorthand: {weight} {size} / {line-height} {family}. Apply it with a single property.

Display

Large, attention-grabbing text. Hero sections, landing pages, marketing headlines.

Headline

Section headings, page titles, dialog headers.

Title

Card titles, list headers, navigation items, component labels.

Body

Paragraph text, descriptions, form content. This is where users spend most of their reading time.

Label

Buttons, chips, tabs, badges, form labels — concise text in interactive elements.

Hierarchy at a Glance

The full scale, ordered by size:

Customizing

Swap the Font Family

Replace --font-family to change the typeface globally:

:root {
  --font-family: "Inter", system-ui, sans-serif;
}

Accessibility

  • Minimum body size: --font-body-md is 14px — meets WCAG minimum. Prefer --font-body-lg (16px) for primary content.
  • Line height: All tokens have line heights ≥ 1.33× the font size. Body tokens hit 1.43× for comfortable reading.
  • 200% zoom: The scale holds at 200% browser zoom without overlap or truncation.
  • Font weight: Avoid using weights below 400 for text smaller than 16px.