1

Typography (Fonts) & Spacing

Soft Launch Alert: The Digital Guidelines are a work in progress and subject to updates. Your feedback is highly valued and will help us improve! Digital Guidelines Feedback (Google Form)

Please visit Inclusive Branding for an exhaustive list of acceptable fonts.

  • Responsive font sizing (em, rem) should be used when possible.
  • A typographic scale should be used. These define the ratios between font sizes and help to create distinct visual hierarchies.
    • Appropriate Ratios: Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.33), and Augmented Fourth (1.414).
    • Appropriate Alternatives: USWDS default scale.
    • Inappropriate Ratios: For most projects, insufficient or dramatic size differences could be harmful. For this reason, we do not usually recommend Golden Ratio (1.618), Minor Second (1.067), Major Second (1.124), or Perfect Fifth (1.5).
  • For a majority of solutions, a base font size of 16 to 18px should be used. Regardless of the base size used, you should ensure that no rendered font (on any device) is less than the equivalent of 12px.
  • Line spacing should be reasonable and, typically, 1.5 times the font size. Normal line spacing is around 1.2 for most user agents; this may be "okay" for some elements, but your body text should usually be 1.5. If your line height is less than 1.5, users should be able to increase it (using plugins, site controls, or similar) to at least 1.5 without losing content or functionality. Unitless units (just a number) should be preferred over relative (length, percentage, etc.) units.
  • Letter and word spacing should both be normal or near normal. Extreme spacing (condensed or expanded) should not be used. Relative spacing (rem, em) is strongly recommended, but percentage values must be avoided due to a lack of browser support. Ch units should also be avoided as they may contribute to inconsistent experiences and have variable browser support.
    • Letter spacing. Users should have the option of increasing letter spacing to at least 0.12 times the font size without a loss of content or functionality.
    • Word spacing. Users should be able to adjust word spacing to at least 0.16 times the font size without losing content or functionality.

Examples

If possible, your approach to typography should be responsive. Font sizes should adjust based on the screen size of the device that a person is using. Fonts should be brand compliant.

  • Museo Slab is preferred and recommended for headings (especially H1). Museo is not a traditional web font and is typically imported or uploaded. If you are unable to use Museo, you can use an alternative (like Trebuchet).
  • Atkinson Hyperlegible is a great choice for a default or body font. Like Museo, it also needs to be imported or uploaded. Other strong choices include Open Sans and Trebuchet.

Previews

Preview the scale example provided on Utopia or Fluid Type Scale (with Atkinson Hyperlegible).

CSS

In the example below, progressive base font sizes and typographic scales are used to support legible and positive experiences across devices. The scale in use for mobile devices (320px) is Major Third. It progresses up to Augmented Fourth on widescreen devices (1400px).

Clamp (Recommended)

:root {
  /* Step -1: 12.8px → 12.7298px */
  --step--1: clamp(0.7956rem, 0.8013rem + -0.0065vw, 0.8rem);
  /* Step 0: 16px → 18px */
  --step-0: clamp(1rem, 0.963rem + 0.1852vw, 1.125rem);
  /* Step 1: 20px → 25.452px */
  --step-1: clamp(1.25rem, 1.149rem + 0.5048vw, 1.5908rem);
  /* Step 2: 25px → 35.9891px */
  --step-2: clamp(1.5625rem, 1.359rem + 1.0175vw, 2.2493rem);
  /* Step 3: 31.25px → 50.8886px */
  --step-3: clamp(1.9531rem, 1.5894rem + 1.8184vw, 3.1805rem);
  /* Step 4: 39.0625px → 71.9565px */
  --step-4: clamp(2.4414rem, 1.8323rem + 3.0457vw, 4.4973rem);
  /* Step 5: 48.8281px → 101.7465px */
  --step-5: clamp(3.0518rem, 2.0718rem + 4.8999vw, 6.3592rem);
}

Locks (Calculations)

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1400;
  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}
@media screen and (min-width: 1400px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --f--1-min: 12.80;
  --f--1-max: 12.73;
  --step--1: calc(
    ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
      var(--fluid-bp)
  );
  --f-0-min: 16.00;
  --f-0-max: 18.00;
  --step-0: calc(
    ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );
  --f-1-min: 20.00;
  --f-1-max: 25.45;
  --step-1: calc(
    ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
      var(--fluid-bp)
  );
  --f-2-min: 25.00;
  --f-2-max: 35.99;
  --step-2: calc(
    ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
      var(--fluid-bp)
  );
  --f-3-min: 31.25;
  --f-3-max: 50.89;
  --step-3: calc(
    ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
      var(--fluid-bp)
  );
  --f-4-min: 39.06;
  --f-4-max: 71.96;
  --step-4: calc(
    ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
      var(--fluid-bp)
  );
  --f-5-min: 48.83;
  --f-5-max: 101.75;
  --step-5: calc(
    ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) *
      var(--fluid-bp)
  );
}

USWDS

@use "uswds-core" with (
  $theme-respect-user-font-size: true,
  $theme-font-type-sans: "Atkinson Hyperlegible",
/* Atkinson is a sans-serif font. We are taking advantage of the existing sans variable. */
  $theme-font-type-mono:   'Consolas',
  $theme-font-type-serif:  'Museo Slab', 
  /* Depending on how you import or use, "museo-slab" may be the correct reference */
  $theme-font-role-ui:       'sans',
  $theme-font-role-heading:  'serif',
  $theme-font-role-body:     'sans',
  $theme-font-role-code:     'mono',
  $theme-font-role-alt:      'serif',
);

Resources

Fonts & Guides

Tools We Used

  • Utopia's Fluid Type Scale Calculator. This resource enables you to generate CSS and SCSS on the fly and visualize results. It also provides great information about potential WCAG conformance for SC 1.4.4.
  • Fluid-Type-Scale (clamp with fallbacks). Get ready-to-use CSS, preview your scale on multiple widths, and experiment with different fonts. Atkinson Hyperlegible and other alternative brand fonts are available (Noto, Open Sans, etc.).

Typographic Scale Tools