The Golden Rule of Typography and Web Design
Afterward, Chris Pearson of Thesis Theme took the stage to talk about typography as it relates to web design.
Chris was after the Golden Ratio of typography: the most mathematically pleasing text size, leading, and text width possible. He talked about different examples of the Golden Ratio in nature–sunflowers, galaxies, DNA–and wanted to find the same ratio for text on a web page.
Chris talked about Tschichold’s Golden Page Section, a proposed “perfect arrangement” of a block of text as it relates to the printed page, and explained why it didn’t solve the fundamental problem. Text defines a layout, so any solution must include how text is arranged. After searching for an equation, Chris identified what he believes is the Golden Ratio for typography and demonstrated a typography tool he created based on these equations to give the optimal text size, leading, and and text width (a text tool he unfortunately asked we not link to because he has not officially announced it yet).
This blog has 12px font size and 18px line height in a 655px width space. According to his calculator, the ideal typography is actually 16px font size and 26px line height, and looking at that typography, it does seem easier to read. If we really wanted to stick with 12px font size, it says, we should open up the line height a bit, to 22px.
He also gave some tips (well, personal opinions) for encouraging readership:
- Keep the beginning of your article thinner than the rest; for example, by floating an image.
- Keep your paragraphs short and easy to read.
- Convey key points in image captions.
- Don’t clutter up your sidebar with stuff that doesn’t matter; it distracts your readers. If possible, don’t even have a sidebar.
- Don’t use any main fonts under 14pt–if possible, 16pt.