Design System
Headings and Body
Headings
GOV.UK v6 font-sizes are taken from source (rem, converted to px at 16px base). GOV.UK's line-heights are approximate and computed from unitless ratios. PLOS values are from plos-overrides.min.css. Font-sizes and line-heights are defined in rem, with px equivalents shown for convenience.
| Class | Figma label | GOV.UK mobile | GOV.UK desktop | PLOS mobile | PLOS desktop | Example | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| font-size | line-height | font-size | line-height | font-size | line-height | font-size | line-height | |||
govuk-heading-xl |
H1 | 2rem / 32px | 35px | 3rem / 48px | ~50px | 2rem / 32px | 2.5rem / 40px | 2.625rem / 42px | 3rem / 48px | The quick brown fox |
govuk-heading-l |
H2 | 1.6875rem / 27px | ~30px | 2.25rem / 36px | ~40px | 1.3125rem / 21px | 1.75rem / 28px | 1.75rem / 28px | 2.25rem / 36px | The quick brown fox |
govuk-heading-m |
H3 | 1.3125rem / 21px | ~25px | 1.5rem / 24px | 30px | 1.25rem / 20px | 1.75rem / 28px | 1.3125rem / 21px | 1.75rem / 28px | The quick brown fox |
govuk-heading-s |
H4 | 1.1875rem / 19px | ~25px | 1.1875rem / 19px | ~25px | 1.125rem / 18px | 1.5rem / 24px | 1.125rem / 18px | 1.75rem / 28px | The quick brown fox |
Body
GOV.UK v6 font-sizes are taken from source (rem, converted to px at 16px base). GOV.UK's line-heights are approximate and computed from unitless ratios. PLOS values are from plos-overrides.min.css. Font-sizes and line-heights are defined in rem, with px equivalents shown for convenience.
| Class | Figma label | GOV.UK mobile | GOV.UK desktop | PLOS mobile | PLOS desktop | Example | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| font-size | line-height | font-size | line-height | font-size | line-height | font-size | line-height | |||
govuk-body-l / govuk-body-lead |
Body large | 1.3125rem / 21px | ~25px | 1.5rem / 24px | 30px | 1.125rem / 18px | 1.75rem / 28px | 1.125rem / 18px | 1.75rem / 28px | The quick brown fox jumps over the lazy dog. |
govuk-body / govuk-body-m |
Body | 1.1875rem / 19px | ~25px | 1.1875rem / 19px | ~25px | 1rem / 16px | 1.5rem / 24px | 1rem / 16px | 1.5rem / 24px | The quick brown fox jumps over the lazy dog. |
govuk-body-s |
Body small | 1rem / 16px | 20px | 1rem / 16px | 20px | 0.875rem / 14px | 1.5rem / 24px | 0.875rem / 14px | 1.5rem / 24px | The quick brown fox jumps over the lazy dog. |