Typography

##Vertical spacing

The typographic scale can be customised by overriding the default variable. To do so, set a new $typographic-scale variable with at least a base property containing all the default sizes. You can also pass optional extra breakpoints containing the sizes you want to modify as the screens get bigger.

The typographic scale and vertical rhythm of all elements across all devices can be controlled using this variable. This means that by setting a scale and $base-spacing-unit you can maintain vertical rhythm by using our helper mixin. For instance by using @include spacing('margin', 'bottom', 'base') will set a margin-bottom to the element. 'Base', refers to the $base-spacing-unit set in the scale variable. At each break point the margin-bottom will be changed to reflect the value set. In this case the base (mobile) margin bottom will be 32px and above the medium break point will be 64px.

The mixin also allows you to pass other values that also fit to the scale (as they are derived by dividing the $base-spacing-unit by half each time). Therefore @include spacing('margin', 'bottom', 'quarter') would produce a margin-bottom: 16px above the medium breakpoint (in this example) and margin-bottom: 8px on mobile (or base break point).

$typographic-scale: (
  base: (
    body: 16px,
    h-mega: 46px,
    h1: 30px,
    h2: 20px,
    h3: 18px,
    h4: 18px,
    h5: 18px,
    h6: 13px,
    blockquote: 18px,
    lead: 20px,
    small: 13px,
    base-line-height: 1.7,
    base-spacing-unit: 32px,
  ),
  medium: (
    body: 20px,
    h-mega: 52px,
    h1: 46px,
    h2: 26px,
    h3: 22px,
    h4: 22px,
    h5: 22px,
    h6: 16px,
    blockquote: 22px,
    lead: 26px,
    small: 13px,
    base-line-height: 1.6,
    base-spacing-unit: 64px,
  )
) !default;