On this page
Typography
Fonts, scales and styles for typographic elements.
Overview
Typography groups together font size, weight, family and line heights.
Responsive font sizes are array values that correspond to the responsive breakpoints. The first value will be used below the smallAndUp breakpoint, the second value will be used for all other screen sizes.
Line Height
Line height is a ratio, set per type style so headings, body text and small text can each be tuned independently. Text that isn't one of these named styles uses standard.
Theme tokens
| Token | Default Value |
|---|---|
| lineHeights.standard | 1.3 |
| lineHeights.small | 1.3 |
| lineHeights.body | 1.3 |
| lineHeights.level1 | 1.3 |
| lineHeights.level2 | 1.3 |
| lineHeights.level3 | 1.3 |
| lineHeights.level4 | 1.3 |
Weight
Theme tokens
| Token | Default Value |
|---|---|
| fontWeights.normal | 400 |
| fontWeights.medium | 500 |
| fontWeights.bold | 700 |
| fontWeights.semiBold | 600 |
Fonts
Nebula uses the open source Aspekta font family for headings and display text, and the Inter font family, available from Google Fonts, for body text. If Aspekta is not present, Inter is used as the fallback.
Theme tokens
| Token | Default Value |
|---|---|
| fonts.display | "Aspekta", Inter, sans-serif |
| fonts.body | "Inter", sans-serif |
| fonts.monospace | Courier |
Font Sizes
Font sizes are paired for responsive scaling. Each token has an array of corresponding values. As a general rule, the small screen size is usually one step down the scale. e.g. body on small screen is equivalent to small on screen sizes above small.
The scale is also available under fontSizes, but the recommendation is to use responsiveFontSizes to get the responsive pairings.
Theme tokens
| Token | Default Value |
|---|---|
| responsiveFontSizes.small.0 | 1.0rem |
| responsiveFontSizes.small.1 | 1.2rem |
| responsiveFontSizes.body.0 | 1.2rem |
| responsiveFontSizes.body.1 | 1.4rem |
| responsiveFontSizes.level1.0 | 2.4rem |
| responsiveFontSizes.level1.1 | 2.8rem |
| responsiveFontSizes.level2.0 | 2.0rem |
| responsiveFontSizes.level2.1 | 2.4rem |
| responsiveFontSizes.level3.0 | 1.6rem |
| responsiveFontSizes.level3.1 | 2.0rem |
| responsiveFontSizes.level4.0 | 1.4rem |
| responsiveFontSizes.level4.1 | 1.6rem |