Skip to main content

Font Sizes

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.

Sizes​

Heading​

DemoSCSS Variables
Font size 3.5rem$gel-font-size-heading-1
Font size 2rem$gel-font-size-heading-2
Font size 1.5rem$gel-font-size-heading-3
Font size 1.25rem$gel-font-size-heading-4
Font size 1rem$gel-font-size-heading-5

Text​

DemoSCSS Variables
Font size 1.25rem$gel-font-size-text-xl
Font size 1.125rem$gel-font-size-text-lg
Font size 1rem$gel-font-size-text-default
Font size 0.875rem$gel-font-size-text-sm
Font size 0.75rem$gel-font-size-text-xs

Line Height​

ValueSCSS Variables
1$gel-line-height-reset
1.25$gel-line-height-heading
1.5$gel-line-height-text

Code Formats​

CSS​

    .classname{
        font-size: var(--gel-font-size-text-default)
    }

SASS​

    .classname{
        font-size: $gel-font-size-text-default
    }

LESS​

    .classname{
        font-size: @gel-font-size-text-default
    }
Last updated on