Modern CSS techniques to improve legibility | Smashing Magazine

A great overview of techniques to help improve text legibility, working with the browser rather than against it to be as inclusive as possible:

• Use rem and em units for margins and white-space around text so that it "preserves the vertical rhythm" if a user changes text size;
• The new (and not yet fully supported) font-size-adjust property is excellent for both preserving optical design and preventing webfont loading "flashes" by ensuring fallback fonts use the same optical height (this calculator can be used to quickly determine the ideal ratio for a system font):

@supports (font-size-adjust: 1;) {
    article {
        font-size-adjust: 0.5;
    }
}

• Set an optimal line-height by using x-height (height of the x character); the browser default standard is 1.2 but that's optimised for Times New Roman (TIL 🤯). Instead a combination of calc and the ex unit can be beneficial:

p {
    line-height: calc(1ex / 0.32);
}

In the right reading contexts, this rule sets an optimal line height for both serif and sans-serif fonts, even when typographical tools are not available or when a user has set a font that overwrites the one chosen by the designer.

• The calc value can then be combined with a scale to determine type hierarchy e.g. h1 could be calc(1ex / 0.42) and so on;
• Allowing users to dynamically control properties like letter-spacing, word-spacing, font-size etc. with sliders or other input options can be beneficial, particularly for people with difficulties reading text (dyslexia, vision impairment etc.);
• Optimal reading flow is achieved by ensuring travel for the eye between the end and start of lines isn't too extreme. Roughly 60-70 characters tends to be the sweet spot, so setting a width using the ch unit is ideal:

p {
    width: 60ch;
    max-width: 100%;
}