font-family() and font-family(code).$content-readable-width as a variable to use to set the max width of copy to prevent blocks of text from spanning the width of the page in order to maintain readability.Heading (font-size(heading))
The heading should ideally be used once per page, as the title of the page with a font-weight of 900.
Section heading (font-size(section-heading))
The section heading can be used multiple times per page and should be used to signal distinct sections on a page.
Sub-heading (font-size(sub-heading))
The sub-heading can be used multiple times per page and should be used to signal a child section on a page.
Body (font-size(body))
The body should be used for large blocks of text; when the text is the primary focus and readability is the main concern. It can also be used as title text (when bold) when paired with primary text.
Label (font-size(label))
The label's primary use case is as a label for form input elements.
Primary (font-size())
The primary is our base font size.
Caption (font-size(caption))
The caption should only be used for text that is supplemental.