DS
blog about contact search

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

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.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 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. http://basehold.it is a useful tool for checking vertical rhythm in the browser.
  2. http://www.modularscale.com is also handy.
  3. It’s possibly days later…