Type scale

The type on this site is based on a fluid scale between two set points: a minimum viewport width of 320 and a maximum width of 1100. Between these widths, the type responds in proportion to the scale of 1.2.

Type scale classes

There are type scale classes that can be used to override text elements.

Step Class Min size @320 Max size @1100
-2 .type-scale--2 11.81 14.58
-1 .type-scale--1 14.17 17.50
0 .type-scale-0 17.00 21.00
1 .type-scale-1 20.40 25.20
2 .type-scale-2 24.48 30.24
3 .type-scale-3 29.38 36.29
4 .type-scale-4 35.25 43.55
5 .type-scale-5 42.30 52.25
6 .type-scale-6 50.76 62.71
7 .type-scale-7 60.91 75.25
8 .type-scale-8 73.10 90.30
9 .type-scale-9 87.72 108.36
10 .type-scale-10 105.26 130.03
Open this example in a new tab
View the code for this example
<p class="type-scale--2">Type scale step -2</p>
<p class="type-scale--1">Type scale step -1</p>
<p class="type-scale-0">Type scale step 0</p>
<p class="type-scale-1">Type scale step 1</p>
<p class="type-scale-2">Type scale step 2</p>
<p class="type-scale-3">Type scale step 3</p>
<p class="type-scale-4">Type scale step 4</p>
<p class="type-scale-5">Type scale step 5</p>
<p class="type-scale-6">Type scale step 6</p>
<p class="type-scale-7">Type scale step 7</p>
<p class="type-scale-8">Type scale step 8</p>
<p class="type-scale-9">Type scale step 9</p>
<p class="type-scale-10">Type scale step 10</p>

Type scale CSS variables

Each step in the scale also had a CSS variable.

Step CSS variable
-2 var(--step--2)
-1 var(--step--1)
0 var(--step-0)
1 var(--step-1)
2 var(--step-2)
3 var(--step-3)
4 var(--step-4)
5 var(--step-5)
6 var(--step-6)
7 var(--step-7)
8 var(--step-8)
9 var(--step-9)
10 var(--step-10)

Type ranges Less mixin

If there isn’t a size in the scale that suits, there’s also a type range mixin that allows mixing of steps:

#type.steps(@minstep, @maxstep);
Variable Description
@minstep A step on the scale -2 to 10. The text will be rendered at this size at the minimum viewport width of 320.
@maxstep A step on the scale -2 to 10. The text will be rendered at this size at the maximum viewport width of 1100.