Designing websites and creating information hierarchy through the use of typographic colour.
Many a website design has involved the careful consideration of the colour palette. Whether chosen to evoke a particular emotion or attract a particular consumer, or pulled from a client’s branding guidelines, colour remains important as ever. A well-designed colour palette can highlight important information, seduce a user into performing an action, or provide valuable feedback to enhance user experience.
But what if we didn’t have colour? What about accessibility? What if your users have trouble reading your website?
FACT: One out of 255 women and one out of twelve men have some sort of colour vision deficiency. These statistics include colour blindness (there are varying severities of the condition), whilst taking into account any difficulty distinguishing varying hues than someone with greater colour acuity (source: X:Rite).
Typographic colour in web design
With those statistics in mind, it’s important to consider that colour is not the best way to create information hierarchy. Yes colour is a powerful tool, but the most effective indicator is in fact contrast – the difference between light and dark.
So let’s talk about a different type of colour—typographic colour. This does not refer to text colour such as blue, red or green, but rather the relative shade generated by a line or paragraph of text when viewed as a whole. While hierarchy can be easily established through changes in typeface and colour; typographic hierarchy can work without these more obvious visual cues. Figure 1 (above) presents an example of the same text block set in varying typefaces. By blurring or squinting at each paragraph, differences in typographic colour are visible.
Seminal Canadian typographer Robert Bringhurst describes typographic colour:
The darkness of type as set in mass, which is not the same as the weight of the face itself. The spacing of words and letters, the leading of lines, and the incidence of capitals, not to mention the colour (i.e. darkness) of the ink and of the paper it is printed on, all affect the colour of the type.
With the obvious exception of ink on paper, every web designer should make decisions on type spacing (also tracking—the space between letters), measure (the width of a text block), case and tracking (the space between letters). Why make these decisions? They affect both the legibility and prominence of information on a web page. Not only can we affect user behaviour and experience, but any user’s response to contrast, shape, texture and composition is almost universal. We can use these largely predictable behaviours to enhance user experience by guiding a user’s eye to important information or by encouraging them to click a call-to-action link.
The Common Room website design
Our recent design of The Common Room’s website allowed us to consider typographic colour to influence the client’s users.
The Common Room’s design is anchored by the bold geometric forms of FontFabric’s Intro—a display typeface perfect for headline text. (1) This is coupled with Intro is Andrew Paglinawan’s Quicksand (2), a similarly-geometric sans serif typeface with a matching, square x-height (the height of the lowercase letters, typically illustrated by the letter x). The x-height of any font is often the starting point when measuring its proportion, making it a good guide when comparing typefaces. Any difference in x-height from font to font can alter the aesthetics of a block of text, much like changing the typeface entirely. As shown in Figure 2 (above), these changes significantly alter typographic colour and hence the look and feel of the design.
Similar proportions create a harmonious pair, creating a consistent tone for the content. A final contrasting font, Dharma Type’s all-capitals industrial sans Bebas Neue helps highlight subhead text for better hierarchy in The Common Room’s copy. Bebas Neue’s condensed form makes it ideal for the website’s side content, where space is limited.
Information hierarchy using typographic colour
Looking at The Common Room website, the visual hierarchy becomes clear. To better demonstrate the presence of typographic colour, the website’s colours have been desaturated.
As before, blurring or squinting reveals changes in typographic colour, promoting readability and presenting the website’s content with greater clarity. Starting with our most important element—the headline text (1). Choosing Intro’s heaviest weight (black) and increasing the relative size of the text creates contrast with the rest of the copy, ensuring the header is most noticeable. Nothing draws the eye like a change in contrast—the bold weight of the headline creates a dark typographic colour against the website’s white background. The subhead (or deck) underneath (2), is the next most-noticeable, summarising the content’s message. The body copy (3) uses the ample leading and a relatively short measure to ensure text is most readable. Dispersed within the body copy are content headers set in Bebas Neue (4), using its dense characters to create contrast that grab the user’s attention and allowing them to skim content if needed. Content subheads (5) are again in Quicksand, but are not set in all capitals, creating a slightly lighter colour to match their position in the information hierarchy.
Call-to-action buttons (6) also use Bebas Neue to provide the most contrast with the other two typefaces and to take advantage of space constraints. As with the subheads, the condensed, industrial form of the font helps draw the user’s eye, with the purpose of helping them commit to clicking on the button.
Side copy headers use Bebas Neue again (7), set at a smaller size so as not to distract from the main copy. Generous white space around the side copy gives it a lighter colour, helping it recede from the periphery of the user’s vision when they are doing what is most important—reading the main copy of the site.
Guiding the user
The typographic colour of The Common Room design helps guide the user through the website.
- Page header provides context.
- Subheader deck gives further detail of page content.
- Body copy provides pleasant reading experience.
- Content subheaders allow for information hierarchy.
- Call-to-action buttons are bold and prominent to promote user action.
- Side content has a lighter colour so as not to distract the user as they read the more important body copy.
As we’ve previously outlined, users make their minds up about a website in a mere half-second, meaning a good first impression is vital. Creating information hierarchy with typographic colour can make a website significantly easier to view when making that snap decision.Find this interesting?