Font family

For fonts, we are using the “native font stack” for optimum text rendering on every device and OS.

font-family:
  /* Safari for OS X and iOS (San Francisco) */
  -apple-system,
  /* Chrome < 56 for OS X (San Francisco) */
  BlinkMacSystemFont,
  /* Windows */
  "Segoe UI",
  /* Android */
  "Roboto",
  /* Basic web fallback */
  "Helvetica Neue", Arial, sans-serif,
  /* Emoji fonts */
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Headings

All heading elements are reset to have their margin-top removed, have margin-bottom: 0.5em and font-weight: 600.

h1: Heading title
h2: Heading title
h3: Heading title
h4: Heading title
h5: Heading title
h6: Heading title

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

• h-x

h1: Heading title
h2: Heading title
h3: Heading title
h4: Heading title
h5: Heading title
h6: Heading title

Display

if you want a very big title you can choose from four levels for displaying titles.

• display-x

Display 1
Display 2
Display 3
Display 4

Font sizes variables

Adjust the width and offset of columns on different devices.