refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/design. Install with npm install @refrakt-md/design and add "@refrakt-md/design" to the packages array in your refrakt.config.json.

Typography

Displays font specimens with live-loaded typefaces. List items are parsed as role: Family Name (weight1, weight2). Supported roles: heading, body, mono, display, caption.

Basic usage

Define a font system with roles and weights.

{% typography title="Font System" %}
- heading: Inter (600, 700)
- body: Inter (400, 500)
- mono: JetBrains Mono (400, 500)
{% /typography %}
<section data-rune="typography">
  <meta content="Font System" data-field="title">
  <meta content="true" data-field="show-sizes">
  <meta content="true" data-field="show-weights">
  <meta content="false" data-field="show-charset">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&amp;family=Inter:wght@400;500&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet">
  <h3 data-name="title">Font System</h3>
  <div data-name="specimens">
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">heading</span>
        <span data-name="specimen-family">Inter</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 600">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 600">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 600">
          <span data-name="weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 700">
          <span data-name="weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">body</span>
        <span data-name="specimen-family">Inter</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 400">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 400">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 400">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 500">
          <span data-name="weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">mono</span>
        <span data-name="specimen-family">JetBrains Mono</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 400">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 400">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 400">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 500">
          <span data-name="weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Font System

headingInter
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
600 — SemiboldAa Bb Cc
700 — BoldAa Bb Cc
bodyInter
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc
monoJetBrains Mono
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc
<section class="rf-typography rf-typography--Font System rf-typography--true rf-typography--true rf-typography--false" data-title="Font System" data-show-sizes="true" data-show-weights="true" data-show-charset="false" data-rune="typography" data-density="full">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&amp;family=Inter:wght@400;500&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet" />
  <h3 data-name="title" class="rf-typography__title" data-section="title">Font System</h3>
  <div data-name="specimens" class="rf-typography__specimens">
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">heading</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Inter</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 600" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 700" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">body</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Inter</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Inter', sans-serif; font-weight: 500" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">mono</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">JetBrains Mono</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'JetBrains Mono', monospace; font-weight: 500" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Custom sample text

Use the sample attribute to display custom text in specimens.

{% typography title="Display Fonts" sample="Design is intelligence made visible" %}
- display: Playfair Display (400, 700)
- body: Source Sans 3 (400, 600)
{% /typography %}
<section data-rune="typography">
  <meta content="Display Fonts" data-field="title">
  <meta content="true" data-field="show-sizes">
  <meta content="true" data-field="show-weights">
  <meta content="false" data-field="show-charset">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&amp;family=Source+Sans+3:wght@400;600&amp;display=swap" rel="stylesheet">
  <h3 data-name="title">Display Fonts</h3>
  <div data-name="specimens">
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">display</span>
        <span data-name="specimen-family">Playfair Display</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 48px; font-weight: 400">
          Design is intelli
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 32px; font-weight: 400">
          Design is intelligence mad
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 24px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 18px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 14px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 700">
          <span data-name="weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">body</span>
        <span data-name="specimen-family">Source Sans 3</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 48px; font-weight: 400">
          Design is intelli
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 32px; font-weight: 400">
          Design is intelligence mad
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 24px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 18px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 400">
          Design is intelligence made visible
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 600">
          <span data-name="weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Display Fonts

displayPlayfair Display
Design is intelli48px
Design is intelligence mad32px
Design is intelligence made visible24px
Design is intelligence made visible18px
Design is intelligence made visible14px
400 — RegularAa Bb Cc
700 — BoldAa Bb Cc
bodySource Sans 3
Design is intelli48px
Design is intelligence mad32px
Design is intelligence made visible24px
Design is intelligence made visible18px
Design is intelligence made visible14px
400 — RegularAa Bb Cc
600 — SemiboldAa Bb Cc
<section class="rf-typography rf-typography--Display Fonts rf-typography--true rf-typography--true rf-typography--false" data-title="Display Fonts" data-show-sizes="true" data-show-weights="true" data-show-charset="false" data-rune="typography" data-density="full">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&amp;family=Source+Sans+3:wght@400;600&amp;display=swap" rel="stylesheet" />
  <h3 data-name="title" class="rf-typography__title" data-section="title">Display Fonts</h3>
  <div data-name="specimens" class="rf-typography__specimens">
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">display</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Playfair Display</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelli
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence mad
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Playfair Display', sans-serif; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Playfair Display', sans-serif; font-weight: 700" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">body</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Source Sans 3</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelli
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence mad
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          Design is intelligence made visible
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Source Sans 3', sans-serif; font-weight: 600" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">600 — Semibold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
    </div>
  </div>
