Typography
Typefaces #
Most text — including body copy, interface text, and product text — is set in a basic system font stack. Headings and blockquotes are set in the brand font for the project (for instance, Zodiak for UXcellence) with fallbacks to appropriate matching fonts. Code will be set in a handful of popular monospace fonts and then the general system monospace.
Defaults with fallbacks #
-
Sans Serif
system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Ubuntu, ui-sans-serif, Arial, sans-serif -
Serif
'Zodiak', Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif -
Monospace
Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Inconsolata', ui-monospace, Monaco, Consolas, monospace
Rhythm & scale #
Baseline rhythm #
Spacing and line-height are set up to approximately fit type within an 8 pixel baseline grid at max screen width. So, for instance, the <h2> font size scales from 49 to 61 pixels. The line-height for that element scales from 3rem (48 pixels) to 4rem (64 pixels) or slightly smaller than the font size to slightly larger.
Text blocks like paragraphs, headings, quotes, and more have a bottom margin that also fits within the 8 pixel grid (and scales down in proportion to the text at lower resolutions).
Modular typographic scale #
Fonts are set at a 1.25 (major third) modular scale, using the type calculator from Utopia to dynamically adjust default type sizes from 16 pixels on mobile viewports to 20 pixels on desktop. This means that each step up or down is one and a quarter size larger or smaller respectively.
Seeing it in action #
Below are samples of the basic text elements on top of an 8 pixel grid. At a desktop resolution and 100% text zoom in the browser, you can see how everything aligns nicely with the grid by default. At different resolutions or browser text zooms, exact alignment to the baseline will most likely be off, but the rhythm will still persist.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a large paragraph. These should be used sparingly, in places like an introductory paragraph, a short subtitle, or a brief product description.
This is a normal blockquote to highlight text from someone else. Normal blockquotes may contain several sentences to several paragraphs. Whenever possible, link to the source of the quote and cite the author(s). Someone else
This is a paragraph. There are many others like it, but this one is mine. Paragraphs are the most basic organization of larger bodies of text.
This is small text. It's still fairly readable. It is useful for data labels and supplemental help text.
And this is tiny text. It is readable, but shouldn't draw much attention. Use it very sparingly.
- Unordered lists are for items.
- Where the order doesn't matter.
- Like an ingredient list.
- Here's a nested list.
- The bullets and margin should change.
- Sometimes lists may nest multiple times
- Like this
- For example
This is a pull quote - it has larger text to emphasize an idea. Pull quotes are often shorter. Another Person
- Ordered lists are for items.
- Where the order does matter.
- Like a recipe.
- Here's a nested list.
- The bullets and margin should change.
- Sometimes lists may nest multiple times
- Like this
- For example