Forma 36

Typography

StorybookGithub
stable

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.

Table of contents

  1. Heading
  2. Subheading
  3. SectionHeading
  4. Paragraph
  5. DisplayText
  6. Typography wrapper

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