How Reducing Different Type Sizes Helps Readability

This is something that I’ve recently found very useful in helping a page be easy to read. One particular recent project that I worked on was a financial website similar to Mint. The first pass I took I only used one size (14) and I began differentiate the type only by using color and weight. It helped the page feel very clean and easy to look at specially considering the amount of information that was on the page. The only other size I added on the page content itself was a larger header style to make a clear entry point.

For this Wordpress blog I made all the text 14 and the only emphasized the post and page headers by making them larger and bolder.

It’s like building a puzzle, depending on the pieces that you want to emphasize you go up or down the scale first by weight, then by color and last by size. Switching to a secondary font would create even a bigger separation and as such should be reserved for unique elements like the navigation, logo or promotional touts.

One other thing I noticed on the project I mentioned before was that selecting a font that sets narrower (such as Lucida Grande) is better for a layout with large amounts of information as opposed to one that sets a bit wider (like Arial). This became specially apparent in a spreadsheet-like page I had to put together. I was able to fit many more columns on the page with Lucida Grande.