Skip to content

Instantly share code, notes, and snippets.

@ivancis

ivancis/keirin_typography.md

Created November 2, 2021 14:47
Show Gist options
  • Save ivancis/98894baf622353f09924ff0a5858900e to your computer and use it in GitHub Desktop.
Save ivancis/98894baf622353f09924ff0a5858900e to your computer and use it in GitHub Desktop.
Download ZIP
Keirin: Typography
Raw
keirin_typography.md

Typography

token fontFamily fontSize/lineHeight Comment
heading-01 Roboto/SF Pro 28/32 Main headline. This should only be used once per view. Also used for empty states and feature introductions.
heading-02 Roboto/SF Pro 24/32 This is for layout headings.
heading-03 Roboto/SF Pro 22/32 This is for layout headings.
heading-04 Roboto/SF Pro 18/24 This is for layout headings.
heading-05 Roboto/SF Pro 16/24 This is for component and layout headings.
heading-06 Roboto/SF Pro 16/24 This is for component and layout headings.
paragraph-01 Roboto/SF Pro 16/24 Use this for comfortable reading, body copy of more than four lines.
paragraph-02 Roboto/SF Pro 14/16 Short paragraphs with no more than four lines. Commonly used in components.
smallprintHeading Roboto/SF Pro 12/16 For components and small print heading.
smallprint Roboto/SF Pro 12/16 For helper texts, usually on footnotes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment