Font size

Fixed font-size utilities .is-size-1 through .is-size-6, sized in rem. All classes use !important — utilities exist to override component-level typography regardless of source order or specificity.

How it works

  • Six fixed sizes (in rem), descending from .is-size-1 to .is-size-6:
    • .is-size-1 → 2.5rem
    • .is-size-2 → 2rem
    • .is-size-3 → 1.75rem
    • .is-size-4 → 1.5rem
    • .is-size-5 → 1.25rem
    • .is-size-6 → 1rem
  • These are fixed sizes — the value does not scale with viewport width. For fluid, viewport-aware typography use the framework's semantic typography classes (.t-display, .t-h1, .t-h2, .t-h3, .t-lead, etc.), which apply clamp() against the framework's typographic scale.
  • Pick .is-size-* when you need a deterministic size; pick .t-* when you want responsive type that breathes with the viewport.
  • The class shape is configurable via $selector-prefix. Bootstrap consumers can opt into .fs-N with a single override — see below.

Live

.is-size-1 through .is-size-6

is-size-1 — 2.5rem

is-size-2 — 2rem

is-size-3 — 1.75rem

is-size-4 — 1.5rem

is-size-5 — 1.25rem

is-size-6 — 1rem

<div class="vstack" style="--kc-stack-gap: 0.25rem;">
<p class="is-size-1" style="margin: 0;">is-size-1 — 2.5rem</p>
<p class="is-size-2" style="margin: 0;">is-size-2 — 2rem</p>
<p class="is-size-3" style="margin: 0;">is-size-3 — 1.75rem</p>
<p class="is-size-4" style="margin: 0;">is-size-4 — 1.5rem</p>
<p class="is-size-5" style="margin: 0;">is-size-5 — 1.25rem</p>
<p class="is-size-6" style="margin: 0;">is-size-6 — 1rem</p>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-font-size')
);
Playground

Markup

markup
<p class="is-size-1">Display heading</p>
<p class="is-size-2">Page heading</p>
<p class="is-size-3">Section heading</p>
<p class="is-size-4">Sub-section</p>
<p class="is-size-5">Lead copy</p>
<p class="is-size-6">Body baseline</p>

Variables

VariableDefaultNotes
$selector-prefix".is-size-" (derived from $selector-prefix-is)String prepended to each map key. Override to ".fs-" for Bootstrap parity or ".text-" for a Tailwind-flavoured shape.
$sizes(1: 2.5rem, 2: 2rem, 3: 1.75rem, 4: 1.5rem, 5: 1.25rem, 6: 1rem)Map of suffix → font-size. Each entry emits <prefix><key> with the configured size and !important. Pass a custom map to retune the ladder or drop unused steps.

Override example

app.scss
@use '@adnap/krysalicss/helper/font-size' with (
  // Swap to a Bootstrap-style prefix:
  $selector-prefix: '.fs-',
  // Tighten the scale to four sizes:
  $sizes: (
    1: 2.25rem,
    2: 1.75rem,
    3: 1.25rem,
    4: 1rem,
  ),
);

Tokens consumed

None — sizes are baked at SCSS-compile time rather than read from --kc-* tokens. Use the override above to change them.