Typography – Design Portal

Typography can help create clear hierarchies, organize information, and guide users through a product or experience.

Fonts

Metropolis

abcdefghijklmnopqrstuvwxyz012345678910

View on Google Fonts Download Font

Usage:For headings

Inter

abcdefghijklmnopqrstuvwxyz012345678910

View on Google Fonts Download Font

Usage:For body copy, descriptions, navigation

Font Stack

A font stack includes fallback system fonts for when the main font does not get loaded fast enough.

Heading Font

font-family: 'Metropolis', sans-serif;

Body Font

font-family: 'Inter', sans-serif;

Usage

Style	Use for	Color	Weight	Style	Size Mobile	Size Desktop
H1	Hero headings, post titles	Primary	700	Normal	1.5625rem	3rem
H2	Section headings, content headings	Primary	700	Normal	1.3rem	1.656rem
H3	Post module headings, sidebar headings, content headings	Primary	600	Normal	1.1875rem	1.3125rem
p	Article content, post description, etc.	Black	400	Normal	1rem	1.125rem
blockquote	Quotations	Black	400	Normal	1rem	1.125rem

Formatting

Style	Use for
Bold	Use `strong` to emphasize text.
Italics	Use `em` to italicize text.
Link	Use when you are linking just a few words of text, or when a link is standalone.
1. Ordered List	Use ordered lists to group items in a pre-determined order.
• Unordered List	Use unordered lists to group related items.
Blockquote	Use with a quotation that is typically longer than a few lines.

Line Length

Set the reading environment to suit the reader. Wide lines of text are difficult to read and make it harder for people to focus. While there is no right way to measure the perfect width for text, a good goal is to aim for between 60 and 100 characters per line including spacing. Setting an optimal line length will break up content into easily digestible information.

Please increase your window size to view line length example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc pulvinar nibh aliquet. Integer congue velit, nisi, et orci. Pretium praesent viverra convallis duis augue sodales dolor. Morbi vitae turpis elit, arcu in phasellus cursus. Elit amet lectus et commodo, et libero aenean. In et tincidunt mauris ut at erat. Diam integer metus arcu dui senectus nunc nibh ultricies. Facilisis vitae purus mauris aenean ultrices tellus eget. Nec vel nunc, eget urna tristique lorem. Eu tempus faucibus sed nunc non semper amet. Sit non feugiat non adipiscing.

Line Heights

Ensure an appropriate line height is set, to improve the reading experience. A line-height of 1.5 to 1.6 is the sweet spot for most cases, but may change depending on the typeface, and the line length.

Importing Web Fonts into the Unified theme

Want to use a fancy web font? We have access to Adobe TypeKit and Google fonts, BUT all fonts must be downloaded, and hosted locally to use.
In the unified theme, you will need to add any new web fonts (File type: WOFF + WOFF2) to build/themes/unified/assets/scss/fonts/font-name/.
A unique SCSS file is created for each font-family, and contains an @font-face rule, with a mixin to determine which weights are needed (Roboto used here as an example).

$fontPath: '../../../../assets/scss/fonts/roboto';

// Font weights available: 400 (regular), 400 (italic), 700 (bold)
@mixin font-family($style: normal, $weight) {
  @font-face {
    font-family: 'Roboto';
    font-style: $style;
    font-weight: $weight;
    font-display: swap;

    @if $weight == 400 and $style == italic {
      src: local(''),
      url('#{$fontPath}/roboto-v29-latin-italic.woff2') format('woff2'),
      url('#{$fontPath}/roboto-v29-latin-italic.woff') format('woff');
    } @else if $weight == 400 and $style == normal {
      src: local(''),
      url('#{$fontPath}/roboto-v29-latin-regular.woff2') format('woff2'),
      url('#{$fontPath}/roboto-v29-latin-regular.woff') format('woff');
    } @else if $weight == 700 and $style == normal {
      src: local(''),
      url('#{$fontPath}/roboto-v29-latin-700.woff2') format('woff2'),
      url('#{$fontPath}/roboto-v29-latin-700.woff') format('woff');
    } @else {
      @error "Unknown weight #{$weight}.";
    }
  }
}

Then you can @use the font file to import it, and @include the mixin into the child themes base partial: build/themes/unified/themes/theme-name/assets/scss/_base.scss

@use '../../../../assets/scss/fonts/roboto/roboto';

@include roboto.font-family(normal, 400);
@include roboto.font-family(italic, 400);
@include roboto.font-family(normal, 700);

Typography Crimes

Don't

Use unapproved font families.

More Best Practices

Make sure your typography has sufficient color contrast. See accessibility for more info.
When sizing elements, its recommended to use REM units. These allow elements to scale based on a users brower font size.
The base font size for typography is 16px, which is equal to 1rem. All elements on the page scale based on this root font-size.
Try to stick to quarter units to simplify spacing values, font-sizes etc. ie. 0.25rem, 0.5rem, 0.75rem, 1rem.
Please limit the use of web fonts if possible, to help with site speed. Use no more than 2 font families.
Please ensure headings and copy have appropriate kerning set.