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.
Font Sizes
All font sizes are rem-based, meaning that they are multiples of the document's root font size. Since the root size differs across the three device states, the listed rem values will be followed by their approximate pixel values for palm-sized devices (root: 11,666px) and lap-sized/desk-top devices (root: 10px).
- xs
-
1.0rem
(palm: 12px)
(lap/desk: 10px) - s
-
1.1rem
(palm: 13px)
(lap/desk: 11px) - standard
-
1.2rem
(palm: 14px)
(lap/desk: 12px) - m
-
1.4rem
(palm: 14px)
(lap/desk: 16px) - l
-
1.7rem
(palm: 20px)
(lap/desk: 17px) - xl
-
2.0rem
(palm: 23px)
(lap/desk: 20px) - xxl
-
2.4rem
(palm: 28px)
(lap/desk: 24px)
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
- Verdana, DejaVu Sans, Arial, Helvetica, sans-serif
- headline
- Tahoma, Geneva, Arial, sans-serif
- opensans
- 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.0
- standard
- 1.333
- l
- 1.5
Spacings
These values apply to margins, paddings, list spacings, and grid gutters.
- xs
- 5px
- s
- 10px
-
standard
(size omitted) - 15px
- m
- 15px
- l
- 20px
- xl
- 30px