Typography

Typography is the place to style typographic elements including headings, body copy, lists, links, and some pre-set custom styles. Apply styles that dictate the font family or families, sizing, colour and other specific typography styles.

Implementation tip
Select typography colour in this page based on the default colour desired on a white background. Colour overrides (primary/neutral) can be defined in Colours.

Headings

Define heading 1-6 style below. Note that there are two elements to be styled for each heading. Heading 1 and .h1 are to be the same style. In other words this allows the designer to choose a certain type of heading semantically (e.g. Heading 4), but style it visually different (e.g. .h1)

Implementation tip
When no pre-set class is defined (e.g. Heading 1 element below) select the Webflow + icon and choose the pink parent selector (in this case: All H1 Headings). This ensures all Heading 1 elements will default to this style.

Heading 1

.heading-1

Heading 2

.heading-2

Heading 3

.heading-3

Heading 4

.heading-4

Heading 5

.heading-5

Heading 6

.heading-6

Body

Body contains major web text elements such as paragraphs and text links. Many of these elements do not have a pre-set class defined. Select the parent selectors (Webflow's pink items) to adjust these styles. This applies to paragraphs, and links and blockquotes.

Implementation tip
It is highly recommended to define "Body (All Pages)" typography style first. This is Webflow's highest possible pink selector for any text element. This style can define the underlying font family, colour, size etc. for all text items to be based from. From there you can add more specific selectors as needed.

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

"Block quote element"

Body

.body

Links

Text Link
.cta-link .is--back

Custom styles

Below are some common custom styles that can be applied to text items. For example, apply a .preheading class to a normal heading to take on an alternative style. It is recommended to use these pre-set classes in context to their labels, as many are currently applied to relevant elements. It is encouraged that the designer adds further custom text styles to this section as needed.

.preheading

.quote

.quote-source

.lead

Lists

Apply styles to ordered and unordered lists. These first two do not have pre-set classes applied and the same higher-selector process should be followed to ensure all lists follow a baseline style. The .tick-list class gives the designer an opportunity to define a specific list style (e.g. custom tick icons).

  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  • .tick-list
  • .tick-list
  • .tick-list