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 absolute font sizes may differ across the three device states, this list will state the corresponding pixel values for both palm-sized devices and lap-sized/desk-top devices.
- xs
-
palm: 1.1rem (11px)
lap/desk: 1.1rem (11px) - s
-
palm: 1.3rem (13px)
lap/desk: 1.3rem (13px) - standard
-
palm: 1.4rem (14px)
lap/desk: 1.4rem (14px) - m
-
palm: 1.4rem (14px)
lap/desk: 1.8rem (18px) - l
-
palm: 1.8rem (18px)
lap/desk: 2.1rem (21px) - xl
-
palm: 2.0rem (20px)
lap/desk: 2.6rem (26px) - xxl
-
palm: 2.3rem (23px)
lap/desk: 3.2rem (32px) - xxxl
-
palm: 3.2rem (32px)
lap/desk: 4.2rem (42px)
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.45
- standard
- 1.6
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