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.
Markup: components/typography/typography.twig
<style>
.breakpoint-lg, .breakpoint-md{display:none}
.breakpoint-sm{display:inline-block}
@media (min-width: 740px){
.breakpoint-md{display:inline-block}
.breakpoint-sm, .breakpoint-lg {display:none}
}
@media (min-width: 1024px){
.breakpoint-lg {display:inline-block}
.breakpoint-sm, .breakpoint-md{display:none}
}
</style>
<p>Sport Relief uses Founders Grotesk. This is used for headings and body copy in a number of weights</p>
<h3>Fonts</h3>
<h1 class="font--family-black">Black</h1>
<p>Founders Grotesk X Condensed Bold <b>.font--family-black</b></p>
<h1 class="font--family-bold">Bold</h1>
<p>Founders Grotesk Semibold <b>.font--family-bold</b></p>
<h1 class="font--family-regular">Regular</h1>
<p>Founders Grotesk Regular <b>.font--family-regular</b></p>
<br>
<br>
<br>
<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, which has a base copy size of 20px.</p>
<br>
<br>
<br>
<h3>Headings</h3>
<p>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.</p>
<h1 class="font--large">Header 1 Large</h1>
<p>
<span><b>.font--large</b> (Used for headers on landing pages)<br/></span>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 167px / line-height: 125px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 132px / line-height: 99px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 65px / line-height: 49px</span>
</p>
<h1>Header 1</h1>
<p>
<span>(Used in secondary page headers) <br/><span>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 117px / line-height: 88px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 92px / line-height: 69px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 58px / line-height: 43px</span>
</p>
<h2>Header 2</h2>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 40px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 32px / line-height: 35px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 28px / line-height: 31px</span>
</p>
<h3 class="alternate">Header 3</h3>
<p>
<span><b>.alternate</b><br/></span>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 40px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 32px / line-height: 35px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 28px / line-height: 31px</span>
</p>
<h3>Header 3</h3>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 28px / line-height: 31px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 25px / line-height: 28px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 25px</span>
</p>
<h4>Header 4</h4>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 25px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 22px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 20px</span>
</p>
<h5>Header 5</h5>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 20px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 17px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 17px</span>
</p>
<br/>
<br/>
<h3>Paragraphs</h3>
<p class="font--xxlarge">font--xxlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 47px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 36px / line-height: 47px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 32px / line-height: 42px</span>
</p>
<p class="font--xlarge">font--xlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 28px / line-height: 37px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 28px / line-height: 37px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 33px</span>
</p>
<p class="font--large">font--large: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 29px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 23px / line-height: 29px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 29px</span>
</p>
<p>Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 26px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 26px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 26px</span>
</p>
<p class="font--small">font--small: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 23px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 23px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 23px</span>
</p>
<p class="font--xsmall">font--xsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 16px / line-height: 21px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 21px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 21px</span>
</p>
<p class="font--xxsmall">font--xxsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 14px / line-height: 18px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 14px / line-height: 18px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 14px / line-height: 18px</span>
</p>
<br>
<br>
<p class="font--black">Black font <b>.font--black</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--dark-blue">Dark blue font <b>.font--dark-blue</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--dark-blue-lighter">Dark blue lighter font <b>.font--dark-blue-lighter</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--ruby">Ruby font <b>.font--ruby</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--white-smoke bg--black" style="padding: 5px;">White smoke font <b>.font--white-smoke</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--white bg--black" style="padding: 5px;">White font <b>.font--white</b> There are a range of paragraph sizes, using the typographic scale.</p>
_sr18-styleguide.scss
, line 10