Skip to content

Digital Services Design Language typography reference

Foundational tokens

Font families

Fonts are imported as variable fonts from Google Fonts.

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400..700&family=Noto+Sans:ital,wght@0,400..600;1,400..600&family=Source+Code+Pro&display=swap');

Weights and styles imported

All three fonts are variable

  • Space Grotesk: 400–700, regular only (no italic available)
  • Noto Sans: 400–600, regular and italic
    • We use the 600 weight for bold instead of the typical 700.
  • Source Code Pro: 400, regular only

Font stack variables

:root {
  --dsdl-heading-font-stack: 'Space Grotesk', system-ui;
  --dsdl-body-font-stack: 'Noto Sans', system-ui;
  --dsdl-monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

Font size

:root {
  --text-base:    16;
  --text-xxs:     calc(10 / var(--text-base) * 1rem);
  --text-xs:      calc(12 / var(--text-base) * 1rem);
  --text-s:       calc(14 / var(--text-base) * 1rem);
  --text-m:       calc(16 / var(--text-base) * 1rem);
  --text-l:       calc(20 / var(--text-base) * 1rem);
  --text-xl:      calc(24 / var(--text-base) * 1rem);
  --text-xxl:     calc(32 / var(--text-base) * 1rem);
  --text-xxxl:    calc(40 / var(--text-base) * 1rem);
  --text-xxxxl:   calc(48 / var(--text-base) * 1rem);
  --text-display: calc(64 / var(--text-base) * 1rem);
}

Our font size calculations based on browsers’ default font size of 16px. That value is assigned to --text-base and then used in the gnarly calculation to determine the appropriate rem value, given the desired pixel value.

Line height

:root {
  --line-height-extra-tight: 1.125;
  --line-height-tight:       1.25;
  --line-height-normal:      1.5;
  --line-height-loose:       1.625;
}

Body color

:root {
  --dsdl-body-color: var(--dsdl-black);
}

Core type styles

The above foundations are used in combination to create our matrix of twelve core type styles – three sizes each in the categories of headlines, titles, subtitles, and body.

Large Medium Small
Headline 
var(--text-headline-l)
font-size:
40px
font-weight:
700
line-height:
1.25
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-headline-m)
font-size:
32px
font-weight:
700
line-height:
1.25
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-headline-s)
font-size:
24px
font-weight:
700
line-height:
1.25
A wizard’s job is to vex chumps quickly in fog.
Title 
var(--text-title-l)
font-size:
32px
font-weight:
600
line-height:
1.25
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-title-m)
font-size:
24px
font-weight:
600
line-height:
1.25
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-title-s)
font-size:
16px
font-weight:
600
line-height:
1.5
A wizard’s job is to vex chumps quickly in fog.
Subtitle 
var(--text-subtitle-l)
font-size:
24px
font-weight:
500
line-height:
1.25
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-subtitle-m)
font-size:
20px
font-weight:
500
line-height:
1.5
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-subtitle-s)
font-size:
16px
font-weight:
500
line-height:
1.5
A wizard’s job is to vex chumps quickly in fog.
Body 
var(--text-body-l)
font-size:
16px
font-weight:
400
line-height:
1.5
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-body-m)
font-size:
14px
font-weight:
400
line-height:
1.625
A wizard’s job is to vex chumps quickly in fog.
 
var(--text-body-s)
font-size:
12px
font-weight:
400
line-height:
1.625
A wizard’s job is to vex chumps quickly in fog.

Extras

  • Display

    var(--text-display)
    font-size:
    64px
    font-weight:
    600
    line-height:
    1.125
    A wizard’s job is to vex chumps quickly in fog.

  • Small caps

    var(--text-small-caps)
    font-size:
    12px
    font-weight:
    400
    line-height:
    1.625
    text-transform:
    uppercase
    A wizard’s job is to vex chumps quickly in fog.

  • Caption

    var(--text-caption)
    font-size:
    12px
    font-weight:
    400
    line-height:
    1.625
    A wizard’s job is to vex chumps quickly in fog.

  • Footnote

    var(--text-footnote)
    font-size:
    10px
    font-weight:
    400
    line-height:
    1.625
    A wizard’s job is to vex chumps quickly in fog.

  • Code

    var(--text-code)
    font-size:
    16px
    font-weight:
    400
    line-height:
    1.625
    A wizard’s job is to vex chumps quickly in fog.