Page cover

Typography

How to use global typography styles and text modifiers.

HTML Selectors

All margins are removed from the default typography elements, giving you full control over spacing. We do not recommend styling the All Paragraphs selector, which overrides inheritance on <p> elements.


Headings

The Base System uses the standard <h1> to <h6> elements.

If you want the visual style of a heading without using a heading element, you can use matching heading classes instead (H1 Heading, H2 Heading, etc.) .


Paragraph

Paragraph classes (Paragraph Small, Paragraph Large, etc.) serve as the primary body text.


Optional Typography

The Base System includes additional optional text styles for common use cases.

Subheadings

Useful for smaller headings for elements like cards, feature highlights, or labels.

Overlines

Overlines (also known as Eyebrows, Top Labels, or Over Text) are stylized text used for small labels.


Text Modifiers

You can customize typography styles by applying combo classes to modify text colors, weights, styles and more.

If you find yourself stacking many modifiers repeatedly, consider creating a new class to simplify things.

Last updated