Vanilla framework documentation

Typography

All text in Vanilla uses the Ubuntu typeface.

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 large screens the ratio is 1:2 and on small to medium screens the ratio is 2:3. 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

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

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

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