The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Typography

Typography relates to the structure and appearance of textual information. It relates to visual hierarchy, letterforms, and punctuation.

Font stack

Helios uses the default system fonts available on each OS. We opt for system fonts because they are stable and offer various styles that support internationalization, code, tabular data, data viz, etc. In addition, they help improve performance by reducing the number of resources to be loaded, which is important for large applications like those at HashiCorp.

While the text might display differently across each OS, contextually to a user of that OS, it won’t seem out of place.

Sans-serif

sans-serif on mac

sans-serif on windows

sans-serif on linux

Monospace

monospace on mac

monospace on windows

monospace on linux

How to use these styles

While we do offer design tokens for typography, we recommend using the predefined CSS helper classes.

CSS helper classes

In a single declaration, these classes contain everything to apply a standard typographic style to an element: font-family, font-size, line-height, and a reset for margin and padding to match the intended design language.

<p class="hds-typography-display-300">The quick brown fox jumps over the lazy dog.</p>

Font styles

  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa
  • Aa

Font family

While we don’t recommend using custom styles often, font-family helpers are available to change the font family of an element.

<p class="hds-font-family-sans-text">The quick brown fox jumps over the lazy dog.</p>
font-family helpers Use for
font-family-sans-display Headings and titles
font-family-sans-text Body copy
font-family-mono-code Monospaced text

  • Aa
  • Aa
  • Aa

Font weight

Use the font-weight helpers to change the weight of text in an element.

<!-- with font-family CSS helpers -->
<p class="hds-font-family-sans-text hds-font-weight-medium">The quick brown fox jumps over the lazy dog.</p>

<!-- with typographic style CSS helpers -->
<p class="hds-typography-display-300 hds-font-weight-semibold">The quick brown fox jumps over the lazy dog.</p>

  • Aa
  • Aa
  • Aa
  • Aa

Style and weight

The following are recommended style and weight combinations for use in our applications:

  • The quick brown fox jumps over the lazy dog.
    display-500 (bold)
  • The quick brown fox jumps over the lazy dog.
    display-400 (medium)
  • The quick brown fox jumps over the lazy dog.
    display-400 (semibold)
  • The quick brown fox jumps over the lazy dog.
    display-400 (bold)
  • The quick brown fox jumps over the lazy dog.
    display-300 (medium)
  • The quick brown fox jumps over the lazy dog.
    display-300 (semibold)
  • The quick brown fox jumps over the lazy dog.
    display-300 (bold)
  • The quick brown fox jumps over the lazy dog.
    display-200 (semibold)
  • The quick brown fox jumps over the lazy dog.
    display-100 (medium)
  • The quick brown fox jumps over the lazy dog.
    body-300 (regular)
  • The quick brown fox jumps over the lazy dog.
    body-300 (medium)
  • The quick brown fox jumps over the lazy dog.
    body-300 (semibold)
  • The quick brown fox jumps over the lazy dog.
    body-200 (regular)
  • The quick brown fox jumps over the lazy dog.
    body-200 (medium)
  • The quick brown fox jumps over the lazy dog.
    body-200 (semibold)
  • The quick brown fox jumps over the lazy dog.
    body-100 (regular)
  • The quick brown fox jumps over the lazy dog.
    body-100 (medium)
  • The quick brown fox jumps over the lazy dog.
    body-100 (semibold)
  • The quick brown fox jumps over the lazy dog.
    code-300 (regular)
  • The quick brown fox jumps over the lazy dog.
    code-300 (bold)
  • The quick brown fox jumps over the lazy dog.
    code-200 (regular)
  • The quick brown fox jumps over the lazy dog.
    code-200 (bold)
  • The quick brown fox jumps over the lazy dog.
    code-100 (regular)
  • The quick brown fox jumps over the lazy dog.
    code-100 (bold)

Design tokens

Helios offers numerous typographic design tokens should your project require more flexibility.

Since these are “atomic” definitions that associate a particular typographic property (e.g., font-size, line-height, letter-spacing, etc.) to a single value, we don’t consider them “typographic” styles. Therefore, we advise against using them directly in your CSS and recommend using the CSS helper classes instead.