Typography

Propel ships one type scale, applied through composite utilities. A single class sets font size, line height, letter spacing, and weight together, so a piece of text can’t end up with the size of one style and the leading of another.

<p class="text-body-sm-medium">Save changes</p>

Every name is text-<step>-<weight>: pick the step by the job the text does, then the weight by how much emphasis it needs. There are 51 styles across three tiers — headings for section titles, body for text meant to be read, and captions for text that labels something.

Propel replaces Tailwind’s type scale rather than adding to it. The theme resets --text-*, --font-*, --font-weight-*, and --tracking-* to initial before declaring its own, so Tailwind’s defaults such as text-sm, font-mono, and font-normal generate no CSS at all and fail silently, inheriting whatever was set further up the tree. The substitutions below list what to use instead.

Headings

Body

Captions

Weights

Text styles use four of the six declared weights. Propel’s regular is 450 rather than the usual 400, because Inter Variable reads slightly light at 400 for interface text, so the whole scale sits half a step up.

light and heavy are declared as primitives but no text style uses them; reach for one only when a composite genuinely can’t express what you need.

Font families

Two faces do all the work: Inter for the interface, IBM Plex Mono for anything read character by character. Propel names them but bundles no font files — see Installation for self-hosting, or let the stacks fall back to the system fonts.

The composite styles set size, leading, tracking, and weight — never the family. Set the family once at the root and let it inherit; font-code is the only one worth repeating locally.

Every text style

The complete index. Sizes are shown at the 16px root the scale is authored against.

Font size

The composites are built from a numeric size scale, named for the pixel value at a 16px root, so text-14 is 0.875rem. It is the primitive layer, not a shortcut: a step sets font-size alone, so text using one opts out of the leading, tracking and weight a real text style carries and inherits whatever is around it instead. Reach for a composite every time — propel/no-raw-font-size makes a bare step an error in the library, and the same rule runs over this site.

Letter spacing

Tracking is deliberately near zero, since Inter needs no dramatic tightening at interface sizes. Every text style uses tracking-default except the two smallest captions, which open to a literal 0.01em.

Substitutions for Tailwind’s defaults

Propel’s reset removes these; each has a direct replacement.

leading-* is the exception. Propel doesn’t reset it, so Tailwind’s line-height utilities still work, though they are rarely needed since every text style brings its own.

Guidelines

A heading token does not set the element. Choose <h1> through <h6> from the document’s real structure, because screen reader users navigate by heading level, then apply whichever step the design calls for. A card title inside a page section is often <h3 class="text-h6-semibold">, and that is correct.

Don’t restate what a composite already sets. Stacking leading-*, font-*, or tracking-* on top of text-body-md-regular fights the pairing the token exists to guarantee, and which declaration wins comes down to Tailwind’s utility ordering rather than the order the classes are written. A design needing a different combination needs a different step.

Cap long-form text at 65–75 characters per line and leave it at text-body-md-regular. The 1.54 leading on the body tier is what makes multi-line text comfortable, while the caption tier’s 1.2 leading is for single lines, so a paragraph set in a caption style reads as cramped.

Text below text-caption-md-* is for labels and counters rather than content a reader must not miss. Pair the 9px and 10px steps with color, icon, or position instead of letting size carry the meaning alone.