Skip to main content

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.


DemoValueSCSS VariablesUsage
Avenir Black 95"AvenirLT-Black"$gel-font-family-blackheadings
Avenir Heavy 85"AvenirLT-Heavy"$gel-font-family-heavybuttons, links, bold text
Avenir Roman 55"AvenirLT-Roman"$gel-font-family-romanbody text
Avenir Book 35"AvenirLT-Book"$gel-font-family-bookleading text

Download Avenir fonts

Download Avenir fonts

Code Formats


font-family: var(--gel-font-family-roman)


font-family: $gel-font-family-roman


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).

font-family: var(--gel-font-weight-normal)