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

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

Font family

HTML

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

Font size

HTML

  1. <div class="font-size-xxxl">Font size XXXL</div>
  2. <div class="font-size-xxl">Font size XXL</div>
  3. <div class="font-size-xl">Font size XL</div>
  4. <div class="font-size-l">Font size L</div>
  5. <div class="font-size-m">Font size M</div>
  6. <div class="font-size-s">Font size S</div>
  7. <div class="font-size-xs">Font size XS</div>
  8. <div class="font-size-xxs">Font size XXS</div>
  10. <custom-style>
  11.   <style>
  12.     .font-size-xxxl {
  13.       font-size: var(--lumo-font-size-xxxl);
  14.     }
  15.     .font-size-xxl {
  16.       font-size: var(--lumo-font-size-xxl);
  17.     }
  18.     .font-size-xl {
  19.       font-size: var(--lumo-font-size-xl);
  20.     }
  21.     .font-size-l {
  22.       font-size: var(--lumo-font-size-l);
  23.     }
  24.     .font-size-m {
  25.       font-size: var(--lumo-font-size-m);
  26.     }
  27.     .font-size-s {
  28.       font-size: var(--lumo-font-size-s);
  29.     }
  30.     .font-size-xs {
  31.       font-size: var(--lumo-font-size-xs);
  32.     }
  33.     .font-size-xxs {
  34.       font-size: var(--lumo-font-size-xxs);
  35.     }
  36.   </style>
  37. </custom-style>