Blog > Ampersand Web Typography Conference Review
Posted By Create
Ampersand is a one-day conference dedicated entirely to web typography. Now in its third year, the event, held annually at the Brighton Dome Corn Exchange, addresses the current technologies and emerging methods of working with type on the web with a host of well-regarded web designers and typophiles.
As an avid lover of letters myself I volunteered to help with the event, and I was lucky enough to sit in on a couple of the sessions. Below I've covered a couple of the best talks and given my overview on the new solutions web typographers are developing to ensure text on the web is legible, attractive and responsive to emerging technologies.
Ben Terrett and Chis Heathcote - Designing GOV.UK
For me the standout talk was a case study of Ben Terrett and Chis Heathcote’s design work on the UK government website GOV.UK. Their challenge was a complete overhaul of the entire government website network, both in design and performance.
Ben started by outlining the Government Digital Service's (GDS) Design Principles and went on to describe some of the challenges and strategies they used during the re-design:
- 100% Web Fonts for the body copy (the larger chunks of text on a website). I was at first surprised by this because, from an accessibility and UX (User Experience) perspective, body copy should remain as legible as possible, and using a Web Font can sometimes hinder that experience. For more info on Web Fonts, check out this article on webfonts.info.
- Single user experience. It was important that the site worked the same way regardless of what service or sector you were using or contacting, e.g. booking a prison visit should be the same as booking a practical driving test.
The final choice of typeface used on GOV.UK was Transport New, an updated version of the Transport sans serif typeface first designed for road signs in the UK. Originally created by Jock Kinneir and Margaret Calvert in the 1960s for print and signage, a new digital version has been created by Margaret Calvert and Henrik Kubelthe specifically for GOV.UK.
Transport New was chosen for it’s inherent Britishness but also for its accessibility properties. As Chris Heathcote said, "We looked around for an extremely legible typeface. Accessibility is key at GDS and ideally we’d like a typeface that’s good enough for us to not need an ‘easier to read’ font option for the dyslexic and those with other visual or cognitive issues."
Chris went on to explain the performance challenges you face when using a Web Font on such a large and frequently visited website. There were several iterations of development to ensure file sizes were as small as possible thus ensuring fast load times. GOV.UK is also completely responsive, so regardless of device or screen size you are viewing the site on you get a consistent experience.
What I found most interesting, though, was that all of the iterative changes were made in public during the Alpha and Beta stages of development, using the constant feedback to create the best user experience design possible.
Jenn Lukas - On Icon Fonts & Working with Designers
Jenn’s talk was a high-octane, animated journey of discovery, aiming to unite designers and developers along the way. She focused on the design/development relationship and how we can each adapt our workflows to benefit each other.
One of Jenn’s most notable suggestions was the inclusive use of style guides. Creating style guides and utilising Sass variables for brand colours and typography is better for organisation and productivity for the whole team. Having a single reference point for design and development, preferably in HTML and CSS rather than a layered image, is much more beneficial for both parties and further blurs the lines of web design and development.
Another argument for writing code-based style guides rather than using static images is that it represents the behaviour of the web - in fact it is the web. Typefaces are also notorious for rendering differently in a web browser than in a image manipulation program like Adobe Photoshop. Another advantage is the way it represents responsive re-flows and different states such as 'hover' and selected elements and page zooms.
Jenn ended on an enlightening roundup of the techniques and services available for creating Icon Fonts. Icon Fonts are scalable typography icons that render crisply on web browsers, maintaining crisp edges when zoomed in on or displayed on HD devices.
Old Solutions: Image as text
Up until now, one of the most popular methods of including custom typography and icons on your site has been by uploading them as images. If you weren’t already aware, including text as an image comes at a cost to accessibility, site performance and visibility. It’s probably worth noting some of these tradeoffs:
- Search engines can't index the text and use it in your SEO because it's embedded in an image.
- If users have selected to turn off images on their desktop or mobile browser, for example to conserve bandwidth, and you haven’t included an alt text tag, then they won’t see those words at all.
- People using screen readers will face similar difficulties.
- Rasterised images (for example, .jpg .png .gif) become pixelated when enlarged and generally look pretty ugly on HD devices.
- Including excessive instances of text-as-images will add to the overall page weight. Google have recently started down-rating sites with poor page performance rates. You'll be happy to hear that Create is still maintaining very good page performace for Create websites.
New Solutions: Web Fonts
As Chris mentioned in his recent post on typography, there are a whole host of services that can quickly help you get up and running with Web Fonts. Free web typography services like Google Fonts and Font Squirrel or professional paid services. For Icon Fonts, you'll find IcoMoon is simple online tool to create a personalised Icon Font set.
We’ve got lots of exciting plans here at Create, and we believe that Web Font integration for our customers would be a great benefit to sites. We've added it to our project roadmap so watch this space for an update!
For more on fonts, check out Chris's blog post 'Choosing A Font For Your Website'.