www.north-square.com
+44 (0) 845 47 48 456 info@north-square.com
North Square completes an evaluation of Tandridge Borough Council. We have now worked for over 50 local authorities in the United Kingdom. View major clients, testimonials, and request references in our Client Portfolio.
(January 2010)
27 June 2009
Most website developers do not think about the relationship between usability and content. However, one of the most important aspects of usability is making content easy to read. In our Website Evaluation Service, we have an assessment called Font Hierarchy and this article explains the principal and what you need to consider when developing a font hierarchy for your website.
A font hierarchy is creating a set of heading 'levels' that give users an understanding of how a set of paragraphs (or a single paragraph) fits into the rest of the page. The heading levels are normally shown by different font styles, with the most important heading – the page title – are generally the largest, boldest font, running down to the smallest level, which would normally be the smallest and least bold font.
The first question you will need to answer is, how many 'levels' do I need? If 95% of your pages only need 2 levels of headings, can the content on the other 5% be changed so that you still only require 2 levels? Generally, it is better to limit levels to 2 or 3 (excluding the page title).
Ensure that each depth level is instantaneously distinguishable from other levels. Remember that you are trying to communicate an appreciation of content 'depth'. The hierarchy will not work if the levels are too similar.
Once a font hierarchy has been developed, that approach must be applied consistently across the whole website.
On the North Square website, we have a page title and 3 levels of headings. We use Cascading Style Sheets to control most aspects of headings: font, size, boldness, spacing prior to headings and spacing after headings. The table below summarises the font hierarchy used on this website.
| Heading Type | Font Size | Boldness | Space Above | Space Below |
|---|---|---|---|---|
| Page Title | 150% | 700 | 0px | 20 or 40 pixels |
| Heading 1 | 130% | 600 | 40px | 1 line break |
| Heading 2 | 100% | 600 | 1 line break | 0px |
| Heading 3 | 85% | 600 | 1 line break | 0px |
| Body text | 85% | 100 | Not applicable | Not applicable |
Other techniques used to differentiate headings are indentation (normally used on lower level headings), icons or graphics, font colour (although use with caution because colour nearly always identifies link text),
by David Miller
Website Analyst,
North Square Interactive
North Square Interactive is an online consultancy that delivers cost effective, best practice, Website Evaluation reports, Usability Testing, Website Competitor Analysis, Accessibility Audits, Browser Testing, and more. For further information about all of our services, please visit our Online Consultancy Index.
Home
Resources
Request Demo
Contact Us Online