Typography variables
The purpose of this issue is to come up with a common list of typography variables for theming in pubsweet applications.
Size variables
| Elife asset name | Elife suggested variable | Coko suggested variable | Vanilla variable | Notes |
|---|---|---|---|---|
| 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. |
Typefaces variables
| Elife asset name | Elife suggested variable | Coko suggested variable | Vanilla variable | Notes |
|---|---|---|---|---|
| Primary font style | $font-primary |
Collabra font variables are named based on what the font is refering to. Check below. | ||
| Secondary font style | $font-secondary |
|||
| Contextual label | $font-contextual-label |
|||
| Date | $font-contextual-label-date |
Treated as part of the label | ||
| Section label | $font-section-label |
|||
| Teaser header | $font-teaser-header |
|||
| font family set for the whole app | ||||
| Author font | $font-author |
This font will be used for all the element that the author work on: manuscript and form to submit. | ||
| Reviewer font | $font-reviewer |
This font will be used for all the element that the reviewer work on: reviewing draft and review letter. | ||
| Interface font | $font-interface |
This font is the one use for all the interface element | ||
| @julientaq @Nick |
Edited by julientaq