Skip to content
Daniel Shaw ยท WordPress & WooCommerce Developer Wellington, New Zealand

๐Ÿ‘‹ Not available for new client work right now!

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).


  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.1
  7. Choose a modular type scale to help generate variations on your base font size.2
  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!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.

  1. is a useful tool for checking vertical rhythm in the browser.
  2. is also handy.
  3. It's possibly days later…