The Cedar spacing system is based on 16px units. The scaling system uses fractions and multiples of the base size (16px). The result is easy to understand. Please note that 1 rem equals 10 pixels.
System scale | Pixel values | Rem values |
---|---|---|
1/8 space | 2px | 0.2rem |
1/4 space | 4px | 0.4rem |
1/2 space | 8px | 0.8rem |
3/4 space | 12px | 1.2rem |
1 space | 16px | 1.6rem |
1 1/2 spaces | 24px | 2.4rem |
2 spaces | 32px | 3.2rem |
4 spaces | 64px | 6.4rem |
Learn more about using Cedar's spacing system and layout usage guidance in the Spacing for Layouts article.