I push a lot of project time towards working out rules to ensure text is presented in a consistent, predictable and manageable way. It’s a complex task requiring focus and lots of time.
Below is a very simple and straight-forward set of steps I’ve noticed work as a logical progression when setting up rules for type with CSS. Note the ordered list: the order is crucial because choices made at each step flow into the next.
Caveat 1: as with all worthwhile things, application in the guise of good or bad taste is still completely up to you. I’m 50/50 on which is more of a cliché.
Caveat 2: I am not a designer or typographer (but that’s not really the point here).
- Select a typeface.
- Work out your ideal paragraph font-size.
- Work out your ideal paragraph line-height.
- Work out your ideal measure/line-width.
- Choose the paragraph margins.
- Check the vertical rhythm and massage to excellence.1
- Choose a modular type scale to help generate variations on your base font size.2
- Go back and work on vertical rhythm again, this time including your non-paragraph text elements.
- Massage, and massage again.
Remember: if you adjust an earlier step, you’ll need to re-adjust all following steps.
You’re not finished
Steps complete!3 Does this mean you have great typography? Maybe, but probably not! Does following this approach mean you're now a good typographer? No way!
These steps will simply help with setting up CSS rules towards a predictable outcome, because they work in direct relation to how text renders and behaves in a web browser.