Typography

Change various typography styles.

SCSS:

$body-bg: $gray-100;
$body-color: $gray-700;

$font-family-base: 'Roboto', sans-serif;
$font-size-base: 1.5rem;
$line-height-base: 1.3;
$line-height-sm: 1;

$link-color: $info;
$link-decoration: none;
$link-hover-color: shift-color($link-color, $link-shade-percentage);
$link-hover-decoration: underline;

$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: $font-weight-light;

$h1-font-size: $font-size-base * 3.5;
$h2-font-size: $font-size-base * 3;
$h3-font-size: $font-size-base * 2.5;
$h4-font-size: $font-size-base * 2;
$h5-font-size: $font-size-base * 1.5;
$h6-font-size: $font-size-base;
$headings-font-weight: $font-weight-bold;
$headings-line-height: $line-height-sm;
$headings-margin-bottom: $spacer;

$display-font-sizes: (
  1: $h1-font-size * 1.5,
  2: $h2-font-size * 1.5,
  3: $h3-font-size * 1.5,
  4: $h4-font-size * 1.5,
  5: $h5-font-size * 1.5,
  6: $h6-font-size * 1.5
);
$display-font-weight: $font-weight-light;
$display-line-height: $headings-line-height;

Headings

<h1> heading

<h2> heading

<h3> heading

<h4> heading

<h5> heading

<h6> heading

Display headings

Display heading 1

Display heading 2

Display heading 3

Display heading 4

Display heading 5

Display heading 6

Lead paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.