Every text element is styled out of the box. Block elements have no top margin and a bottom margin of --jf-flow, so vertical rhythm is consistent.

The scale is rem. Reading sizes (xs, sm, base) are fixed; md and up — every heading — are fluid, built by the fluid($min, $max) function into a single clamp() that scales with the viewport between 320px and 1240px, no breakpoints. Each fluid step also gets a paired line-height automatically — type($step) (the mixin every heading uses) looks the step up in $type-leading and sets both font-size and line-height together, so a bigger heading and its tighter leading can't drift apart. Use type($step) in your own rules for the same pairing; call fluid() directly only if you need a one-off size outside the scale.

    .callout-heading {
      @include type(lg);
      // font-size: clamp(1.125rem, 0.45vw + 1.05rem, 1.25rem);
      // line-height: 1.35; // "snug" — looked up from $type-leading, not set by hand
    }
  

The scale

Eleven steps, emitted as --jf-font-size-*. Reference one with @include type($step) (size and leading) or token(font-size-lg) (size only). The Line-height column is what $type-leading pairs with that step; see the leading scale for the values behind those keys.

A single value is fixed; a → b is a clamp() sliding between those two sizes as the viewport goes from $fluid-min-vw (320px) to $fluid-max-vw (1240px). Which step each heading level takes is $heading-scale; merge $type-scale to retune a size or add a step.

Headings

Semantic <h1>–<h6> are sized by the scale. The matching .h1–.h6 classes apply the same size + line-height to any element without the semantics (they use !important). In Sass, @include h3(); does the same in your own rule.

text-wrap: balance is applied to h1–h3 (even multi-line headings), and text-wrap: pretty to p / li / dd / figcaption (no orphans). Unsupported browsers ignore both.

Lists

List markers are on by element. To strip them (nav lists, card grids) add role="list" — which also keeps VoiceOver announcing it as a list.

Blockquote & preformatted

A journey of a thousand miles begins with a single step.

Lao Tzu

console.log("Jellyfish is awesome");

Inline elements

Utilities

Reading measure

Set $measure (or --jf-measure at runtime) to a value like 66ch to cap line length on p / li / dd / blockquote / small (WCAG 1.4.8). Default is none.