Comic Relief uses Montserrat and Anton; the latter for headings, the former of body copy, labels etc.

Fonts



Type Sizes

All type sizes and line heights come from a typographic scale, using multiples of 8.



Headings

There are a range of heading sizes from H1 to H3, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.

'Title' Header 1

.text--title (Used for headers and landing pages, noted as 'Title' H1 in the Design System)
Current breakpoint: LG - font-size: 100px / line-height: 104px Current breakpoint: MD - font-size: 100px / line-height: 104px Current breakpoint: SM - font-size: 54px / line-height: 62px


Header 1

Current breakpoint: LG - font-size: 64px / line-height: 72px Current breakpoint: MD - font-size: 64px / line-height: 72px Current breakpoint: SM - font-size: 42px / line-height: 48px


Header 2

Current breakpoint: LG - font-size: 42px / line-height: 48px Current breakpoint: MD - font-size: 42px / line-height: 48px Current breakpoint: SM - font-size: 34px / line-height: 40px


Header 3

Current breakpoint: LG - font-size: 26px / line-height: 32px Current breakpoint: MD - font-size: 26px / line-height: 32px Current breakpoint: SM - font-size: 26px / line-height: 32px



Copy, labels etc.

I am a standard paragraph, also p.text--body for CMS reasons: lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standard paragraph, p.text--body
Current breakpoint: LG - font-size: 20px / line-height: 32px Current breakpoint: MD - font-size: 20px / line-height: 32px Current breakpoint: SM - font-size: 15px / line-height: 24px



I am a small paragraph, p.text--body-small: lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standard paragraph, p.text--body-small
Current breakpoint: LG - font-size: 15px / line-height: 24px Current breakpoint: MD - font-size: 15px / line-height: 24px Current breakpoint: SM - font-size: 15px / line-height: 24px



I am a Subtitle: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Subtitle' .text--subtitle
Current breakpoint: LG - font-size: 36px / line-height: 48px Current breakpoint: MD - font-size: 36px / line-height: 48px Current breakpoint: SM - font-size: 27px / line-height: 40px




I am a Subtitle Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Subtitle small' .text--subtitle--small
Current breakpoint: LG - font-size: 36px / line-height: 48px Current breakpoint: MD - font-size: 36px / line-height: 48px Current breakpoint: SM - font-size: 27px / line-height: 40px




I am a Label: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Label' .text--label
Current breakpoint: LG - font-size: 15px / line-height: 24px Current breakpoint: MD - font-size: 15px / line-height: 24px Current breakpoint: SM - font-size: 11px / line-height: 16px


I am a Label Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Label' .text--label
Current breakpoint: LG - font-size: 11px / line-height: 16px Current breakpoint: MD - font-size: 11px / line-height: 16px Current breakpoint: SM - font-size: 11px / line-height: 16px


I am a Footnote: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Footnote' .text--footnote
 Current breakpoint: LG - font-size: 11px / line-height: 16px Current breakpoint: MD - font-size: 11px / line-height: 16px Current breakpoint: SM - font-size: 11px / line-height: 16px