Typography variables (#2) · Issues · pubsweet / design

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	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	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

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 Jan 15, 2018 by julien