h1-h5, p sensible defaults (suggested initial settings)
dancaron opened this issue · 7 comments
Hi,
This isn't an issue, so much as a request/suggestion.
Would love to see some sensible defaults (reasonable initial settings for a new project) for h1-h5 and p for the $typi map, perhaps at your given breakpoints of 600, and 1200. Maybe with line-height settings for golden ratio (1.618) as well. Just an idea.
Thanks for releasing this great utility!
For instance, http://gakimball.github.io/responsive-modular-scale/ suggests perfect fourth and perfect fifth intervals.
For example, here are some potential default settings. The null values increase at a rate of 1.25 (major third interval), the small values increase at a rate of 1.33 (perfect fourth) and large values increase at a rate of 1.5 (perfect fifth). Line height is golden ratio-ish.
$typi: (
base: (
null: (18px, 1.618),
small: (18px),
large: (18px)
),
h5: (
null: (22.5px, 1.618),
small: (23.9px),
large: (27px)
),
h4: (
null: (28.1px, 1.618),
small: (31.9px),
large: (40.5px)
),
h3: (
null: (35.2px, 1.618),
small: (42.6px),
large: (60.8px)
),
h2: (
null: (43.9px, 1.618),
small: (56.8px),
large: (91.1px)
),
h1: (
null: (54.8px, 1.618),
small: (75.7px),
large: (136.6px)
)
);
This seems to be a little better.
$typi: (
base: (
null: (18px, 1.25),
small: (18px, 1.33),
large: (18px, 1.5)
),
h5: (
null: (22.5px, 1.25),
small: (23.9px, 1.33),
large: (27px, 1.5)
),
h4: (
null: (28.1px, 1.25),
small: (31.9px, 1.33),
large: (40.5px, 1.5)
),
h3: (
null: (35.2px, 1.25),
small: (42.6px, 1.33),
large: (60.8px, 1.5)
),
h2: (
null: (43.9px, 1.25),
small: (56.8px, 1.33),
large: (91.1px, 1.5)
),
h1: (
null: (54.8px, 1.25),
small: (75.7px, 1.33),
large: (136.6px, 1.5)
)
);
Why would suggestions help?
I don't believe in standard starting points for typography, unfortunately. So 🤷♂️