Sizing/Spacing
We use a modular scale to help maintain vertical rhythm on our site. The scale is based on a 1.25 ratio, using 16px as a base for mobile, and 17px as a base for desktop. Below is a spacing conversion table to make it easier to associate the margins, padding, text size, etc. into CSS classes.
Sizing/Spacing Sample(s):
Webpage Spacing
The following sizes are used for all vertical and horizontal margins between site elements. All margins and paddings presented in a design mockup will be converted to the closest dimension in the table below.
| CSS class (for devs) |
Rem size |
Pixel Size |
-0 |
0rem |
0px |
-px |
1rem |
1px |
-1 |
0.25rem |
4px |
-2 |
0.5rem |
8px |
-3 |
0.75rem |
12px |
-4 |
1rem |
16px |
-5 |
1.25rem |
20px |
-6 |
1.5rem |
24px |
-8 |
2rem |
32px |
-10 |
2.5rem |
40px |
-12 |
3rem |
48px |
-16 |
4rem |
64px |
-20 |
5rem |
80px |
-24 |
6rem |
96px |
-32 |
8rem |
128px |
-40 |
10rem |
160px |
-48 |
12rem |
192px |
-56 |
14rem |
224px |
-64 |
16rem |
256px |
Webpage Breakpoints
| Screen Type |
Size |
| Small (Mobile) |
320px - 767px |
| Medium (Tablet) |
768px - 991px |
| Large (Desktop) |
992px |
HTML Email Breakpoints
| Screen Type |
Size |
| Small (Mobile) |
320px - 654px |
| Large (Desktop) |
655px |