Typography

  1. AscenderThe upward vertical stroke found in certain lowercase letters that extend beyond either the cap height or baseline.
  2. X-heightRefers to the height of the lowercase x for a typeface, and it indicates how tall or short each glyph in a typeface will be.
  3. Line heightThe vertical distance between lines of text.
  4. DescenderThe downward vertical stroke in letters.
  5. BaselineThe baseline is the invisible line upon which a line of text rests.
  6. Font heightThe total height of the text including ascender and decender.

Best practices

When to use

  • Use the Typography component for designs to ensure consistency.
  • Use instead of the Figma text and styles

When NOT to use

  • Do not use Typography component in other components, instead use UI Type

Symantics vs Styles

The definitions we cover here refer to typographic styles. It's important understand the separation of styles and semantics:

  • The semantics of a page informs the hierarchy and relationships, making text logically structured for screen readers and other assistive technologies.
  • Styles are used to ensure optimal readability and legibility, as well as convey our brand.

Without semantically correct HTML, our content won't be accessible. Consider for example the following guidance on headings:

  • The page headings must follow an order, starting from H1 to H6.
  • A page must only have one H1 element.
  • Ensure heading levels are sequential: H1, H2 then H3. Not H1, H3 then H2.

Variants

Display

Display typography is intended to be used in login, 404 and other similar pages which do not include the application structure. Display variants use the <h1> tag by default.

  • Display1
  • Display2
  • Display3

Heading

Heading typography is intended to show the content hierarchy and is important for improving the scanning and reading experience for our users.

  • Heading1
  • Heading2
  • Heading4
  • Heading5
  • Heading6

Heading - Mono

Heading typography is intended to show the content hierarchy and is important for improving the scanning and reading experience for our users. Theres are the monospace variations.

  • Heading2
  • Heading3
  • Mono