Typography and Font Hierarchy

User Experience Designer Seattle

A set of rules around which typefaces, and what sizes to use them at, in a collection of pages or website. Limiting the number and size of typefaces and having clear rules about where they are used can make content more readable and make the experience more humane.

Heirarchy and Size

Page Title

What’s the page about? Make that the title, and make it the biggest thing on the page. Only one thing should use that size. For example 36 pixels, or its equivalent in em or percentage values, is a great size for a page title.

Header

Break your content into major topics. Those are headers and they should be smaller than the page title but larger than everything else on the page except the page title. For example 23 pixels is a fine header size.

Subheader

Within your major topics you will have sections. The titles for these are subheaders and they should be smaller than headers but larger than the body copy (I believe you see the pattern here).

Body Copy

Paragraphs and the rest of the page should be set in something readable. I find that 13 or 14 pixels, or equivalent in em or percentage values, is not to large and makes the page easier to consume.

The Value of Limiting Typefaces

I like to pick a single typeface and use different variations of it. I will sometimes use a second font as a page title font but I find that using a single typeface is one of the most consistent ways to unify a site or app.


Learn more & contact me on LinkedIn        Amadeo LLC / Seattle WA USA