3 Examples: CSS Typography

By | November 8, 2011

Good Typography

Lost World’s Fairs

This team responsible for this site includes the founder of Typekit; it shows what can be achieved with rich web fonts and CSS typography.

Lost World's Fairs

http://lostworldsfairs.com

There are 3 pages, each of which relates to a date and location of a Lost World Fair (1924, 1962, 2040), and the typography adds an important dimension to the personality of each site. As showcase sites, each page uses positioning and spacing in a way that really complements their respective styles.

  • 1924: set in El Dorado, in the Amazon basin, the use of light browns and golds evokes the idea of a golden city but the variability in sizes, weights and styles contribute to the “frontier style” and tone-of-voice established by the graphics and colour scheme.
  • 1962: set in Atlantis, the mix of sans-, slab- and serif fonts definitely gives a sense that this is the near future being imagined from the past, giving a feeling of modernity that’s unknown (like seeing an old film set in the future)
  • 2040: set on the Moon, the sans-serif fonts with smooth curves give a futuristic but friendly feel which is reinforced by the elaborate, other-worldly drop cap. The sloped M of “Moon” appears less traditional than a straight M further adding to the futuristic feel. The main paragraph text, Klavika Sans, is a lot like Droid Sans in that it feels like it has been generated by a machine, but a friendly machine.

So1o

So1o is a project management tool for freelancers. This was one of my examples of a Good Use of Colour in a previous post, but I decided to reuse it as the typography is also an interesting example.

So1o

http://www.thrivesolo.com/

This site provides a good example of using more than 2 fonts in a considered way that improves the design. I counted 4 fonts – Clarendon Light, Bryant Medium, Arial, & Lucida Sans Unicode – however the similarity of the last 3, and the sparing use of type creates subtle differences which increase visual interest instead of adding noise.

It’s also a good example of when breaking a design rule can work – in this case the sin of centring the body text. There are 2 things that about the design that makes this work, and the removal of either would cause the design to suffer greatly for its centring.:

  1. only short paragraphs are used in narrow columns so it easy to keep your place
  2. the page background is a grid giving the eye lines to follow

The design is very open and there is plenty of negative space to avoid the content becoming crowded leaving the user to scroll rather than cram the information into a small space – an option I much prefer.

HTML5 Logo

This is the launch site and landing page for the HTML5 brand and merchandise. Another example from my Good Use of Colour post – no great surprise as you’d expect designers who have properly considered colour to have also given serious thought to typographic styles.

HTML5 Logo

http://www.w3.org/html/logo/

The large, bold sans-serif font, League Gothic 1, creates a modern feel with an instant impact that complements the strong colours and fully supports the intent of the site to launch the HTML5 brand. The pairing with the serif font, Calluna, for the main body text works well by contrast and, although serifs can be tricky to read at smaller sizes, it remains readable throughout. The character shapes of Calluna are slightly quirky, which adds to the sense of friendliness combined with excitement.

Museo Sans and Arial are both used sparingly and at small sizes but they are quite neutral in their appearance so do not detract from the design. Finally, Museo Slab is used specifically to denote an interactive part of the page – it is visually distinct enough to denote this difference without being so different that it conflicts the design.

All of the text elements have been given plenty of padding and spacing so there is “breathing space” throughout so the user is free to focus on the content.

This site is another case where using more than 2 fonts is beneficial and therefore justifiable.

Bad Typography

E3Net

E3Net is a small consultancy for ICT in the Education sector

E3Net

http://e3net.org.uk/

This site commits numerous design gaffes but most are typography-based since there’s little in the way of images and colour.

Looking at the site as a whole, there are 4 fonts in use – Arial, Impact, Comic Sans & Vivaldi – and they have font stacks that fall directly back to system defaults without considering Mac users. While the first 3 are web safe, Vivaldi is unlikely to be available on many machines. Using a font like Vivaldi is not a good idea due to readability issues and would really need a strong design justification.

From the top: there is a lack of visual interest from the type used on the logo due to font and colour choice (the same as the rest of the site) – only the size and position differentiate it. The tagline is in a cursive script that’s totally unreadable at that font size; presumably the script is meant to be classy and sophisticated but instead looks tacky and out of place. The logo looks like it was made and resized in MS Paint; it includes text that is completely unreadable and it is not accessible – alt="wp3c06fc5f.png"

The main navigation and some subnav use images that lack accessible alt attributes, so the site is unusable by the visually impaired. Considering that the education sector in particular needs to be inclusive and accessible this sends a bad message to potential clients. Sub navigation is inconsistent across pages, sometimes using image links, in other places just text.

The body copy has not been padded or margined to let the content breathe; line-spacing appears to be 1:1 with the relatively large font size leaving even a short page looking busy and hard to read – this is compounded by the narrow width of the page. Fonts intended to show quality actually have the opposite effect.

On the home page there are some quotes from luminaries about education, but their messages are completely undermined by the dreaded Comic Sans – this is a textbook example of its misuse.

The user is left with the feeling that this website was hastily deployed without due care and attention and as a result the brand is damaged. Since this is an ICT education consultancy, users would expect to see a professional web presence that reflects the importance of the web as a platform for learning. Arguably this site could be more damaging to the business than having no web site at all.

Tizag

Tizag is a source of tips and tutorials for web designers. Again, this is one of my colour examples, but it was one of the bad examples. And again, this is not surprising since a designer who hasn’t properly considered colour is likely to have given a similar lack of thought to typography.

Tizag

http://www.tizag.com/

The use of a Verdana/Arial combination means that even though both fonts are web safe there is virtually no visual interest produced. In fact because these 2 fonts have quite different personalities (in spite of them being sans-serif) their combination leaves an impression of confusion and a lack of authority, almost as if the design is incomplete. Given the purpose of the site these are definitely not feelings the owners would want the users to be left with.

The lack of whitespace in this design is also immediately obvious with an apparent line height of 1:1 making even a small amount of text difficult to read. The one redeeming feature is that the section headings are significantly larger than all the other body text making the pages easy to scan for relevant content.

Bold Street Coffee

Apparently, BSC is Liverpool’s favourite independent coffee shop

Bold Street Coffee

http://www.boldstreetcoffee.co.uk/

This is an interesting example, as the font pairing on the home page is a common and sensible one, Georgia (italic)/Arial, and the spacing is acceptable, but it seems they have made a point of making the text very difficult to read. For example, the current home page uses a complex, colourful image as the background significantly reducing readability.

Other pages use a pure black background (#000) with an off-white font colour which is almost painful to look at and equally to read from. They also change from Arial to Georgia body text in addition to headings – while this could work in some cases, because the design is monochromatic they rely on font size and weight to create contrast which does not create sufficient visual interest. The width of these pages also reduces readability on larger monitors as content fits to the full width of the screen and results in very short, wide paragraphs that are difficult to scan.

Finally, the Menu page has plenty of blurb about the menu but the menus themselves are right over to one side when they should be the focus. Strangely they are using images instead of semantic markup for the menus which kills accessibility and complicates site maintenance as well as increasing load times.