<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>Comic Relief uses Montserrat and Anton; the latter for headings, the former of body copy, labels etc.</p>

<h1>Fonts</h1>
<br/>
<br/>
<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, using multiples of 8.</p>
<br/>
<br/>
<h3>Headings</h3>
<p>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.</p>

<h1 class="text--title">'Title' Header 1</h1>
  <span class="font--red"><b>.text--title</b> (Used for headers and landing pages, noted as 'Title' H1 in the Design System)</span><br/>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 100px / line-height: 104px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 100px / line-height: 104px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 54px / line-height: 62px</span>
<br/>
<br/>
<br/>

<h1>Header 1</h1>
 <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 64px / line-height: 72px</span>
 <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 64px / line-height: 72px</span>
 <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 42px / line-height: 48px</span>
<br/>
<br/>
<br/>

<h2>Header 2</h2>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 42px / line-height: 48px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 42px / line-height: 48px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 34px / line-height: 40px</span>
<br/>
<br/>
<br/>

<h3>Header 3</h3>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 26px / line-height: 32px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 26px / line-height: 32px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 26px / line-height: 32px</span>
<br/>
<br/>
<br/>
<br/>

<h3>Copy, labels etc.</h3>

<p>I am a standard paragraph, also p.text--body for CMS reasons: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>Standard paragraph, p.text--body </b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 20px / line-height: 32px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 20px / line-height: 32px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
<br/>
<br/>
<br/>
<br/>

<p class="text--body-small">I am a small paragraph, p.text--body-small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>Standard paragraph, p.text--body-small </b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
<br/>
<br/>
<br/>
<br/>

<p class="text--subtitle">I am a Subtitle: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Subtitle' .text--subtitle</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
</p>
<br/>
<br/>
<br/>

<p class="text--subtitle-small">I am a Subtitle Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Subtitle small' .text--subtitle--small</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
</p>
<br/>
<br/>
<br/>

<p class="text--label">I am a Label: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Label' .text--label</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>

<p class="text--label">I am a Label Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Label' .text--label</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>


<p class="text--footnote">I am a Footnote: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Footnote' .text--footnote</b><br/></span>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>