Overview

By default, you must use the GOV Frontend typography and GDS Transport typeface for sites on a <>.service.gov.uk domain.

If your site is on <>.education.gov.uk, you must use the inter typeface.

The only exception to this is where you are using education.gov.uk to host a service in private beta and will eventually be on <>.service.gov.uk domain. You're fine to use the GDS Transport and GOV.UK header in this instance.

If you're unsure, contact DesignOps.

To ensure your service meets the requirements for when your service isn't on GOV.UK, you should use the following guidance.

Typeface vs font

Typeface
This is the name given to a specific design of letting, in this case Inter is a typeface. Other examples of typefaces include Aptos, Arial, and Helvetica.
Font
Fonts are variations of the typeface, for example, light, regular, bold, and style, for example, italic, underlined.

Import the Inter typeface

We are migrating to use the typeface Inter in our products and services that are not provided on GOV.UK.

Inter is a web-based, open source typeface. If your product is available to the internet you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical typeface in your build. Styles will drop to system fonts if the internet is not available.

If using the GOV.UK prototype kit, create a settings.scss file in your /app/assets/sass folder for this step.
This guidance is accurate up to and including version 13.16.2 of the GOV.UK Prototype kit.

If something doesn't work contact DesignOps for help so we can understand the problem and improve guidance where possible.

settings.scss or application scss/css file

Add the following code to the file.

@import url('https://rsms.me/inter/inter.css');
$govuk-font-family: 'Inter', sans-serif;

If you want table data to use the Inter font feature for tabular numbers, slashed zero and alternate digits, add these to your scss/css file. You can then add these classes to your table headers and cells as required.

Adding alternative number formatting

Add the following code to the file.

.tableNumbers{
    font-feature-settings: 'tnum' 1, 'ss01' 1, 'zero' 1;
}

All styles which use the GDS Transport typeface will now be replaced with the Inter typeface.

You do not need to use different classes.

Typographic styles

These styles are the same as the GOV.UK Design System typography examples. They are here to demonstrate how the Inter typeface is applied to core GOV typography styles.

Headings

Sample Class
XL heading govuk-heading-xl
Large heading govuk-heading-l
Medium heading govuk-heading-m
Small heading govuk-heading-s

Headings with captions

Sample Class
XL captionXL heading govuk-caption-xl
Large captionLarge heading govuk-caption-l
Medium captionMedium heading govuk-caption-m
Small captionSmall heading govuk-caption-s

Body

Sample Class
Body govuk-body
Large body govuk-body-l
Small body govuk-body-s

Text modifiers

Sample Class
Bold govuk-body govuk-!-font-weight-bold

Font size modifiers

Sample Class
Size 80 govuk-body govuk-!-font-size-80
Size 48 govuk-body govuk-!-font-size-48
Size 36 govuk-body govuk-!-font-size-36
Size 27 govuk-body govuk-!-font-size-27
Size 24 govuk-body govuk-!-font-size-24
Size 19 govuk-body govuk-!-font-size-19
Size 16 govuk-body govuk-!-font-size-16
Size 14 govuk-body govuk-!-font-size-14