Body |
$font-size-base-in-px |
$font-size-base |
|
Base measure to set hierarchy from |
Scale |
|
$font-size-scale |
|
This variable is used to calculate the font size of all elements. Check this link for example http://type-scale.com/
|
h1 |
$font-size-h1-in-px |
$font-size * 2 |
|
This font-size should be based on the scale and the font-size-base, meanwhile, the calculation here is a example of how it could work. (using rem should achieve the same result, but break if we use different font for the body and for other elements, as x-height is different -- check the ressource: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
|
h2 |
$font-size-h2-in-px |
$font-size * 1.6 |
|
|
h3 |
$font-size-h3-in-px |
$font-size * 1.3 |
|
|
h4 |
$font-size-h4-in-px |
$font-size * 1.0 |
|
|
h5 |
$font-size-h5-in-px |
$font-size * 1.0 |
|
|
h6 |
$font-size-h6-in-px |
$font-size * 1.0 |
|
|
p |
|
|
|
inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent. |
li |
|
|
|
inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent. |
ol |
|
|
|
inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent. |
label (form) |
|
|
|
inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent. |
a |
$link-font-family , $link-color , $link-font-style , $link-font-weight , $link-underline-color
|
|
|
Link need some styling to be different from the content, let's add some variable that you can change for the link and see what's missing from there. |