Version
has been released! Read the upgrade guide

Typography

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

All MOD.UK Design System applications are set in Lato. We also provide the System Font Stack as a fallback to Lato in case a system doesn't support it:

1system-ui,
2BlinkMacSystemFont,
3-apple-system,
4Segoe UI,
5Roboto,
6Oxygen,
7Ubuntu,
8Cantarell,
9Fira Sans,
10Droid Sans,
11Helvetica Neue,
12sans-serif;

1Typography Scale

SizeValue
display-xl3rem
display-l2.25rem
display1.875rem
xxl1.5rem
xl1.25rem
l1.125rem
m1rem
base0.875rem
s0.75rem
xs0.625rem
xxs0.5rem

2Using Fonts

To reference typography sizes within your styles, use the font-size() mixin. The mixin takes the Named Size string as a value, returning the correct rem value.

1@include font-size("m");
2// returns
3font-size: 1rem;

Utility Classes

The CSS Framework's Typography variables are available in Utility Class form, allowing the standard font sizes to be overridden. All Utility classes are prefixed with the namespace .rn_. This is to prevent them clashing with any custom styles you author.

The class syntax follows this pattern:

.rn_[Property]-[Size]

PropertySizeValue
text-xxs0.5rem
xs0.625rem
s0.75rem
base0.875rem
m1rem
l1.125rem
xl1.25rem
xxl1.5rem
display1.875rem
display-l2.25rem
display-xl3rem

For example, adding a class of .rn_text-xl would result in the following:

margin-top: 1.5rem;

To use the Utility classes with media queries, add the required breakpoint it:

.m:rn_text-xl

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright