Typography
The onyx design system relies on a default (sans-serif) and a monospace font family.
onyx is intended to be used with the following font families which are open-source and free to use under the SIL Open Font License:
- Default: Source Sans 3
- Monospace: Source Code Pro
Installation
To install and use the recommended onyx font families, install them by running
pnpm add @fontsource-variable/source-sans-3 @fontsource-variable/source-code-pronpm install @fontsource-variable/source-sans-3 @fontsource-variable/source-code-proyarn install @fontsource-variable/source-sans-3 @fontsource-variable/source-code-proand then import them in your main TypeScript / CSS file, e.g.:
import "@fontsource-variable/source-code-pro";
import "@fontsource-variable/source-sans-3";For further information about the font families or installation, refer to the Fontsource docs.
Using custom font families
If you want to use custom font families, you need to install and import them like mentioned above. Afterwards, you need to override the following CSS variables like shown below so the font families are picked up by all onyx components.
We recommend installing font families as npm package using Fontsource.
:root {
--onyx-font-family: "My custom font family", sans-serif;
--onyx-font-family-mono: "My custom mono font family", monospace;
}// import your custom fonts here...
import "custom.css";Font styles
onyx provides some utility CSS classes for font styles that can be used to style custom text components like <p> or <span>.
| Class | Description |
|---|---|
class="onyx-text" | Sets the default font size and line height |
class="onyx-text onyx-text--small" | Same as onyx-text but in small size and line height |
class="onyx-text onyx-text--large" | Same as onyx-text but in large size and line height |
class="onyx-text onyx-text--monospace" | Same as onyx-text but with the monospace font family |