Typography

src/css/utilities/typography.css

Use these instead of hardcoding font families, weights, or sizes. All classes read CSS custom properties set from merchant theme settings, so they adapt automatically to font selections.

Font family and style

Class	Purpose
type__body	Body font family, weight, style, and line-height
type__heading	Default heading font family, weight, and style
type__subheading	Subheading font family, weight, and style
type__accent	Accent font family, weight, and style
type__button-style	Button font family, weight, and capitalization
type__button-size	Button line-height and letter-spacing

Heading styles and sizes

Apply type__heading-N-style and type__heading-N-size independently so font style and size can be mixed as needed:

Class	Purpose
type__heading-1-style	H1 font family and style
type__heading-1-size	H1 font size
type__heading-2-style	H2 font family and style
type__heading-2-size	H2 font size
type__heading-3-style	H3 font family and style
type__heading-3-size	H3 font size
type__heading-4-style	H4 font family and style
type__heading-4-size	H4 font size
type__heading-5-style	H5 font family and style
type__heading-5-size	H5 font size
type__heading-6-style	H6 font family and style
type__heading-6-size	H6 font size

Font sizes

Theme-relative sizes that scale with the merchant's base font setting:

Class	Purpose
type--smaller	Smaller than base
type--small	Small
type--base	Base (default) size
type--big	Larger than base
type--bigger	Largest relative size