Typography
Our typography is set to use a combination of Lato and Oswald fonts hosted and served from an S3 bucket. Fonts use the REM unit of measure with its root set to 1rem (16px). Our standard line-height is 1.5 with headings set to 1.25. Heading font sizes are based on a Modular Scale.
Line Height
Leading is the distance from one baseline to the next. Leading is achieved in CSS through the line-height property. Unlike in mechanical presses, where one line of lead is added below the text, the spacing added on the Web is divided equally above and below the text.
Use the value of line-height as a multiplier instead of choosing specific values for each font size - for eg: 16px * 1.5 = 24 px. This is a more reliable method since it will ensure that the line-height is always proportional to the text size.
Modular Scale
A modular scale, like a musical scale, is a prearranged set of harmonious proportions. Common Sense uses the Major Second scale with a base size of 16px for 1 rem and a ratio of 1.125. Exclusively using sizes from this type scale will create visual, as well as hierarchical consistency, throughout the UI.
|
#9
2.887rem
|
46.184px
The quick brown fox
|
|
#8
2.566rem
|
41.053px
The quick brown fox
|
|
#7
2.281rem
|
36.491px
The quick brown fox
|
|
#6
2.027rem
|
32.437px
The quick brown fox
|
|
#5
1.802rem
|
28.833px
The quick brown fox
|
|
#4
1.602rem
|
25.629px
The quick brown fox
|
|
#3
1.424rem
|
22.781px
The quick brown fox
|
|
#2
1.266rem
|
20.25px
The quick brown fox
|
|
#1
1.125rem
|
18px
The quick brown fox
|
|
#0
1rem
|
16px
The quick brown fox
|
|
#-1
0.889rem
|
14.222px
The quick brown fox
|
|
#-2
0.79rem
|
12.642px
The quick brown fox
|
|
#-3
0.702rem
|
11.237px
The quick brown fox
|