Font families, sizes, weights, and line heights.

Font Tokens

Eddie loads fonts via the token package's fonts.scss file. Never add Google Fonts <link> tags manually.

import '@brad-frost-web/eddie-design-tokens/bfw/scss/fonts.scss';

Type Scale

Typography tokens follow the naming pattern --ed-theme-typography-{variant}-{property}:

font-family: var(--ed-theme-typography-body-default-font-family); font-size: var(--ed-theme-typography-body-default-font-size); line-height: var(--ed-theme-typography-body-default-line-height); font-weight: var(--ed-theme-typography-body-default-font-weight);

Token variants include display-xl, display-lg, display-default, headline-lg, headline-default, headline-sm, title-lg, title-default, title-sm, label-lg, label-default, label-sm, body-lg, body-default, body-sm, meta-default, meta-sm, and button-lg, button-default, button-sm. Responsive variants (e.g., headline-lg-mobile) are also available.

Heading Component

The ed-heading component maps typography tokens to semantic heading levels. It supports variant-based typography with smart defaults that automatically select a visual variant based on the tagName prop.

See the full list of heading variants, smart default mappings, and interactive examples in Storybook:

Browse Heading in Storybook →

Text Passage

The ed-text-passage component handles all prose typography — headings, paragraphs, lists, blockquotes, links, code blocks — so you never need custom font styles in consumer CSS.

<ed-text-passage> <h2>Section</h2> <p>Body text with <strong>bold</strong> and <a href="#">links</a>.</p> <ul> <li>List items</li> </ul> </ed-text-passage>

Browse Text Passage in Storybook →