CSS: Implement parametric fluid layout
This is a patch to #32 (closed)
Enforce invariants
Accessibility
-
Font sizes are at least 12 px. -
All sizes scale proportionally with the user-set rem/"font size zoom" (Ctrl+, Ctrl-). -
Font sizes respect the conventional viewing distance on different screen sizes: Medium font sizes scale linearly as the screen gets larger. Only the smaller side of the screen is counted. -
Lines of text never overlap.
Aestetics
-
The x-height of a line is a harmonious fraction (1/3 or 2/5) of the line height. -
The x-heights of the first lines in aligned items on separate columns are aligned by their centers ("anchor lines"). -
Font sizes on the scale are distinguishable from each other and illustrate hierarchy. -
Line heights of different scale points (s, m, l, xl, xxl, xxxl) have a harmonious proportion to generate many "coincidental lines".
Contrast
-
Across a scale, the lengths correspond to a dampened exponential curve. -
Across the screen sizes, the contrast between the scale points increases.
-
Translate the calculations into ts -
Test regressions -
Backport parameter fixes to spreadsheet
I've adapted the scale in Google sheets to make it more parametric and to output less points:
Edited by Flupsi