Typescale

Our default font is Open Sans and our type scale is built based on its characteristics and our default sizing value of 1rem.

Levels

Our system uses a modular scale based on levels of hierarchy. This scale is based on the Major Third (5:4 or 1.25). Given that our base size is 1rem or 16px (in most browsers) we can calculate our font sizes from there:

Level                 Calculation                 Size in ems           Size in pixels
0 1em * .75 .8em 12.8px
1 (Default) 1em 1em 16px
2 1em * 1.25 1.25em 20px
3 1.25em * 1.25 1.563em 25px
4 1.953em * 1.25 1.953em 31.25px
5 2.441em * 1.25 2.441em 39.06px
6 3.052em * 1.25 3.052em 48.83px
7 3.815em * 1.25 3.815em 61.04px

Level 7

Level 6

Level 5

Level 4

Level 3

Level 2

Level 1

Level 0

Body text

Large

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi error ipsum quisquam quis laudantium nemo, possimus ipsam perferendis sapiente aut deserunt. Amet, praesentium quod aperiam deserunt exercitationem alias consequatur culpa!

Medium (default)

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore nostrum ratione impedit numquam quia libero. Libero provident aperiam, officiis corrupti voluptas nihil consequatur amet cum quasi sequi rerum perspiciatis velit!

Small

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis placeat sit velit fuga rerum quibusdam! Voluptatum, est similique quos necessitatibus ducimus veniam porro blanditiis cupiditate quasi quam? In, culpa adipisci!