Screen aesthetics

Emphasis on typographic principles for online use is still lagging behind type in print, but as live Web fonts are becoming a reality, digital designers are increasingly addressing these issues and paying more attention to how text can work on screen. Anna Richardson reports on a new era of on-screen design

There is excitement in the air for digital design. The ability to use an increasing array of fonts on websites is becoming reality. No more settling for samey system fonts, no more limitations of image type – the time has come for Web fonts, it seems.

A cross-platform standard is emerging, some foundries are already selling Web versions of their fonts that can be embedded in Web servers, and new font services, such as Typekit and Fontdeck, offer catalogues and technical services around fonts that are licensed for use online.

But for all the excitement, there are still hurdles to overcome. An obvious one is that hardly any typefaces are designed from the ground up to work on screen. Another is not technical, but commercial: how fonts will be licensed in the future is yet to be hammered out, and as with so much in the digital world, piracyis a problem.

Many type foundries baulk at the idea of allowing their work to be embedded on servers for all to plunder, as Jason Smith at Fontsmith points out. ’Even though browsers can now support embedded fonts, it’s still too easy to steal them. [A viable solution is] about five years away,’ he reckons.

The priority should still be the pursuit of best design principles when it comes to typefaces – whether applied on- or off-screen – not technology. ’There has been a resurgence of interest [among digital designers] over the past two years in typography generally,’ says Richard Rutter, founding partner of digital consultancy Clearleft, which is also rolling out Web font service Fontdeck. ’There’s a realisation that designers can put more effort into it – not just designers, but also front-end coders.’

Smith agrees: rather than mulling over the hinting and optimising of fonts for use on screen, Fontsmith remains primarily concerned with good design. The foundry has created a number of corporate fonts for screen-based applications, including television. ’We are concerned with legibility and how light and colour have a much bigger effect on it, rather than the ability to embed a font,’ says Smith. It’s much more about designing the right weights and making sure the spacing is correct and the ascenders and descenders are the right height, he adds. ’These design principles have not changed through time.’

For a new – now abandoned – Internet-based video-on-demand project, Fontsmith created what is now the FS Joey type. It was about creating something distinctive that was inventive and had weights optimised for the Web. The resulting font has a light weight that is fairly dark, and a bold that is fairly light. It has a few quirky characters, and ’a nice, warm feel that’s open to a wide demographic, but still includes some trendy characters to give it a fashionable kick’, says Smith.

Colin Jenkinson, design director at digital design consultancy Cogapp, is excited about the opportunities of live Web fonts, but also keen to expand on them. The restrictions of previous years has forced a culture of bad typography online, believes Jenkinson, ’The main challenge is how to get these principles of typography to be practiced and become the benchmark for good typography on-screen,’ he says.

Strong typographical principles are a core part of the BBC’s new online global visual language, which was recently redesigned by Research Studios in collaboration with the BBC’s user experience and design team. As well as Gill Sans in banner areas, it uses system fonts Helvetica and Arial in restricted size variations. ’We’re using a utility font, but are bringing in an editorialised way of using the type,’ explains Research Studios’ Neville Brody. ’We want to use fonts in a way that they can be scaled for emotional impact and drama – as you use seven colours in paints as an expressive tool.’

The key was to strip away the surface decoration and use bold type and imagery to do the heavy lifting, according to Bronwyn van der Merwe, head of design and user experience at Central UX&D, one of the BBC’s user experience and design groups. Months of work have also gone into fine-tuning legibility and accessibility, with an accessibility toolkit allowing users to optimise colours and font size, for example.

Achieving consistency across all platforms is increasingly complex, and needs specific care. For example, ’The pared-down options for the iPhone, if used with care, and the sparing addition of colour, can bring richness to an app,’ says designer John-Henry Barac, who designed the popular Guardian iPhone app. The application uses Georgia, which shares some similarities with Guardian Egyptian custom font. Other elements that help to convey the style of the paper and website were vertical spacing within the cells of scrolling lists, the use of the site’s colour palette to indicate sections, and section headers using Guardian type.

In creating a custom-font for mobile phone company HTC, Monotype Imaging had to experiment extensively with hinting, because of the challenges of the mobile display environment. ’What we finally ended up with was a very natural-looking Neue Helvetica that was actually the result of extensive micro-manipulation of stem weights and positions,’ says Monotype Imagining designer Karl Leuthold.

As users increasingly rely on their mobile devices to operate as PCs and the final hurdles on the path to true Web fonts are jumped, the importance of typographic quality and aesthetics can only increase further.

Latest articles