...
| Code Block |
|---|
|
font-family: Arial, sans-serif; |
Type Scale
REMs are a way of setting font-sizes based on the font-size of the root HTML element. They also allow you to quickly scale an entire project by changing the root font-size (for example at a certain media query/screen size). For a more in depth rationale of why we have chose to use rem units, see https://engageinteractive.co.uk/blog/em-vs-rem-vs-px.
How to calculate PX from REM
Having chosen our default root at 16px, 1rem = 16px. To calculate the rem value to use from any given px size, the following calculation is used: px / 16 = rem. The table below is a quick cheat sheet for our most common rem conversions.
| rem | px | Actual size |
|---|
| 0.625rem | 10 px10px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 10px;">Powering actionable intelligence</span> |
|
| 0.6875rem | 11 px11px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 11px;">Powering actionable intelligence</span> |
|
| 0.75rem | 12 px12px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 12px;">Powering actionable intelligence</span> |
|
| 0.875rem | 14 px14px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 14px;">Powering actionable intelligence</span> |
|
| 1rem | 16 px16px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 16px;">Powering actionable intelligence</span> |
|
| 1.125rem | 18 px18px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 18px;">Powering actionable intelligence</span> |
|
| 1.25rem | 20 px20px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 20px;">Powering actionable intelligence</span> |
|
| 1.5rem | 24 px24px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 24px;">Powering actionable intelligence</span> |
|
| 1.75rem | 28 px28px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 28px;">Powering actionable intelligence</span> |
|
| 2rem | 32 px32px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 32px;">Powering actionable intelligence</span> |
|
| 2.25rem | 36 px36px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 36px;">Powering actionable intelligence</span> |
|
| 2.625rem | 42 px42px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 42px;">Powering actionable intelligence</span> |
|
| 3rem | 48 px48px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 48px;">Powering actionable intelligence</span> |
|
| 3.375rem | 54 px54px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 54px;">Powering actionable intelligence</span> |
|
| 3.75rem | 60 px60px |
| Html macro |
|---|
<span style="font-family: arial; font-size: 60px;">Powering actionable intelligence</span> |
|
...