Skip to content

Instantly share code, notes, and snippets.

@Asjas
Created August 4, 2020 19:44
Show Gist options
  • Save Asjas/d2fb0a2360de314cc33488fda2d12ede to your computer and use it in GitHub Desktop.
Save Asjas/d2fb0a2360de314cc33488fda2d12ede to your computer and use it in GitHub Desktop.
// Use a font size that makes lowercase
letters half the specified font size
@supports (font-size-adjust: 1;) {
article {
font-size-adjust: 0.5;
}
}
// optimal line height
p {
line-height: calc(1ex / 0.32);
}
// typographic scale to be set based on the font size
// scale can be set from 30 (0.30) to 45 (0.45)
h1 {
font-size: 2.5em;
line-height: calc(1ex / 0.42);
margin: calc(1ex / 0.42) 0;
}
h2 {
font-size: 2em;
line-height: calc(1ex / 0.42);
margin: calc(1ex / 0.42) 0;
}
h3 {
font-size: 1.75em;
line-height: calc(1ex / 0.38);
margin: calc(1ex / 0.38) 0;
}
h4 {
font-size: 1.5em;
line-height: calc(1ex / 0.37);
margin: calc(1ex / 0.37) 0;
}
p {
font-size: 1em;
line-height: calc(1ex / 0.32);
margin: calc(1ex / 0.32) 0;
}
// optimize reading flow
// 60ch to 80ch
p {
width: 60ch;
max-width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment