Typography tokens, re-evaluating `--css-variables`

[badlydrawnrob]

Material uses typographic tokens
Github uses --h1-size-mobile and --h1-size
Our baseline grid is 4px and 24px line-height.
All should preview in a specimen file

• What are typographic and design tokens?
• What --css-variables is Github using? Why?
• Is normalize.css outdated? #43
• Just use CSS/HTML (not less or javascript) #42
• Too many --font-size and --spacing variables? #49
• Rename --color variables? #39
• Should optical size be a variable?¹

It might be worth giving a little thought to the difference between device sizes (iphone, iPad), medium screens (laptops) and large screens (such as iMac), and how the typography works moving between those sizes. I'm not currently doing a whole lot of that with this repo, as it's predominantly for print, but any themes that derive their settings from this repo might want to. Print First CSS shouldn't stand in their way.

Print First CV could be viewed as a HTML document, a PDF, or printed out on paper.

Footnotes

1. Some fonts have font-variation-settings and require specific styles (for instance, font-style: italic doesn't always work the way you expect). I don't want to use functions or mixins, only plain css. Perhaps these can become font tokens? ↩