Typography

Default Typography

Default Typography is set into sass/welanstrap/base/_typography.sass (see file)

Following, the default values of Welance Bootstrap using modular scale SASS plugin, which you can change as you please by overriding them.

To understand how this works and to be able to visually set up the following variables, head to the modular scale page and play with it. 🤓

Heading 1

Responsive MS font-size: 7 (steps up from base)

Heading 2

Responsive MS font-size: 6

Heading 3

Responsive MS font-size: 4

Heading 4

Responsive MS font-size: 2

Heading 5

Responsive MS font-size: 1

Heading 6

Responsive MS font-size: 0

paragraph + all other texts

Responsive MS font-size: 0

NOTE: you can move at "minus" from the base of 1em (eg. "-3" means 3 steps down from the base).

Base

1em (most browsers = 16px)

Modular scale range (ratio + breakpoint)

Once you've defined the "modular scale steps" for headings (and all the texts you want), you can choose to enlarge or shrink based on a ratio value, depending on active breakpoints. Following the default breakpoints and their default ratio to enlarge/shrink.

  RATIO   Breakpoint(em)   Breakpoint (px)
  
  1.1     20em,            //320px
  1.15    36em,            //576px
  1.17    48em,            //768px
  1.18    62em,            //992px
  1.2     75em,            //1200px
  1.23    105em;           //1680px

Welance Boostrap