README

Typography

npm (scoped)

Component type

Element

Dependencies:

Name	Description
`@citizensadvice/cads-support`	System-wide global variables and functions

Installation

$ npm install @citizensadvice/cads-typography

@import "@citizensadvice/cads-typography/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-typography@latest/build/cads.typography.css" />

Implementation

Open Sans is a friendly and modern typeface that is optimised for legibility. This helps large numbers of people with different accessibility requirements access our products and services.

The spacing has been carefully considered to ensure readability on a variety of mediums.

Headings also have a corresponding className so that they could in theory be used with any element.

<h1 class="h1">Heading level #1</h1>
<h2 class="h2">Heading level #2</h2>
<h3 class="h3">Heading level #3</h3>

Mobile heading details

Element	Font family	Font weight	Font size	Line height	Colour
`<h1/>`	Open Sans	Extra bold (800)	28px	36px	#004b88
`<h2/>`	Open Sans	Semi bold (700)	20px	28px	#004b88
`<h3/>`	Open Sans	Extra bold (600)	20px	28px	#004b88

Tablet and up heading details `(min-width: 555px)`

Element	Font family	Font weight	Font size	Line height	Colour
`<h1/>`	Open Sans	Extra bold (800)	36px	48px	#004b88
`<h2/>`	Open Sans	Extra bold (700)	28px	36px	#004b88
`<h3/>`	Open Sans	Extra bold (600)	20px	28px	#004b88

Paragraphs

<p class="p">
  ...
</p>

Paragraph typography details

Element	Font family	Font weight	Font size	Line height	Colour
`<p/>`	Open Sans	Regular (400)	16px	24px	#000000

Usage no npm install needed!