Jim Lindley Notes

The Elements of Typographic Style

December 30th, 2007

If you do any layout or design work, and are self-taught (like too many of us web developers), you owe it to yourself to check out this book. Read on to find out why.

The Elements of Typographic Style

This book is full of practical tips on making it easier for users, I mean readers, to peruse your site. I’ll give a few examples, but even more then the tips, understanding why words are put down to page and screen as they are is a subject deeper then I’d ever thought. The author makes a point that the more limited your choices, the more important the choices that remain are. In an environment like the web, with its handful of fonts and poor resolution, the remaining elements of typography under your control become all the more important. If you don’t get the spacing and layout right, and handled with care, you’ve blown past the only control you ever have.

I’ll give a few examples, from just the first couple chapters (the book goes into much greater detail and into many other subjects):

Headings: A simple thing, but the book suggests only increasing one variable when making headings, or levels of headings. So if your text is 14px, either increase the size for the heading, to say 18px, or make the type bold but the same size. And each level of additional headings gets the same treatment. No need to jump from 12px plain to 24px bold underlined italic in one go.

Color: not like orange or blue, but instead how dark a gray the text appears, if you average the black and white together. The thicker, more condensed and less space between letters and lines, the darker the color. Keeping on eye on this helps to make the page seemed balanced. If your main text and your sidebar appear similar in color, despite being different sizes and styled differently, then the page will seem in harmony.

Leading/line-height/x-height/etc: A very thorough coverage of spacing of elements. Many of these CSS properties I’d tweak to try to intuitively find something that looked good, but now I know the traditional proportions and methods for choosing them consciously. I see a great reduction in trial and error already.

The only bad thing about reading this book is that I want to redo the typography on half the sites I’ve ever put together, including this one. It’s like suddenly becoming a carpenter and seeing how unlevel that porch is that never used to bother you.