Styleguide Styleguide

Scale: Type scale

A modular "scale" is a way of creating consistent proportions within a branding system, so that elements like logos, headlines, body text, gutters, and margins all have clear relationships. The “scale” is analogous to a musical scale: the “scale” or intervals work the same way as notes in a progression. In fact, music and design scales use the same mathematical basis.

Vitae uses a “perfect fourth” scale, with a 3:4 (or 1.333) ratio between intervals. This scale offers reasonably high contrast (allowing for greater size differences between elements like headlines and body text, which helps complex documents scan more easily) while still allowing enough steps within a given range that it still works well in more confined layout contexts, like mobile phone screens.

You can calculate sizes for various elements on Vitae’s modular scale using the Modular Scale calculator. Set the “Bases” field to your body text font size (e.g. 10 points, 1 rem, etc.) and it will display a range of sizes you can use in your layout.

Type scale

Here are the sizes to typically use for type:

Screen

67px / 4.19rem

Lorem ipsum dolor sit

38px / 2.38rem

Lorem ipsum dolor sit

28px / 1.75rem

Lorem ipsum dolor sit

21px / 1.31rem

Lorem ipsum dolor sit

16px / 1.00rem

Lorem ipsum dolor sit

12px / 0.75rem

Lorem ipsum dolor sit

Print

56pt

Lorem ipsum dolor sit

24pt

Lorem ipsum dolor sit

18pt

Lorem ipsum dolor sit

13pt

Lorem ipsum dolor sit

10pt

Lorem ipsum dolor sit

7.5pt

Lorem ipsum dolor sit

Spacing

Here are some widths to use for margins and gutters:

90px / 5.63rem

Example of a 90 margin

50px / 3.13rem

Example of a 50 margin

28px / 1.75rem

Example of a 28 margin

16px / 1.00rem

Example of a 16 margin

12px / 0.75rem

Example of a 12 margin

7px / 0.44rem

Example of a 7 margin

Print

100pt

Example of a 100 margin

56pt

Example of a 56 margin

32pt

Example of a 32 margin

18pt

Example of a 18 margin

10pt

Example of a 10 margin

6pt

Example of a 6 margin