(opens in a new tab)

Typography

Typography establishes hierarchy, provides structure, and ensures accessible communication across applications.

Copy link to headline:Font families

The design system uses two font families to avoid visual clutter: a sans-serif and a monospace typeface. Visual contrast is achieved through variations in weight and size rather than combining multiple font families.

By default, these Open Source typefaces are used, optimized for legibility on digital screens:

  1. Default: Source Sans 3
    default

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

  2. Monospace: Source Code Pro

    Precise and readable. Designed for data-dense layouts and code blocks. View on Google Fonts(opens in a new tab).

To support diverse brand identities, a variable-based architecture is used so font families can be customized easily. See custom font families below.

Protected content

Additional content is available for Schwarz Group employees.

Copy link to headline:Usage

Instead of arbitrary pixel values, we provide semantic text roles that express functional intent. Whenever possible, use built-in typography components for headlines, links, and text.

  1. Headlines

    Use the OnyxHeadline component for headlines.

    Heading levels h5 and h6 are supported for semantic HTML hierarchy but share the visual styling of 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 the OnyxLink component for text links.

    Hello World

    • Target
      internal

    Hello World

    • Target
      external

  3. Paragraphs

    Use regular paragraph elements with the appropriate CSS class or Figma style:

    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

    Apply monospace or default font families using the corresponding CSS utility classes or Figma styles:

    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 overflow text is handled when content exceeds its container width. While multiline is standard behavior, helper classes simplify common truncation patterns.

    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

Font families are not bundled by default to optimize bundle size and build performance. You must install your chosen font packages manually, otherwise browsers fall back to system defaults.

  1. Install font families

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

  2. Add imports

    Import the font stylesheets in your application entry file:

Copy link to headline:Custom font families

To use custom fonts instead of the defaults:

  1. Install custom font families

    Install your preferred font packages or host the font files locally.

  2. Override default font families

    Override the default font variables with your custom font families: