Example

The Comic Relief font is Proxima Nova. This used for headings and body copy in a number of weights (Bold, Semibold and Regular).

There are a range of heading sizes from H1 to H5. These sizes are based on a typographic scale, with the base of 18px.

H1.large: 83px

This is fun, right?

H1 59px

This is fun, right?

H2

This is fun, right?

H3

This is fun, right?

H4

This is fun, right?

H5

This is fun, right?



Paragraphs

There are a range of heading sizes from H1 to H5. These are used

18 px

This is fun, right?

18 px

This is fun, right?

18 px

This is fun, right?

Markup: components/typography/typography.twig
<p>The Comic Relief font is Proxima Nova. This used for headings and body copy in a number of weights (Bold, Semibold and Regular).</p>
<p>There are a range of heading sizes from H1 to H5. These sizes are based on a typographic scale, with the base of 18px.</p>
<p>H1.large: 83px</p>
<h1>This is fun, right?</h1>
<p>H1 59px</p>
<h1 class="font--large">This is fun, right?</h1>
<p>H2</p>
<h2>This is fun, right?</h2>
<p>H3</p>
<h3>This is fun, right?</h3>
<p>H4</p>
<h4>This is fun, right?</h4>
<p>H5</p>
<h5>This is fun, right?</h5>
<br/>
<br/>
<br/>
<h4>Paragraphs</h4>
<p>There are a range of heading sizes from H1 to H5. These are used</p>
<p>18 px</p>
<p>This is fun, right?</p>
<p>18 px</p>
<p>This is fun, right?</p>
<p>18 px</p>
<p>This is fun, right?</p>
Source: base-styleguide.scss, line 10