Comic Relief uses Sailec. This is used for headings and body copy in a number of weights

Fonts

Black

Sailec Black .font--family-black

Bold

Sailec Bold .font--family-bold

Medium

Sailec Medium .font--family-medium

Regular

Sailec Regular .font--family-regular

Light

Sailec Light .font--family-light

Type Sizes

All type sizes and line heights come from a typographic scale, which has a base copy size of 18px.

Headings

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

Header 1

.font--large (Used for headers and landing pages)
Current breakpoint: LG
font-size: 83px / line-height: 83px Current breakpoint: MD
font-size: 74px / line-height: 75px Current breakpoint: SM
font-size: 66px / line-height: 68px

Header 1

.font--large (Used for secondary and pages headers)
Current breakpoint: LG
font-size: 58px / line-height: 62px Current breakpoint: MD
font-size: 52px / line-height: 57px Current breakpoint: SM
font-size: 41px / line-height: 48px

Header 2

Current breakpoint: LG
font-size: 41px / line-height: 48px Current breakpoint: MD
font-size: 36px / line-height: 44px Current breakpoint: SM
font-size: 32px / line-height: 41px

Header 3

Current breakpoint: LG
font-size: 26px / line-height: 35px Current breakpoint: MD
font-size: 26px / line-height: 35px Current breakpoint: SM
font-size: 29px / line-height: 38px

Header 4

Current breakpoint: LG
font-size: 20px / line-height: 31px Current breakpoint: MD
font-size: 20px / line-height: 31px Current breakpoint: SM
font-size: 23px / line-height: 33px

Header 5

Current breakpoint: LG
font-size: 18px / line-height: 29px Current breakpoint: MD
font-size: 18px / line-height: 29px Current breakpoint: SM
font-size: 20px / line-height: 31px

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--xlarge
Current breakpoint: LG
font-size: 23px / line-height: 33px Current breakpoint: MD
font-size: 23px / line-height: 28px Current breakpoint: SM
font-size: 23px / line-height: 28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--large
Current breakpoint: LG
font-size: 20px / line-height: 31px Current breakpoint: MD
font-size: 20px / line-height: 31px Current breakpoint: SM
font-size: 20px / line-height: 31px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 18px / line-height: 29px Current breakpoint: MD
font-size: 18px / line-height: 29px Current breakpoint: SM
font-size: 18px / line-height: 29px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--small
Current breakpoint: LG
font-size: 16px / line-height: 27px Current breakpoint: MD
font-size: 16px / line-height: 27px Current breakpoint: SM
font-size: 16px / line-height: 27px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.font--xsmall
Current breakpoint: LG
font-size: 14px / line-height: 26px Current breakpoint: MD
font-size: 14px / line-height: 26px Current breakpoint: SM
font-size: 14px / line-height: 26px

Red font .font--red There are a range of paragraph sizes, using the typographic scale.

Purple font .font--purple There are a range of paragraph sizes, using the typographic scale.

Royal Blue font .font--royal-blue There are a range of paragraph sizes, using the typographic scale.

White font .font--white There are a range of paragraph sizes, using the typographic scale.

Mint Green font .font--mint-green There are a range of paragraph sizes, using the typographic scale.