Font override classes
Guidance for using font override classes in Camden Digital Standards.
Use font override classes sparingly to change the default styling of text on a page.
You might need to set the font size or font weight of an element outside of the predefined heading and paragraph classes.
You can use the font override classes in your HTML or reference the typography mixins (govuk-font or govuk-font-size) in your own components.
Font size
The complete GOV.UK typography scale goes from 16px up to 80px on large screens. You can add these font size override classes to any other typographic class or element and they will change the font size.
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 |
Font weight
As with the font size, you can add a font weight override class to any other typographic class or element to change the font weight to regular or bold weight.
Text modifiers
| Sample | Class |
|---|---|
| Bold | govuk-!-font-weight-bold |
| Regular | govuk-!-font-weight-regular |
Bold text
Use bold text sparingly. Using too much bold text will make it difficult for users to know which parts of your content need their attention the most.
You can use bold to highlight critical information and emphasise particular words in a transaction.
For example, 'Your reference number is ABC12345678. Use this to track your application. Updates will be sent to name@example.com'