System ColorDesigner InfoEngineer Info

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.

This page aims to outline what typography styles were chosen, how they were chosen, and why they were chosen.

Design Tokens

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

TokenDescriptionValue
--fontFamily--sansThe sans-serif font family.Jost, sans-serif
--fontWeight--normalNormal font weight.400
--fontWeight--mediumMedium font weight, slightly more bold than normal.500
--fontWeight--boldBold font weight, much more bold than normal.700
--lineHeight--paragraphThe line-height value expected for paragraphs.1.5
--lineHeight--headlineThe line-height value expected for headlines.1.25

Remscale tokens

The rem scale is created exponentially and expected to be multiplied to 1rem in a calc() function.

TokenDescriptionValue
--remscale--xsExtra-small font size, only used in examples relating to font-size.51
--remscale--smSmall font size, used for captions and auxiliary text.714
--remscale--mdDefault font size, used for body text1
--remscale--lgLarge font size, used some less important headlines1.4
--remscale--xlExtra-large font size, used for important headlines1.96
--remscale--2xlDouble extra-large font size, used for the most important headlines2.744
--remscale--3xlTriple extra-large font size, only used in examples relating to font-size3.842

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.

Paragraph Text

TokenDescriptionValue
--textParagraph--fontFamilyThe font family for paragraphs.var(--fontFamily--sans)
--textParagraph--fontSizeThe font size for paragraphs.calc(var(--fontSize--md) * 1rem)
--textParagraph--fontWeightThe font weight for paragraphs.var(--fontWeight--normal)
--textParagraph--lineHeightThe line height for paragraphs.var(--lineHeight--paragraph)

Action Text

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.

TokenDescriptionValue
--textAction--fontFamilyThe font family for buttons, linksvar(--fontFamily--sans)
--textAction--fontSizeThe font size for buttons, links, this is adjusted for the text transformation at the component for buttonscalc(var(--fontSize--md) * 1rem)
--textAction--fontWeightThe font weight for buttons, linksvar(--fontWeight--medium)
--textAction--lineHeightThe line height for buttons, linksvar(--lineHeight--paragraph)

Label Text

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.

TokenDescriptionValue
--textLabel--fontFamilyThe font family for labelsvar(--fontFamily--sans)
--textLabel--fontSizeThe font size for labels, this is adjusted for the text transformation at the componentcalc(var(--fontSize--md) * 1rem)
--textLabel--fontWeightThe font weight for labelsvar(--fontWeight--medium)
--textLabel--lineHeightThe line height for labelsvar(--lineHeight--paragraph)

Primary Heading Text

TokenDescriptionValue
--textHeading1--fontFamilyThe font family for h1 elementsvar(--fontFamily--sans)
--textHeading1--fontSizeThe font size for h1 elementscalc(var(--fontSize--2xl) * 1rem)
--textHeading1--fontWeightThe font weight for h1 elementsvar(--fontWeight--bold)
--textHeading1--lineHeightThe line height for h1 elementsvar(--lineHeight--headline)

Secondary Heading Text

TokenDescriptionValue
--textHeading2--fontFamilyThe font family for h2 elementsvar(--fontFamily--sans)
--textHeading2--fontSizeThe font size for h2 elementscalc(var(--fontSize--xl) * 1rem)
--textHeading2--fontWeightThe font weight for h2 elementsvar(--fontWeight--bold)
--textHeading2--lineHeightThe line height for h2 elementsvar(--lineHeight--headline)

Teriary Heading Text

TokenDescriptionValue
--textHeading3--fontFamilyThe font family for h3 elementsvar(--fontFamily--sans)
--textHeading3--fontSizeThe font size for h3 elementscalc(var(--fontSize--lg) * 1rem)
--textHeading3--fontWeightThe font weight for h3 elementsvar(--fontWeight--medium)
--textHeading3--lineHeightThe line height for h3 elementsvar(--lineHeight--headline)

Quaternary Heading Text

TokenDescriptionValue
--textHeading4--fontFamilyThe font family for h4 elementsvar(--fontFamily--sans)
--textHeading4--fontSizeThe font size for h4 elementscalc(var(--fontSize--md) * 1rem)
--textHeading4--fontWeightThe font weight for h4 elementsvar(--fontWeight--medium)
--textHeading4--lineHeightThe line height for h4 elementsvar(--lineHeight--headline)

Caption Text

TokenDescriptionValue
--textCaption--fontFamilyThe font family for captionsvar(--fontFamily--sans)
--textCaption--fontSizeThe font size for captionscalc(var(--fontSize--sm) * 1rem)
--textCaption--fontWeightThe font weight for captionsvar(--fontWeight--normal)
--textCaption--lineHeightThe line height for captionsvar(--lineHeight--paragraph)

Quote Text

TokenDescriptionValue
--textQuote--fontFamilyThe font family for quotationsvar(--fontFamily--sans)
--textQuote--fontSizeThe font size for quotationscalc(var(--fontSize--lg) * 1rem)
--textQuote--fontWeightThe font weight for quotationsvar(--fontWeight--medium)
--textQuote--lineHeightThe line height for quotationsvar(--lineHeight--paragraph)

Curation

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.

font-size: 3xl
font-size: 2xl
font-size: xl
font-size: lg
font-size: md
font-size: sm
font-size: xs
Designer Info

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.

Engineer Info

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.

This might look confusing to how the scale is generated. Another way of looking at this is if we were to create this in JavaScript.

The pattern here is much easier to see and produces the same result. Similarly we divide the var(--typescale--factor) to make the font smaller. In JavaScript, this would just begin using negative numbers in the Math.pow() method.

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 1rem.

And finally the design-token is then applied within a declaration block of the appropriate CSS selector.

Usability

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.

Designer Info

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.

About face

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.

Designer Info

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.