Typography

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 and applies to all text, including headings and body text.

Theme tokens

Token	Default Value
lineHeights.standard	1.3

Weight

Theme tokens

Token	Default Value
fontWeights.normal	400
fontWeights.bold	700
fontWeights.semiBold	600

Fonts

Nebula uses the Aspekta (opens in new window)  which is an open source font family for Headings/Display, and Inter (opens in new window)  font family which is available as Google font for Body. If Aspekta font family is not present then the Inter font will be used as 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