Sport Relief uses Founders Grotesk. This is used for headings and body copy in a number of weights

Fonts

Black

Founders Grotesk X Condensed Bold .font--family-black

Bold

Founders Grotesk Semibold .font--family-bold

Regular

Founders Grotesk Regular .font--family-regular

Type Sizes

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

Headings

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

Header 1 Large

.font--large (Used for headers on landing pages)
Current breakpoint: LG
font-size: 167px / line-height: 125px Current breakpoint: MD
font-size: 132px / line-height: 99px Current breakpoint: SM
font-size: 65px / line-height: 49px

Header 1

(Used in secondary page headers)
Current breakpoint: LG
font-size: 117px / line-height: 88px Current breakpoint: MD
font-size: 92px / line-height: 69px Current breakpoint: SM
font-size: 58px / line-height: 43px

Header 2

Current breakpoint: LG
font-size: 36px / line-height: 40px Current breakpoint: MD
font-size: 32px / line-height: 35px Current breakpoint: SM
font-size: 28px / line-height: 31px

Header 3

.alternate
Current breakpoint: LG
font-size: 36px / line-height: 40px Current breakpoint: MD
font-size: 32px / line-height: 35px Current breakpoint: SM
font-size: 28px / line-height: 31px

Header 3

Current breakpoint: LG
font-size: 28px / line-height: 31px Current breakpoint: MD
font-size: 25px / line-height: 28px Current breakpoint: SM
font-size: 23px / line-height: 25px

Header 4

Current breakpoint: LG
font-size: 23px / line-height: 25px Current breakpoint: MD
font-size: 20px / line-height: 22px Current breakpoint: SM
font-size: 18px / line-height: 20px

Header 5

Current breakpoint: LG
font-size: 18px / line-height: 20px Current breakpoint: MD
font-size: 16px / line-height: 17px Current breakpoint: SM
font-size: 16px / line-height: 17px

Paragraphs

font--xxlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 36px / line-height: 47px Current breakpoint: MD
font-size: 36px / line-height: 47px Current breakpoint: SM
font-size: 32px / line-height: 42px

font--xlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

font--large: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

font--small: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

font--xsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 16px / line-height: 21px Current breakpoint: MD
font-size: 16px / line-height: 21px Current breakpoint: SM
font-size: 16px / line-height: 21px

font--xxsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Black font .font--black There are a range of paragraph sizes, using the typographic scale.

Dark blue font .font--dark-blue There are a range of paragraph sizes, using the typographic scale.

Dark blue lighter font .font--dark-blue-lighter There are a range of paragraph sizes, using the typographic scale.

Ruby font .font--ruby There are a range of paragraph sizes, using the typographic scale.

White smoke font .font--white-smoke 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.