Fonts Family, Sizes & Weights vars

$font-family-primary [private]

scss
$font-family-primary: 'Open Sans';

$font-size-display [private]

scss
$font-size-display: 72px;

$font-size-h1 [private]

scss
$font-size-h1: 40px;

$font-size-h2 [private]

scss
$font-size-h2: 32px;

$font-size-h3 [private]

scss
$font-size-h3: 24px;

$font-size-title [private]

scss
$font-size-title: 21px;

$font-size-subheading [private]

scss
$font-size-subheading: 17px;

$font-size-body [private]

scss
$font-size-body: 14px;

$font-size-body-alt [private]

scss
$font-size-body-alt: 13px;

$font-size-caption [private]

scss
$font-size-caption: 11px;

$font-size-icon [private]

scss
$font-size-icon: 35px;

Icon default font size

$font-weight-bold [private]

scss
$font-weight-bold: 600;

$font-weight-semibold [private]

scss
$font-weight-semibold: 500;

$font-weight-regular [private]

scss
$font-weight-regular: 400;

$font-weight-light [private]

scss
$font-weight-light: 300;

$line-height-display [private]

scss
$line-height-display: 80px;

$line-height-h1 [private]

scss
$line-height-h1: 48px;

$line-height-h2 [private]

scss
$line-height-h2: 40px;

$line-height-h3 [private]

scss
$line-height-h3: 32px;

$line-height-title [private]

scss
$line-height-title: 29px;

$line-height-subheading [private]

scss
$line-height-subheading: 25px;

$line-height-body [private]

scss
$line-height-body: 22px;

$line-height-body-alt [private]

scss
$line-height-body-alt: 21px;

$line-height-caption [private]

scss
$line-height-caption: 19px;

$font-sizes [private]

scss
$font-sizes: (
  'display': $font-size-display,
  'h1': $font-size-h1,
  'h2': $font-size-h2,
  'h3': $font-size-h3,
  'title': $font-size-title,
  'subheading': $font-size-subheading,
  'body': $font-size-body,
  'body-alt': $font-size-body-alt,
  'caption': $font-size-caption,
  'link': $font-size-link,
  'icon': $font-size-icon,
);

map of the font sizes

Used By

@mixin use-font()

$font-weights [private]

scss
$font-weights: (
  'bold': $font-weight-bold,
  'semibold': $font-weight-semibold,
  'regular': $font-weight-regular,
  'light': $font-weight-light
);

map of the font weights

Used By

@mixin use-font()

$line-heights [private]

scss
$line-heights: (
  'display': $line-height-display,
  'h1': $line-height-h1,
  'h2': $line-height-h2,
  'h3': $line-height-h3,
  'title': $line-height-title,
  'subheading': $line-height-subheading,
  'body': $line-height-body,
  'body-alt': $line-height-body-alt,
  'caption': $line-height-caption,
  'link': $line-height-link,
);

map of the line heights

Used By

@mixin use-font()