Lumo Typography

The Lumo theme defines a set CSS custom properties you can use to apply consistent typographic styles across your application.

Font Family

The system font stack is used by default: Segoe UI on Windows; Roboto on Android and Chrome OS; San Francisco on macOS, iOS, and iPadOS; On other systems, Helvetica and Arial are used as fallbacks.

--lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Font Size and Line Height

The following font sizes are available to use. M is the standard size, and is used by most elements by default.

Font size

--lumo-font-size-xxxl: 2.5rem

--lumo-font-size-xxl: 1.75rem

--lumo-font-size-xl: 1.375rem

--lumo-font-size-l: 1.125rem

--lumo-font-size-m: 1rem

--lumo-font-size-s: 0.875rem

--lumo-font-size-xs: 0.8125rem

--lumo-font-size-xxs: 0.75rem

Line-height

--lumo-line-height-m: 1.625

--lumo-line-height-s: 1.375

--lumo-line-height-xs: 1.25

Examples

HTML

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p>Plain text.</p>
<p><a href="">Link</a></p>
<p theme="font-size-s">Small size text.</p>
<p theme="font-size-xs">Extra small size text.</p>

Font family

HTML

<!-- Add directly to index.html or use a separate HTML import -->
<custom-style>
  <style>
    html {
      --lumo-font-family: "Open Sans", sans-serif;
    }
  </style>
</custom-style>

Font size

HTML

<div class="font-size-xxxl">Font size XXXL</div>
<div class="font-size-xxl">Font size XXL</div>
<div class="font-size-xl">Font size XL</div>
<div class="font-size-l">Font size L</div>
<div class="font-size-m">Font size M</div>
<div class="font-size-s">Font size S</div>
<div class="font-size-xs">Font size XS</div>
<div class="font-size-xxs">Font size XXS</div>
<custom-style>
  <style>
    .font-size-xxxl {
      font-size: var(--lumo-font-size-xxxl);
    }
    .font-size-xxl {
      font-size: var(--lumo-font-size-xxl);
    }
    .font-size-xl {
      font-size: var(--lumo-font-size-xl);
    }
    .font-size-l {
      font-size: var(--lumo-font-size-l);
    }
    .font-size-m {
      font-size: var(--lumo-font-size-m);
    }
    .font-size-s {
      font-size: var(--lumo-font-size-s);
    }
    .font-size-xs {
      font-size: var(--lumo-font-size-xs);
    }
    .font-size-xxs {
      font-size: var(--lumo-font-size-xxs);
    }
  </style>
</custom-style>