Standard Values

Many of the building block classes use relative values (xs through xl, etc.) to imply their values. The following is a representation of the actual values behind the relative naming scheme.

  1. Font Sizes
  2. Font Families
  3. Line Heights
  4. Spacings

Font Sizes

All font sizes are rem-based, meaning that they are multiples of the document's root font size.

xs
1.2rem (12px)
s
1.4rem (14px)
standard
1.4rem (14px)
m
1.8rem (18px)
l
2.0rem (20px)
xl
2.4rem (24px)
xxl
3.2rem (32px)
xxxl
4.0rem (40px)

Font Families

These are the predefined font families. A font family is a list of font faces by order of priority. If the first font face is not installed on the user's operating system, the next one will be used instead.

global
Open Sans, Verdana, DejaVu Sans, Arial, Helvetica, sans-serif
headline
Open Sans, Tahoma, Geneva, Arial, sans-serif

Line Heights

The line height determines the total height of a line. Line heights are calculated as multiples of the font size.

s
1.4
standard
1.61

Spacings

These values apply to margins, paddings, list spacings, and grid gutters.

Be aware: Gutters have a different standard implicit size as the other spacing elements. gutter has the value size of L

xs
palm: 2px
lap/desk: 4px
s
palm: 4px
lap/desk: 8px
standard (implicit size)
palm: 8px
lap/desk: 16px
m
palm: 8px
lap/desk: 16px
l
palm: 16px
lap/desk: 24px
xl
palm: 24px
lap/desk: 32px
xxl
palm: 32px
lap/desk: 40px