Example

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>
Source: _sr18-styleguide.scss, line 10