Clear Font, Great Contrast
Getting started with a nice example that shows a good understanding of the need for clear layout and typography is JamieOliver.com, the website of the popular British chef and nutritional campaigner.
Several examples exist on the home page of good use of typography: the website logo, the use of the sans serif text for the menu and the Georgia font for the section headings.
What is also important here is the wide selection of colors in use for both text and backgrounds. There isn’t a single word that cannot be read due to contrast issues. Websites that have been constructed with a poor understanding of contrast will be difficult to read, but everything on offer here is focused on assisting the eyes.
ColourPixel and Poor Contrast
In stark contrast (!) comes this website, www.colourpixel.com. On first view, it looks like an interesting, energetic and bubbly online presence, and the majority of the content is clearly designed and easy on the eye.
The big problem comes at the top of the page, where the designer introduces himself. While the sizing of the lettering is perfectly matched with the enlarged pixels of the background in terms of size and dimensions, it falls down with the issue of contrast.
People with difficulty reading (perhaps due to partial sightedness) require websites to feature text on clearly defined backgrounds. In the example here, the white text appears on various shades of red, a visual collision that will cause problems for some.
Ultimately, this is an accessibility issue that the designer should be aware of given his credentials.
Combining Color, Space and Typography
Designer Anthony Dry has cleverly matched a white background on a sci-fi TV show website with two shades of blue that are associated with the franchise in question, but more pertinent is the way in which the Georgia font is combined with Arial for both titles and standard text.
Choosing the right font size is just as important as avoiding issues of contrast. The reader has to be aware of what each section of text is telling them. In this example the mid-blue heading text in the Georgia font provides a clear indication that it is the beginning of a small section, of which the gray text below is a continuation. Meanwhile the bullet points beneath the images utilize bold type (and are underlined when the user rolls the mouse pointer over the text) to indicate that they are links .
The Importance of Paragraphs
Meanwhile the example above comes from a popular online cookery site that really should know better.
While the section heading is clear, the reminder of the text is nothing more than noise and interference. There are no contrast problems, but the lack of basic typography concepts such as line returns means that the instructions that are supposed to be communicated are lost.
It would seem that a website upgrade or reformatting has caused the step-by-step nature of the recipe to become obscured, and the sheer amount of text when combined with the narrow line height results in a recipe that might start off well but will soon be ignored in favor of the reader making it up as they go along.
As you may know, there are some differences between web and print typography, and there are some situations in which the above approach might work in a magazine or book. Unfortunately it fails online, which is a shame as the rest of the website takes care to present fonts and a page size that should be suitable for viewing on any monitor or resolution.
Making Use of Styling
Here is a delightful example of how colors and fonts can be combined, one that also features a higher-than-usual line height. The result is a pleasurable reading experience, with the main post column heading featuring larger text and a smaller line height that contrasts with the column content.
As you should have noticed by now (if you didn’t already know) contrast is very important in design, and is used in websites to help the eyes find their way across the page.
What is most interesting in this example however is the use of caps for the first few words of the first paragraph, as well as the drop cap “C" at the beginning of the post.
Call the Design Police!
There are countless design crimes committed in this example, from the poor website logo to the telephone wire horizontal rule. Clearly there are contrast issues here, and the designer seems to have been motivated by the green/black combination of the Matrix movies.
However the real problem with the typography here is the selection of two barely used fonts. The green text appears to be Comic Sans while the secondary headings appear to be Courier, usually found in raw text editors or when the source of a web page is viewed.
Both fonts have difficulty in clearly conveying the message of the subject matter because they are hard to read. Comic Sans is designed to be used in black on a white background in groups of no more than 30 words, while Courier’s natural home is in your computer’s command prompt. The result of combining the two is a website that excludes its readers.
When User Interfaces Inform Webpage Design
Microsoft’s Windows Phone 7 (and soon Windows 8) features the Mango user interface, an instant design classic whose existence has already lead to some unrelated sections of the Microsoft website adopting the narrow, sans serif type face.
The above example reflects the Metro UI by adopting a strong accent color for the heading, combined with a black bold subheading and the commonly-seen gray sans serif (usually Arial) text for the main content.
Note the line spacing between the three elements, the header 1, header 2 and the main text – each decreases as the importance of the text changes. One thing we haven’t covered so far here is the importance of choosing a strong color for hyperlinks within passages of text; as you can see in this example, the strong red accent color from the heading is reused to great effect.
Classified Color Collision
Craigslist is notorious for being difficult to use, and the story is the same wherever you are in the world. Over the years various attempts have been made to try and make the site more usable while retaining its “classifieds ads" feel, but as you can see in the example above this isn’t entirely successful.
While the use of Georgia as the heading font works well in establishing a newspaper feel, the column width and the overuse of blue to represent hyperlinked text collides to produce a wall of text, an unending list. Typographically, the color and spacing of the text result in a page that is difficult to read and easy to avoid.
Creating Sections by Combining Font and Color
In this example from ProBlogger, we see a collection of perfect examples of good web typography. A clear, sans serif heading in white with a deep gray background to contrast; less important information (the date and number of comments) is represented in a light gray on a slightly darker gray panel; the summary or preview from the article is then given a clear white font of a larger size than the other section which has the benefit of a quite wide line height.
This is of course just the focus on the main “featured" article, and as you will see in the example, the menu and the secondary sections all include variations on the featured section.
The key here is to underline that while good web typography can feature different font faces and colors, a unified feel can be created with color and spacing, and by assigning particular purposes to each font.
Good or Bad?
Clearly there is a need to apply CSS styling to websites in order to achieve the highly polished designs seen elsewhere here, from background position to the specifics of text styling. With the previous examples swinging from good examples of web typography to bad, you might expect this example to come under the “bad" category, however…
While there is a lot of blue (the default color for hyperlinked text) this is a good example, one that clearly arranges the text and communicates headings, paragraphs and information and can be put together with a low level of CSS knowledge (or arguably, purely with HTML).
- All images are property of their respective owners; screenshots taken by author.