Font Family

Good typography not only differentiates a brand but also communicates the brand’s style, personality and tone of voice. It has a huge influence on brand perception and recognition.

Our default typeface has been chosen to maximise legibility across a number of font sizes and to ensure we have clear, consistent headings, paragraphs and form elements.

Fonts

Demo	Value	SCSS Variables	Usage
Avenir Black 95	"AvenirLT-Black"	$gel-font-family-black	headings
Avenir Heavy 85	"AvenirLT-Heavy"	$gel-font-family-heavy	buttons, links, bold text
Avenir Roman 55	"AvenirLT-Roman"	$gel-font-family-roman	body text
Avenir Book 35		$gel-font-family-light	leading text

Code Formats

CSS

    .classname{
        font-family: var(--gel-font-family-roman)
    }

SASS

    .classname{
        font-family: $gel-font-family-roman
    }

LESS

    .classname{
        font-family: @gel-font-family-roman
    }

Font Weight

Because the weights and styles are set to normal in the @font-face declarations, keeping the weights and styles set to normal when styling the text is important. Otherwise, the bolds may double-bold (some browsers will add a bold weight to the already bold Web font), and the italics may double-italic (some browsers will add an italic style to the already italic Web font).

    .classname{
        font-family: var(--gel-font-weight-normal)
    }