How to setup typography for a brand

The purpose of this documentation is to guide you in styling the typography for a brand.

Prerequisites

If you haven't already, make sure you've configured and loaded the brand fonts.

Tokens

Typography should be implemented using Tokens.

For example, we have Token Groups for the byline-lg theme,

@include brands.style( (
	'text--byline-lg__font': normal normal bold 15px/16px var( --indiewire--font-family--realist ),
	'text--byline-lg__letter-spacing': 1.13px,
	'text--byline-lg__color': #000000,
	'text--byline-lg__text-transform': uppercase,
	'text--byline-lg-link__color': #000000,
	'text--byline-lg-link__text-decoration': none,
	'text--byline-lg-link-hover__color': #000000,
	'text--byline-lg-link-hover__text-decoration': underline,
) );

See other brand usage for details on naming until typography modifications become GUI-based.

Tokens Widgets