typographic-styles.css

// 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%;
}