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