Spacing

Standardized spacing values helps us create consistent user interfaces (UIs). This consistency makes it easier for customers to scan, browse, and utilize our UIs as we're setting visual rhythmns and expectations that customres can rely upon.

The spacing system

Dialtone uses a spacing system based on a 4 pixel system, providing half-steps where deemed necessary. This 4px unit forms the base measurement unit for spacing in Dialtone.

A layout example with spacing values to show how the spacing system is used.

Value Pixel Equivalent Actual output
@spacing0 0px 0
@spacing1 1px .1rem
@spacing2 2px .2rem
@spacing4 4px .4rem
@spacing6 6px .6rem
@spacing8 8px .8rem
@spacing12 12px 1.2rem
@spacing16 16px 1.6rem
@spacing24 24px 2.4rem
@spacing32 32px 3.2rem
@spacing48 48px 4.8rem
@spacing64 64px 6.4rem

Typography

Where Dialtone provides many flexible spacing values that can be used in the spacing between elements and components, type line-heights should strictly adhere to 4px increments. A common starting increment for line-heights is 20px, which is the default line-height for body copy. Below are some common font-size and line-height pairings.

Size / Target Line Height Class Example
12px / 12px .d-lh1

The quick brown fox jumps over the lazy dog.

12px / 16px .d-lh4

The quick brown fox jumps over the lazy dog.

12px / 20px .d-lh8

The quick brown fox jumps over the lazy dog.

14px / 16px .d-lh2

The quick brown fox jumps over the lazy dog.

14px / 20px .d-lh6

The quick brown fox jumps over the lazy dog.

14px / 24px .d-lh10

The quick brown fox jumps over the lazy dog.

16px / 16px .d-lh1

The quick brown fox jumps over the lazy dog.

16px / 20px .d-lh4

The quick brown fox jumps over the lazy dog.

16px / 24px .d-lh8

The quick brown fox jumps over the lazy dog.

20px / 24px .d-lh4

The quick brown fox jumps over the lazy dog.

20px / 28px .d-lh8

The quick brown fox jumps over the lazy dog.

20px / 32px .d-lh12

The quick brown fox jumps over the lazy dog.

24px / 28px .d-lh4

The quick brown fox jumps over the lazy dog.

24px / 32px .d-lh8

The quick brown fox jumps over the lazy dog.

24px / 40px .d-lh16

The quick brown fox jumps over the lazy dog.