Forma 36 Logo

Typography

View Typography on GitHub | View Typography in Storybook

Forma 36 includes a number of typography components, including a wrapper to automatically add spacing to typography elements.

Typography components are not tied to specific semantic elements - it's possible to render any typography component as a h1, h2, h3, h4, h5, h6 or p element.

Heading

Heading

Subheading

Subheading

SectionHeading

SectionHeading

Paragraph

Paragraph

DisplayText

DisplayText is used to display text in special scenarios - example usages of DisplayText include empty states, promotional/featured items, etc.

DisplayText should not be used as a replacement for headings/page titles (use the Heading component instead).

DisplayText (large)

DisplayText

Typography wrapper

The <Typography> component should be used to wrap a group of typography components (<Heading>, <Paragraph>, etc) for cases where you wish to display these components with default margins.

We follow the principle that a component should only be responsible for its own internal spacing - never its external spacing. This means that we're flexible in where our components can be used without having to override margins.

My heading

My paragraph