Design

Typography

I have chosen the following typefaces and font sizes to be as accessible as possible.

Font

I use the Google Font "Rubik" in the following weights:

  • Regular
  • Medium

Headings

Avoid skipping heading levels: always start from <h1>, followed by <h2> and so on

Tag Name Mixin Names Values
H1 h1-mobile / h1-desktop 37px / 43px
H2 h2-mobile / h2-desktop 29px / 34px
H3 h3-mobile / h3-desktop 23px / 27px

Sizes

The following font sizes use REM values to help scale content with a user’s personal preferences.

Mobile

Example Mixin Name Value
Example Text font-size-xxl-mobile 47px
Example Text font-size-xl-mobile 37px
Example Text font-size-l-mobile 29px
Example Text font-size-m-mobile 23px
Example Text font-size-s-mobile 18px
Example Text font-size-xs-mobile 14px

Desktop

Example Mixin Name Value
Example Text font-size-xxl-desktop 55px
Example Text font-size-xl-desktop 43px
Example Text font-size-l-desktop 34px
Example Text font-size-m-desktop 27px
Example Text font-size-s-desktop 21px
Example Text font-size-xs-desktop 17px