Just my type
Typography is a foundational aspect of any design system as it will be the key method of providing users information as they navigate through an application or system. It should work well with other parts of the system like color and spacing.
The typography design tokens come in a few tiers which allow for a separation of concerns. The first tier of tokens (genitive, relating to each other) describe all of the typography variations we expect to use throughout the site. The second tier of tokens (locative, determined by placement) describe all of the components and properties we expect to use these tokens. Additionally, if design tokens outside of this system followed these patterns, they should also include namespacing (a prefix) to differentiate from other variables that may appear in the application.
Genitive Typography Tokens
These tokens describe the general family that possess all the typography values as human-readable names. They should not be applied directly to components or styles but instead referenced as the value for locative typography tokens.
General font property tokens
|The sans-serif font family.|
|Normal font weight.|
|Medium font weight, slightly more bold than normal.|
|Bold font weight, much more bold than normal.|
|The line-height value expected for paragraphs.|
|The line-height value expected for headlines.|
The rem scale is created exponentially and expected to be multiplied to
1rem in a
|Extra-small font size, only used in examples relating to font-size|
|Small font size, used for captions and auxiliary text|
|Default font size, used for body text|
|Large font size, used some less important headlines|
|Extra-large font size, used for important headlines|
|Double extra-large font size, used for the most important headlines|
|Triple extra-large font size, only used in examples relating to font-size|
Locative Typography Tokens
These tokens describe the place where the typography is intented to be used. These are applied directly to CSS style properties of components. Font sizes can be sampled within the curation section of this page.
|The font family for paragraphs.|
|The font size for paragraphs.|
|The font weight for paragraphs.|
|The line height for paragraphs.|
Actions also are set to all capitals to differentiate from body text. Due to this modification, the text is set slightly smaller than the medium size.
|The font family for buttons, links|
|The font size for buttons, links, this is adjusted for the text transformation at the component for buttons|
|The font weight for buttons, links|
|The line height for buttons, links|
Labels also are set to all capitals to differentiate from body text. Due to this modification, the text is set slightly smaller than the medium size.
|The font family for labels|
|The font size for labels, this is adjusted for the text transformation at the component|
|The font weight for labels|
|The line height for labels|
Primary Heading Text
|The font family for h1 elements|
|The font size for h1 elements|
|The font weight for h1 elements|
|The line height for h1 elements|
Secondary Heading Text
|The font family for h2 elements|
|The font size for h2 elements|
|The font weight for h2 elements|
|The line height for h2 elements|
Teriary Heading Text
|The font family for h3 elements|
|The font size for h3 elements|
|The font weight for h3 elements|
|The line height for h3 elements|
Quaternary Heading Text
|The font family for h4 elements|
|The font size for h4 elements|
|The font weight for h4 elements|
|The line height for h4 elements|
|The font family for captions|
|The font size for captions|
|The font weight for captions|
|The line height for captions|
|The font family for quotations|
|The font size for quotations|
|The font weight for quotations|
|The line height for quotations|
The design system adheres to a modular typescale using an augmented fourth (1.4) as the scaling factor. Each step is identified using T-shirt sizing where the default is set to medium 1rem (16px). Each level past "extra" is numbered in that direction. You can use the control below to view how the factor affects the type on the site.
Responsive Typography Decisions
In the current state of the system, the typography is not responsive to the viewport or device. While the technique outlined in css-only fluid modular type scales to manage font-size and line-height is aligned with the overall approach of styles within the system, the expectation of having different scale factors between viewport sizes does not.
Instead, there may exist a future where one breakpoint adjusts font size between desktop and mobile as recommended within Responsive Typography: The Basics but for the moment there is only one scale with defines one set of sizes. The rest is left up to the browser and user settings of the device.
The system has also opted to not tame line-height by calculating the offset between the line-height box and the font leading as it was believed the effort outweighs the benefit.
Computing the scale in CSS
The typescale is set using the methods followed in A Responsive Guide to Type Sizing with a few modifications.
The first bit sets up the variables that will affect the scale.
Then we create larger powers of the scale by multiplying the factor by a former result.
The pattern here is much easier to see and produces the same result. Similarly we divide the
For the purposes of our system, all fonts (and spacing for that matter) is set using
(r)em units. Each font size design-token is then set using the T-shirt size multiplied by
And finally the design-token is then applied within a declaration block of the appropriate CSS selector.
In terms of accessibility, the system ensures that the user can modify the font size in their device's user settings to affect the readability as necessary. Font sizes are set in "rem" units; relative to the "root" (ie. page) font size so the font size can scale appropriately.
Many of the guidelines on accessible text are found in the article The controversy of accessible type.
There’s no official enforced minimum size by itself. It is common for accessibility measurements to include color and other properties to determine whether text is deemed accessible. A good baseline is recommended to set at 16px, but more specifically set to the browser's default.
Selecting the proper font face is also important to readability. The Jost* font family was selected as geometric fonts are of "Humanist construction".
These are beautiful and legible fonts, designed to perfection. Eugene Sadko, Guide to 10 font characteristics and their use in design
It is also a web performance benefit to only choose one font versus more than one. In order to differentiate between body text and headline text using one font, additional modifications such as size, kerning, leading and, casing can contribute to these variations.
Many recommendations in accessibility make mention to refrain from having text in all caps. This seems to be specifically when found within reading bodies of text. The areas where all caps is used throughout this system are done in order to slow the user down to read the label or action before continuing. This delays an important message to let the user think for a moment about how to continue.