diff --git a/packages/website/content/tokens/typography.mdx b/packages/website/content/tokens/typography.mdx index 6981d37afd..fc7a05b219 100644 --- a/packages/website/content/tokens/typography.mdx +++ b/packages/website/content/tokens/typography.mdx @@ -11,7 +11,7 @@ Typography is a foundational element in UI design. Good typography establishes a Forma 36 enables users to create clean, efficient user interfaces that utilize system UI fonts. -### System UI font family: +### System UI font family ![Typefaces demonstration, San Francisco, Lucida Grande, Neue Helvetica, Arial, and Segoe UI](/typeface.png) @@ -20,7 +20,7 @@ Forma 36 uses system UI fonts. System UI fonts refer to the fonts used to render **San Francisco** appears on Safari (Mac OS X and iOS); **Neue Helvetica** and **Lucida Grande** appears on older versions of Mac OS X; **Segoe UI** targets Windows and Windows phone; **Arial** is available on almost all operating systems. -### Tokens +### Typeface tokens @@ -77,7 +77,7 @@ Avoid using Display Large as a replacement for headings. In these cases, use the Font size: **35px** = **2.188rem** - Line Height: **44px** = **2.75rem** - Weight: **700** -### Tokens +### Font tokens #### Font base @@ -95,8 +95,6 @@ Line height can be described as a vertical padding around letters on each line. The Forma 36 line height is defined by rem, which forces the line height to correspond to the root font size. -### Tokens - ### Consistency