Foundation

Type

The ansarada typography is simple and sophisticated using only two typefaces with a minimal range of sizes and weights. There are two sets of formatting that specifies how type is displayed within product elements and within a text editor. Type is set to a size and line height that conforms to the baseline grid of 6px.

Gravur

Gravur Condensed Light is our display typeface which is used in headings and only ever set in upper case.

Trade Gothic Light

Trade Gothic Light is our body typeface which is used in all interface elements and to display paragraphs of text.

Product typography

Example Colour Size Line height Description

Heading 1

Green 30px 36px The main heading of a page or dialog

Heading 2

Black 18px 24px Second level heading

Body

Charcoal 14px 18px Used in all interface elements and in paragraphs of text

Emphasis

Black 14px 18px Emphasis is used within body type to highlight important information
Fine Print Black 12px 15px Used to display less important information
example.com Forest inherited inherited All text links

Editor typography

Example Colour Size Line height Description

Heading 1

Green 30px 36px The main heading

Heading 2

Charcoal 24px 30px Second level heading

Heading 3

Charcoal 21px 24px Third level heading

Heading 4

Charcoal 18px 24px Fourth level heading
Heading 5
Black 16px 24px Fifth level heading
Heading 6
Black 16px 18px Sixth level heading

Body

Charcoal 14px 18px Paragraphs of text

Emphasis

Black 14px 18px Used in body text to highlight important information

Typography in lists

Unordered list

  • Pears
  • Apples
  • Oranges

Ordered list

  1. Number One
  2. Number Two
  3. Number Three

Definition list

Definition list term
Definition list description
Definition list term
Definition list description
Definition list term
Definition list description