</section>

Single specimen

A typography rune can show a single font for focused documentation.

{% typography title="Monospace" showCharset="true" %}
- mono: Fira Code (400, 500, 700)
{% /typography %}
<section data-rune="typography">
  <meta content="Monospace" data-field="title">
  <meta content="true" data-field="show-sizes">
  <meta content="true" data-field="show-weights">
  <meta content="true" data-field="show-charset">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&amp;display=swap" rel="stylesheet">
  <h3 data-name="title">Monospace</h3>
  <div data-name="specimens">
    <div data-name="specimen">
      <div data-name="specimen-header">
        <span data-name="specimen-role">mono</span>
        <span data-name="specimen-family">Fira Code</span>
      </div>
      <div data-name="sizes">
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 48px; font-weight: 400">
          The quick brown f
          <span data-name="size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 32px; font-weight: 400">
          The quick brown fox jumps
          <span data-name="size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 24px; font-weight: 400">
          The quick brown fox jumps over the
          <span data-name="size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 18px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 14px; font-weight: 400">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label">14px</span>
        </div>
      </div>
      <div data-name="weights">
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 400">
          <span data-name="weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 500">
          <span data-name="weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 700">
          <span data-name="weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
      <div data-name="charset" style="font-family: 'Fira Code', monospace; font-weight: 400">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !@#$%^&amp;*()</div>
    </div>
  </div>
</section>

Monospace

monoFira Code
The quick brown f48px
The quick brown fox jumps 32px
The quick brown fox jumps over the 24px
The quick brown fox jumps over the lazy dog18px
The quick brown fox jumps over the lazy dog14px
400 — RegularAa Bb Cc
500 — MediumAa Bb Cc
700 — BoldAa Bb Cc
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !@#$%^&*()
<section class="rf-typography rf-typography--Monospace rf-typography--true rf-typography--true rf-typography--true" data-title="Monospace" data-show-sizes="true" data-show-weights="true" data-show-charset="true" data-rune="typography" data-density="full">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&amp;display=swap" rel="stylesheet" />
  <h3 data-name="title" class="rf-typography__title" data-section="title">Monospace</h3>
  <div data-name="specimens" class="rf-typography__specimens">
    <div data-name="specimen" class="rf-typography__specimen">
      <div data-name="specimen-header" class="rf-typography__specimen-header">
        <span data-name="specimen-role" class="rf-typography__specimen-role">mono</span>
        <span data-name="specimen-family" class="rf-typography__specimen-family">Fira Code</span>
      </div>
      <div data-name="sizes" class="rf-typography__sizes">
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 48px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown f
          <span data-name="size-label" class="rf-typography__size-label">48px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 32px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps 
          <span data-name="size-label" class="rf-typography__size-label">32px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 24px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the 
          <span data-name="size-label" class="rf-typography__size-label">24px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 18px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">18px</span>
        </div>
        <div data-name="size-sample" style="font-family: 'Fira Code', monospace; font-size: 14px; font-weight: 400" class="rf-typography__size-sample">
          The quick brown fox jumps over the lazy dog
          <span data-name="size-label" class="rf-typography__size-label">14px</span>
        </div>
      </div>
      <div data-name="weights" class="rf-typography__weights">
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 400" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">400 — Regular</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 500" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">500 — Medium</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
        <div data-name="weight-sample" style="font-family: 'Fira Code', monospace; font-weight: 700" class="rf-typography__weight-sample">
          <span data-name="weight-label" class="rf-typography__weight-label">700 — Bold</span>
          <span style="font-size: 24px">Aa Bb Cc</span>
        </div>
      </div>
      <div data-name="charset" style="font-family: 'Fira Code', monospace; font-weight: 400" class="rf-typography__charset">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 !@#$%^&amp;*()</div>
    </div>
  </div>
</section>

Attributes

AttributeTypeDefaultDescription
titlestring—Section heading
samplestring"The quick brown fox..."Sample text for size previews
showSizesbooleantrueShow size progression samples
showWeightsbooleantrueShow weight comparison
showCharsetbooleanfalseShow full character set

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration