Typography

What heading to use?

UIF was designed to allow for a separation between the semantic requirements of the HTML, and requirements of the visual representation. It is possible to make a h3 or a p look like a h1, without having to sacrifice accessibility.

This means it is possible to provide a valid semantic HTML outline, without forcing the use of incorrect HTML.

Heading 1

    <h1>Heading 1</h1>

Heading 2

    <h2>Heading 2</h2>

Heading 3

    <h3>Heading 3</h3>

Heading 4

    <h4>Heading 4</h4>

Heading class 1

    <p class="heading heading--1">Heading class 1</p>

Heading class 2

    <p class="heading heading--2">Heading class 2</p>

Heading class 3

    <p class="heading heading--3">Heading class 3</p>

Heading class 4

    <p class="heading heading--4">Heading class 4</p>

Jumbo heading

Jumbo light heading

Jumbo extra bold heading

Paragraph text. Here's a link, a silent link, and here's an alternate link, and here's an underlined link, and some bold text, which is next to some extra bold text, and then some italic text ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Introduction

The look and feel for the base typography styles.

Usage

Class name	Effect	Remarks
`.heading`	Adds heading styles to a component	Optionally placed on any element to make it take on heading styles. Not required on an `h[1-6]`, as it is implied.
`.heading--N`	N can be 1-4. Styles the heading for its various levels	Optionally placed on a `heading` element. Allows for the optional separation of semantics from styling, because the style required may not match the information hierarchy of a page. Can use `hN` elements, which have the implied styling.
`.heading--sup`	Heading without a bottom margin	Optional.
`.heading--jumbo`	A very large heading	Optional.
`.heading--sub`	Heading without a top margin	Optional.
`.heading--cta`	Heading that includes a visually separated call to action link.	Optional.
`.heading__cta`	The styling applied to the call to action element child.	Optional.
`.link--silent`	Remove link-related styling on an `a` tag.	Optional.
`.link--underlined`	Add underline by default, remove on hover.	Optional.
`.link--alt`	Alternate link styling: Add link colour only on hover.	Optional.
`.text-[SIZE]`	Change size of text. Sizes: `xsmall`, `small`, `small-medium`, `large`	Optional.
`.text-caps`	Uppercase text.	Optional.
`.text-highlight`	Add more visual prominence to text.	Optional.
`.text-dampen`	Reduce visual prominence of text.	Optional.
`.text-invert`	The inverse of the default font colour. The result is white.	Optional.
`.text-light`	Makes text a lighter font-weight	Optional.
`.text-semi-bold`	Makes text semi-bold	Optional.
`.text-bold`	Makes text bold	Optional. Note: `<strong>` tag is reset to normal weight, so it can be used semantically without there being any styling repercussions.
`.text-xbold`	Makes text, like, super duper bold. Like Kanye West bold.	Optional.
`.text-italic`	Makes text italic.	Optional. Note: `<em>` tag is reset to normal style, so it can be used semantically without there being any styling repercussions.
`.text-space-left`	Space text on its left.	Optional.
`.text-center`	Center text.	Optional.
`.text-right[--BREAKPOINT]`	Right align text.	Optional.
`.text-success`	Text for successful messaging	Optional.
`.text-error`	Text for error messaging	Optional.
`.no-wrap`	Prevent text from wrapping.	Optional.
`.no-wrap--ellipsis`	Modifies `.no-wrap` class to also show ellipsis. Needs to be used in addition to `.no-wrap`.	Optional.