We use the Ubuntu typeface exclusively. It was recently upgraded to a variable font, which features a weight and a width axis. It now also includes true small caps. Number figures to accompany the small caps are currently being finalised and will be available soon.
| ABCDEFGHIJKLMNOPQRSTUVWXYZ | abcdefgijklmnopqrstuvwxyz | 01234567890 |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ | abcdefgijklmnopqrstuvwxyz | 01234567890 |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ | abcdefgijklmnopqrstuvwxyz | 01234567890 |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ | abcdefgijklmnopqrstuvwxyz | 1234567890 |
Even though a width axis is available, allowing text to be condensed, we do not use it in our design system. All text should be set with the width axis at its widest (100).
We use a carefully selected set of weights in our heading hierarchy. As a general rule, we reduce the weight of light headings as the font-size increases. We keep the weight of bold headings the same, thereby increasing contrast between light and bold headings as we move up the type scale. The following table provides the full list of weights we use:
| Weight | Use |
|---|---|
| 100 | Display headings |
| 180 | H2, large screens |
| 230 | H2, medium screens |
| 300 | H4 |
| 400 | Small text, all UI elements, body text, H6 headings |
| 500 | H5, H3, H1 |
Our type scale consists of 5 font sizes, expressed as rems (root em units). For simplicity, going forward we will refer to sizes in pixels, with the assumption that the base rem unit, which is set by browsers, is at its default of 16 pixels. The following table lists the type sizes and what they are used for:
| Size | Use | Example |
|---|---|---|
| 14px | Secondary text, side notes, etc. | Small secondary text |
| 16px | Body text, all component, h5 and h6 headings. |
Standard body text
H5 heading H6 heading |
| 24px | h3 and h4 level headings. |
H4 heading H3 heading |
| 32px | h1 and h2 level headings on small and medium screens.. |
H2 heading (small and medium screens) H1 heading (small and medium screens) |
| 40px | h1 and h2 level headings on large screens. |
H2 heading H1 heading |
| 120px | Ad hoc display headings for important bespoke pages. | Ubuntu Pro |
1remVanilla's typographic scale has a base font-size of 1rem.
The pixel value of 1rem depends on the browser (in most cases, 16px) and the user's browser settings.
In addition to that, Vanilla multiplies that value by $font-size-ratio--largescreen on resolutions above a certain threshold ($font-size-largescreen). This is done to account for the bigger distance at which larger screens are usually positioned from the viewer.
To disable this behaviour, include the following after you import and include the framework in your scss:
$increase-font-size-on-larger-screens: false;
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.
Sub-headings visually convey importance beneath a heading, or a line of text that expands on the meaning of the heading immediately before it.
It is also possible to apply heading classes directly to heading elements if that better suits your document style and tree.
Display headings are reserved for the titles of important bespoke pages. They should be used sparingly by adding the .p-heading--display class to a h1 heading element.
The accent colour can be sparingly used to highlight headings to help them stand out from the rest of the page.
Line length, measured in number of characters per line (CPL), has been shown to affect reading speed and comprehension. While there is little consensus on what the optimal CPL value is, most studies test with values between 45 and 95 characters per line. Wikipedia has a good historical overview and a list of studies on the subject.
The max-width of text elements in Vanilla Framework is limited using the $text-max-width variable, currently set to 40em, or around 90 characters.
Vanilla also includes a utility to unset the max-width where necessary – u-no-max-width:
Overriding or unsetting the max-width is reasonable in certain cases:
<p> after every line break, resulting in <div>'s or <iframe>'s wrapped in <p>'s.Use an ordered list when the order of the items is important.
Use an unordered list when the order of the items isn't important.
Use a definition list when you want to list a group of one or more terms and descriptions.
Small caps text is used to style column headers in tables. This styling has proved useful in other contexts. To apply it, add the class p-text--small-caps.
Deprecated
Previously this style was implemented as .p-text--x-small-capitalised class name. This name is now deprecated and will be removed in next major version of Vanilla, please use .p-text--small-caps instead.
Text figures are numerals designed to echo the varying height and alignment to the baseline of lower-case text.
To apply the text figures styling, wrap the number in a span with the class u-text-figures.
Because of the difference in line heights, small, extra small and paragraph text do not share the same baseline.
In some cases, for example when used on the same line, it can be useful to align them. Use the u-align-text--small-to-default u-align-text--x-small-to-default classes to achieve baseline alignment.
Deprecated
Small caps style used to be implemented as extra small text variant with .p-text--x-small-capitalised class name that required the .u-align-text--x-small-to-default utility to align the baseline. This is not the case any more, so usage of this utility with new .p-text--small-caps (and its deprecated equivalent .p-text--x-small-capitaised) is deprecated and can be removed.
If you are using the variable Ubuntu font, it comes in six weights; thin, light, regular, medium, bold and extra bold.
To reduce the prominence of text, use class u-text--muted.
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;
Deprecated
In previous versions of Vanilla (< 3.10.0) there used to be an option $font-use-subset-latin for only importing a part of the Latin subset.
This has been made redundant by the adoption of the variable font and should be removed from your project.
font-display optionsThe CSS font-display option allows you to set a strategy for what backup font is shown while an external font is loading. This is a very subjective decision; however, if you set the following variable to the option you want, it will add it to the typography for you.
$font-display-option: <auto | block | swap | fallback | optional>;
The default value of the font-display property on all fonts used by Vanilla is set to fallback.
To import just this base element into your project, copy the snippet below and include it in your main Sass file.
@import 'patterns_headings';
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
For more typographic related information view the code and pull quote pattern component or our font settings.