Skip to content

Instantly share code, notes, and snippets.

@terkel
Last active August 4, 2018 02:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save terkel/3edd942199e07e86d37ad78ef7dd3887 to your computer and use it in GitHub Desktop.
Save terkel/3edd942199e07e86d37ad78ef7dd3887 to your computer and use it in GitHub Desktop.
h6 { font-size: 0.67em; } // 2/3 // 10.72px
h5 { font-size: 0.83em; } // 5/6 // 13.28px
h4 { font-size: 1em; }    // 1   // 16px
h3 { font-size: 1.17em; } // 7/6 // 18.72px
h2 { font-size: 1.5em; }  // 3/2 // 24px
h1 { font-size: 2em; }    // 2/1 // 32px
xx-small:  9px // 0.5625em
 x-slall: 10px // 0.625em
   small: 13px // 0.8125em
  medium: 16px // 1em
   large: 18px // 1.125em
 x-large: 24px // 1.5em
xx-large: 32px // 2em

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;

https://material.io/design/typography/the-type-system.html#type-scale

Size
H1 96
H2 60
H3 48
H4 34
H5 24
H6 20
Subtitle 1/Body 1 16
Subtitle 2/Body 2/Button 14
Caption 12
Overline 10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment