Typography

Available Sass Variables and default values

$font-sans-serif: "Arial", "Helvetica Neue", "Helvetica", "sans-serif"
$font-serif: "TimesNewRoman", "Times New Roman", "Times", "Baskerville", "Georgia", "serif"

$text-color: $emperor
$text-color-dark: $mine-shaft
$text-color-light: $dusty-gray

$font-size-largest: 22px
$font-size-large: 18px
$font-size: 16px
$font-size-small: 14px
$font-size-smallest: 10px

$base-line-height-ratio: 1.4

$font-line-height: $font-size * $base-line-height-ratio

$font-light: 300
$font-normal: 400
$font-semibold: 500
$font-bold: 700

$font-size-h1: 32px
$font-size-h2: 24px
$font-size-h3: 18px
$font-size-h4: 16px
$font-size-h5: 14px
$font-size-h6: 12px

$font-weight-h1: $font-semibold
$font-weight-h2: $font-semibold
$font-weight-h3: $font-semibold
$font-weight-h4: $font-semibold
$font-weight-h5: $font-semibold
$font-weight-h6: $font-semibold

$font-h1: $font-sans-serif
$font-h2: $font-sans-serif
$font-h3: $font-sans-serif
$font-h4: $font-sans-serif
$font-h5: $font-sans-serif
$font-h6: $font-sans-serif

$h1-line-height: $font-size-h1 * $base-line-height-ratio
$h2-line-height: $font-size-h2 * $base-line-height-ratio
$h3-line-height: $font-size-h3 * $base-line-height-ratio
$h4-line-height: $font-size-h4 * $base-line-height-ratio
$h5-line-height: $font-size-h5 * $base-line-height-ratio
$h6-line-height: $font-size-h6 * $base-line-height-ratio

$h1-margin-top: 20px
$h2-margin-top: 20px
$h3-margin-top: 20px
$h4-margin-top: 20px
$h5-margin-top: 20px
$h6-margin-top: 20px

$h1-margin-bottom: 10px
$h2-margin-bottom: 10px
$h3-margin-bottom: 10px
$h4-margin-bottom: 10px
$h5-margin-bottom: 10px
$h6-margin-bottom: 10px

$h1-color: $brand-primary
$h2-color: $brand-primary
$h3-color: $brand-primary
$h4-color: $brand-primary
$h5-color: $brand-primary
$h6-color: $brand-primary

Heading 1

This is content to show margin on the above element

Heading 2

This is content to show margin on the above element

Heading 3

This is content to show margin on the above element

Heading 4

This is content to show margin on the above element

Heading 5

This is content to show margin on the above element

Heading 6

This is content to show margin on the above element

Sans-serif Font Family

In a great hall with pillars hewn out of the living stone sat the Elvenking on a chair of carven wood. On his head was a crown of berries and red leaves, for the autumn was come again. In the spring he wore a crown of woodland flowers. In his hand he held a carven staff of oak

“Of course, it is likely enough, my friends,” he said slowly, “likely enough that we are going to our doom: the last march of the Ents. But if we stayed home and did nothing, doom would find us anyway, sooner or later. That thought has long been growing in our hearts; and that is why we are marching now. It was not a hasty resolve. Now at least the last march of the Ents may be worth a song.”

Serif Font Family

In a great hall with pillars hewn out of the living stone sat the Elvenking on a chair of carven wood. On his head was a crown of berries and red leaves, for the autumn was come again. In the spring he wore a crown of woodland flowers. In his hand he held a carven staff of oak

“Of course, it is likely enough, my friends,” he said slowly, “likely enough that we are going to our doom: the last march of the Ents. But if we stayed home and did nothing, doom would find us anyway, sooner or later. That thought has long been growing in our hearts; and that is why we are marching now. It was not a hasty resolve. Now at least the last march of the Ents may be worth a song.”

Utility Classes

.light-text
Normal Text (for comparison)
.dark-text

.brand-primary
.brand-secondary
.brand-tertiary
.brand-contrast
.brand-highlight

.bold
.semibold
Normal Text (for comparison)
.light

.font-largest
.font-large
Normal Text (for comparison)
.font-small
.font-smallest

.font-size-11- Font size is 11

.font-size-12- Font size is 12

.font-size-13- Font size is 13

.font-size-14- Font size is 14

.font-size-15- Font size is 15

.font-size-16- Font size is 16

.font-size-17- Font size is 17

.font-size-18- Font size is 18

.font-size-20- Font size is 20

.font-size-24- Font size is 24

.font-size-28- Font size is 28

.font-size-34- Font size is 34

.font-size-40- Font size is 40

.font-size-46- Font size is 46

.font-size-52- Font size is 52

Normal Text (for comparison)
.font-small
.font-smallest

Lists

  • List Item 1
  • List Item 2
  • List Item 3
  1. List Item 1
  2. List Item 2
  3. List Item 3