Typography

All text in Vanilla uses the Ubuntu typeface.

Vanilla's typographic scale has a base font size of 15 pixels (screens smaller than 768 pixels) and a font weight of 300. At the medium breakpoint, the base font size increases to 16 pixels.

Typographic scale

Small Medium Large
p
font size 16px 16px 16px
line height 24px 24px 24px
margin top 16px 16px 24px

h1

font size 32px 32px 48px
line height 42px 42px 60px
margin top 32px 32px 60px

h2

font size 28px 28px 36px
line height 36px 36px 48px
margin top 24px 24px 32px

h3

font size 24px 24px 28px
line height 32px 32px 36px
margin top 24px 24px 32px

h4

font size 22px 22px 24px
line height 28px 28px 32px
margin top 24px 24px 32px
h5
font size 18px 18px 20px
line height 24px 24px 28px
margin top 24px 24px 32px
h6
font size 16px 16px 16px
line height 24px 24px 24px
margin top 24px 24px 32px

Heading classes

Heading classes can be added to text elements to give them the same visual appearance as the base h1-h6 heading elements without sacrificing correct heading order and semantics.

Heading classes are not tied to elements and can be freely mixed, for example you can apply the p-heading--one class to an h3 element if that better suits your document style and tree.

View example of the mixed headings pattern

Ordered list

Use an ordered list when the order of the items is important.

View example of the base ordered list

Unordered list

Use an unordered list when the order of the items isn't important.

View example of the base unordered list

Description list

Use a description list when you want to list a group of one or more terms and descriptions.

View example of the base definition list

Blockquotes and citations

View example of the base blockquotes

Small text

View example of the small text

Strong text

This is some strong text

Superscripted text

This text is superscripted

Subscripted text

This text is subscripted

Font weights

If you are using the Ubuntu font, it comes in five weights; thin, light, regular, medium, and bold.

View example of the Ubuntu font weights.

Enabling Cyrillic, Greek and Latin fonts

Due to the extra weight of loading these fonts they are not imported by default. To enable Cyrillic, Greek and Latin fonts on Ubuntu please set the following font setting to true.

$font-allow-cyrillic-greek-latin: true;