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-link [private]
scss
$font-size-link: 14px;
$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-link [private]
scss
$line-height-link: 22px;
$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