Typography

The ln type system is built on a 24px vertical rhythm grid. Every font size, line height, and spacing value is a whole multiple of 8px, and heading line heights are whole multiples of 24px.

Available classes

These classes let you apply typographic styles to any element, regardless of its tag.

Lead text

Use .lead on introductory paragraphs that need more visual weight than body text. It sets the prose font at lead size.

<p class="lead">Introductory sentence in prose font, slightly larger than body.</p>

Paragraphs

Body paragraphs use the UI font at 1rem / 1.5rem (16px / 24px). The base layer adds a bottom margin of one line (24px) so paragraphs stack with consistent rhythm.

<p class="mb-3">The ln type system is built on a 24px vertical rhythm grid. Every font size, line height, and spacing value is a whole multiple of 8px.</p>
<p class="mb-3">Paragraphs receive their styles from the base layer automatically. No utility classes are needed for standard prose content.</p>
<p>The bottom margin on the last paragraph is removed to prevent unwanted trailing space inside containers.</p>

Headings

Heading elements h1–h6 receive size, line height, and font-family styles from the base layer. No classes needed.

<h1 class="mb-3">Heading level one</h1>
<h2 class="mb-3">Heading level two</h2>
<h3 class="mb-3">Heading level three</h3>
<h4 class="mb-3">Heading level four</h4>
<h5 class="mb-3">Heading level five</h5>
<h6>Heading level six</h6>

Heading style classes

Apply heading visual styles to any element. Unlike the heading elements themselves, these classes carry no margin — useful when you need the appearance of a heading on a div, span, or any other tag. Use .h1 through .h6.

<div class="h1 mb-3">Heading one style on a div</div>
<div class="h2 mb-3">Heading two style on a div</div>
<div class="h3 mb-3">Heading three style on a div</div>
<div class="h4 mb-3">Heading four style on a div</div>
<div class="h5 mb-3">Heading five style on a div</div>
<div class="h6">Heading six style on a div</div>

Display sizes

Large display sizes for hero headings and marketing copy. Both use the prose font. Use .text-display-1 and .text-display-2.

<h1 class="text-display-1 mb-3">Hero heading</h1>
<h2 class="text-display-2">Section hero</h2>

Responsive

Heading style classes and display sizes support responsive breakpoint suffixes: @sm, @md, @lg, @xl, @2xl.

<div class="h4 h2@md mb-3">h4 on mobile, h2 from md up</div>
<div class="text-display-2 text-display-1@lg">Display 2 on mobile, display 1 from lg up</div>

Base element defaults

Heading elements h1–h6, paragraphs, blockquotes, lists, and other block elements receive base styles automatically from @layer base. No class names needed for standard prose content.

<article>
  <h1>Title</h1>
  <p class="lead">Lead paragraph.</p>
  <p>Body copy — no extra classes needed.</p>
  <h2>Section</h2>
  <blockquote><p>A quote.</p></blockquote>
  <ul><li>List item</li></ul>
  <pre><code>code block</code></pre>
</article>

@use 'ln/scss' with (
  $prefix: 'my-',
  $g: 4px
);

Type scale tokens

All type sizes are exposed as CSS custom properties on :root. Reference them in your own stylesheets to stay on-grid without importing the full library.

/* reference any scale token in your own CSS */
.my-heading {
  font-size: var(--t-h2-s);
  line-height: var(--t-h2-lh);
}

On smaller viewports (below md), h1 scales down to 2.25rem / 3rem to preserve rhythm on narrow screens.

Font role tokens

Three font-family tokens map to semantic roles. Override them at :root to swap the entire type stack, or on a scoped element to change a single section.

/* override globally */
:root {
  --f-prose: 'Georgia', serif;
  --f-ui: 'Inter', sans-serif;
  --f-mono: 'Fira Code', monospace;
}

/* or scope to a single section */
.my-section {
  --f-prose: var(--f-ui);
}

--f-prose

Charter, Bitstream Charter, Sitka Text, Cambria, serif — used for headings h1–h3, blockquotes, and lead text.

--f-ui

Inter, Roboto, Helvetica Neue, Arial Nova, sans-serif — used for body text, labels, and UI elements.

--f-mono

ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas — used for code, kbd, and h6.

Reference