TYPOGRAPHY

Typeface/font, sizing, weight, spacing, colour, tracking, leading... there's a wide range of considerations with typography. Rule number one is to have rules - it leads to consistency and builds the identity/style of a brand.

Fairfax & Favor predominently use Gill Sans Nova as their signature typeface. They use this font in a number of styles which we'll cover below.

TYPEFACE

Gill Sans Nova is the primary typeface for Fairfax & Favor in their digital designs. A clean, recognisable and timeless typeface that reflects the qualities of the brand. In the website it is the default font and does not need defining when writing code.

Didot is our supporting font. The complimentary Serif to our Sans-Serif primary typeface. Juliet to her Romeo - they look great together and act to stand out when things get fancy. However, we rarely use this in web, and this is more commonly used in printed marketing or digital ads. When used, it is almost always used with an italic/slanted format.

<span class="font-serif italic text-2xl text-black">
	This is linotype-didot in Heading size
</span>

Paragraph / Copy

The default typeface size in web is 1rem, used in standard sentences, paragraphs and copy. This gives the best size for readability, and for accessibility. We use this default font size across all screen sizes.

Line Height

The default typeface in web has a line-height (or leading) of 1.5rem. In printed material, typeface size may vary but we suggest leading remains consistent at half the height again. E.g. 20pt font size has a line-height (or leading) of 30pt.

A new paragraph for web, such as this one(!), should have a padding/spacing between this and the previous of 1rem, the same size as the font, and this should be adjusted relatively with the font size used whether increased or decreased.

Weight

The default weight used is 400 (Regular). We use 600 (Semi-bold) sparingly and 700 (bold) very, very sparcely. To emphasise typography we more commonly use UPPERCASE or increased sizing rather than weight, to give a clean and sharp appearance.

<span class="font-semibold">
	This text will show as semi-bold with a weight of 600
</span>
<span class="font-bold">
	This text will show as bold with a weight of 700
</span>

Letter Spacing

It may seem like a small detail but it makes a big difference. Letter spacing (or tracking) can really make the primary typeface stand out.

Tracking is only used in titles (or 'headings') in Fairfax & Favor, to differentiate it from paragraph copy. The tracking is relative to the size of the font and this is all referenced in our headings section.

Typeface Colour

The colour of the typeface is dependent on the background on which it is situated and the impact required. For web, the default font colour is a bluey-grey, shown in a swatch below. This colour allows for good contrast and readability on white or light grey, while giving the opportunity to have other copy or titles in pure black for more impact. E.g. the menu/nav items and icons in the header are default colour to allow the Fairfax & Favor logo to stand out with pure black shield and brand name.

As well as pure black for impact, we also use the brand gold but this is more sparing, to be more distinctive, as the colour suggests.

We do not use brand navy as a typeface colour because it's difficult to distinguish between this colour and pure black in standard copy, however, we do use it regularly as a background with pure white typeface within. We also use pure white typeface on images with darker or good contrast.

Headings

The use of headings and titles differ a little depending on page but aim to be consistent throughout most the website. In the grid below, we identify the key heading and titles used, where and how they are used and their characteristics such as size, tracking and line height.

To ensure headings look good across different devices, we change the typeface sizing at the 768 pixel breakpoint md:xxxx where we move from mobile to iPad/tablet portrait and larger. Where appropriate, we also offer a third size at the 1024 pixel breakpoint lg:xxxx where we move up to iPad/tablet landscape and wider.

Headings will typically be pure black, or pure white if it is on a background, and occasionally brand gold to be distinctive. Click the 'view' link under examples to see them in context.

PAGE TITLE EXAMPLE

CLOSE

Page Title below hero

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, dolorem quo consequatur. Dignissimos minima animi veniam corrupti ea hic rerum numquam esse quis provident. Doloremque delectus totam deleniti vitae nemo.