Typography

[Studio384]

This pull request implements the basic Typography scale as discussed in #6.

Note: While button and helper text are documented under Typography in #6, they are out of scope for this issue and will be addressed when adding Button and Input respectively. They aren't stand-alone text styles.

Typography

Basic typography

The basic values for typography are set as followed:

$font-size-base: 1rem !default;
$font-size-small: .875em !default; // Relative to its parent

$font-size-small is used for both the .small-class and <small>-element as its default font style. Note that its unit is em and not rem.

Headings

Heading, by default, scale entirely with the $font-size-base to provide consistency. The 6th heading level is the same size as a paragraph, from there the scale goes up by 25% of the base with each step, except for the 1st heading level which sees an increase of 50%.

$font-sizes-heading: (
  h1: $font-size-base * 2.5,
  h2: $font-size-base * 2,
  h3: $font-size-base * 1.75,
  h4: $font-size-base * 1.5,
  h5: $font-size-base * 1.25,
  h6: $font-size-base
) !default;

Marketing

The marketing stylings are a continuation of the headings. Unlike the headings, they are not based on the $font-size-base-value, but they do continue from the heading scale. The smallest marketing class provides text the same size as the 1st heading level.

$font-sizes-marketing: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
) !default;

Lists

This pull request also introduces some class for removing the list style and placing list items inline.