Documentation

Typography

Typography is the heart of our user interface—it’s the voice of our digital products. It provides structure, establishes clear visual hierarchies, and ensures accessible communication across our entire ecosystem.

Copy link to headline:Font families

Our design system utilizes only two different font families to avoid "font fatigue": One sans-serif and a monospace font family. We achieve contrast through strategic variations in font weight and size rather than mixing multiple font families.

By default, the following Open Source and free typefaces are used, specifically optimized for legibility on digital displays:

  1. Default: Source Sans 3
    default

    Clear, modern and approachable. Check it out on Google Fonts(opens in a new tab).

  2. Monospace: Source Code Pro

    Precise and rhythmic. Designed for data-heavy environments and code blocks. Check it out on Google Fonts(opens in a new tab).

To support the diverse identities, brands and themes, we utilize a flexible variable architecture so e.g. font families can easily be customized. See the custom font families section below for further information.

Protected content

There is more content available here for internal employees of the Schwarz Group.

Copy link to headline:Usage

Instead of defining arbitrary pixel values, we follow a semantic logic by defining roles that describe the functional intent of the text. Find an overview of available text styles below. Whenever possible, we strongly recommend to use one of our components to apply headlines, links and other texts.

  1. Headlines

    Use our OnyxHeadline(opens in a new tab) component for applying headlines.

    The headline styles h5 and h6 are only supported for technical semantic reasons but are not part of our design system. Therefore, they are styled the same as h4.

    Hello World

    • Level
      h1

    Hello World

    • Level
      h2

    Hello World

    • Level
      h3

    Hello World

    • Level
      h4
    Hello World
    • Level
      h5
    Hello World
    • Level
      h6

  2. Links

    Use our OnyxLink(opens in a new tab) component for applying links.

    Hello World
    • Target
      internal
    Hello World
    • Target
      external

  3. Paragraphs

    Use regular text for applying paragraphs and apply the corresponding Figma style / CSS class if needed.

    Hello World

    • Size
      small
    • Figma style
      Body/paragraph-small
    • CSS class
      onyx-text--small

    Hello World

    • Size
      default
    • Figma style
      Body/paragraph-default
    • CSS class
      none (default)

    Hello World

    • Size
      large
    • Figma style
      Body/paragraph-large
    • CSS class
      onyx-text--large

  4. Font families

    Font families can be applied to any component using the corresponding Figma style / CSS class.

    Hello World

    • Font family
      default
    • Figma style
      see "Paragraphs" above
    • CSS class
      see "Paragraphs" above

    Hello World

    • Font family
      monospace
    • Figma style
      Mono/mono-default
    • CSS class
      onyx-text--monospace

  5. Truncation

    Truncation defines how text should be handled if it is too long to fit inside its parent container. While "multiline" is technically the default, we still provide a custom CSS class for optimizing edge cases and hyphenation.

    Hello World

    • Truncation
      ellipsis
    • CSS class
      onyx-truncation-ellipsis

    Hello World Hello World Hello World Hello World Hello World Hello World

    • Truncation
      multiline
    • CSS class
      onyx-truncation-multiline

Copy link to headline:Installation

We do not bundle / include any font families in our design system itself to support better build-time asset optimizations and to maintain a smaller bundle size. Therefore, it is mandatory that you manually install your desired font families. Otherwise the application will fallback to browser default font families.

  1. Install font families

    We recommend installing the fonts using Fontsource(opens in a new tab):

  2. Add imports

    Finally, add imports for the font families so they are ready to be used by your application:

Copy link to headline:Custom font families

To use custom font families instead of our recommended ones, follow the steps below:

  1. Install custom font families

    Follow the same installation instructions above to install your custom font families.

  2. Override default font families

    When installed, override our default font families with your custom ones to apply them throughout the whole design system. Make sure to replace the "Font family name" with the exact name of your sans-serif and monospace font.