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 15px 16px 16px
line height 24px 24px 24px
margin top 18px 24px 24px
margin bottom 18px 24px 24px

h1

font size 32px 40px 48px
line height 36px 48px 60px
margin top 18px 24px 24px
margin bottom 18px 24px 24px

h2

font size 26px 32px 36px
line height 30px 40px 42px
margin top 18px 24px 24px
margin bottom 18px 24px 24px

h3

font size 23px 26px 28px
line height 30px 30px 36px
margin top 18px 24px 24px
margin bottom 18px 24px 24px

h4

font size 20px 22px 24px
line height 24px 30px 30px
margin top 18px 24px 24px
margin bottom 18px 24px 24px
h5
font size 18px 19px 21px
line height 24px 24px 24px
margin top 18px 24px 24px
margin bottom 18px 24px 24px
h6
font size 16px 17px 17px
line height 18px 24px 24px
margin top 18px 24px 24px
margin bottom 18px 24px 24px

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

This is some <small> text with a font size of 13 pixels.

Strong text

This is some strong text

Superscripted text

This text is superscripted

Subscripted text

This text is subscripted