Typography


All text in Vanilla uses the Ubuntu typeface , which can be used in your projects.

Vanilla’s typographic scale has a base font-size of 1rem (16px) and a font-weight of 300. The heading sizes h1-h4 follow a modular scale with a base value of 16/14 (~1.143).

  • On small to medium screens the ratio is 2:3
  • On large screens the ratio is 1:2

This means that the font size is calculated from (16/14)n where n is the point on the modular scale.

Typographic scale

  Small-Medium Large
<h1>    
modular point 6 8
font size 2.22819rem 2.91029rem
line height 3rem 3.5rem
<h2>    
modular point 4.5 6
font size 1.83274rem 2.22819rem
line height 2.5rem 3rem
<h3>    
modular point 3 4
font size 1.49271rem 1.70596rem
line height 2rem 2.5rem
<h4>    
modular point 1.5 2
font size 1.22176rem 1.30612rem
line height 1.5rem 2rem
<h5>    
modular point 0 0
font size 1rem 1rem
line height 1.5rem 1.5rem
<h6>    
modular point 0 0
font size 1rem 1rem
line height 1.5rem 1.5rem
<p>    
modular point 0 0
font size 1rem 1rem
line height 1.5rem 1.5rem


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.

In the following example, each heading is actually a <p> element that has been modified to look like a particular heading size.

View example of the heading pattern

Sub-headings

Sub-headings visually convey importance beneath a heading, or a line of text that expands on the meaning of the heading immediately before it.

View example of the heading pattern

Mixed heading classes

It is also possible to apply heading classes directly to heading elements 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

Definition list

Use a definition 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

View example of the superscripted pattern

Subscripted text

View example of the subscripted pattern

Abbreviation

View example of the abbreviation pattern

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;

Design

For more information view the typography design spec, which includes the specification in markdown format and a PNG image.

For more typographic related information view the code and pull quote pattern component or our font settings.