Some steps to ensure typographic consistency in the browser

I push a lot of project time towards working out rules to ensure text is presented in a consistent, predictable and manageable way. Below is a very simple and straight-forward set of steps I've noticed work as a logical progression when setting up foundation rules for type with CSS.

Note the order of the list: this 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).

Steps

1. Select a typeface.
2. Work out your ideal paragraph font-size.
3. Work out your ideal paragraph line-height.
4. Work out your ideal measure/line-width.
5. Choose the paragraph margins.
6. Check the vertical rhythm and massage to excellence.¹
7. Choose a modular type scale to help generate variations on your base font size.²
8. Go back and work on vertical rhythm again, this time including your non-paragraph text elements.
9. Massage, and massage again.

Remember: if you adjust an earlier step, you'll probably need to re-adjust all following steps.

You're not finished

Steps complete!³ 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.