It's almost 10 years ago now that Oliver Reichenstein published his thoughts on the fundamental influence of typography on web design.
Web Design is 95% TypographyOliver Reichenstein
At the time the article provoked a lively discussion amongst the design community. Today you're unlikely to find many voices disagreeing with Reichenstein – unless it is to argue for an increase in the quoted percentage by a few points.
Designing a typographic system to underpin the large-scale redesign of the University's website is a complex and involving task. The seeds of our thinking regarding a full typographic review have been germinating since early-2014 when Liam presented his thinking around the haecceity of Bath.
The development of the alphas provided an excellent opportunity to implement a vibrant new typographic approach for the University of Bath.
Setting out our requirements
The first step was to outline the minimum criteria for our new typefaces. These criteria fit broadly into 3 categories:
- Functional - The key technical requirements
- Aesthetic - Legibility, clarity, flexibility and flair
- Connection - The personality and the feel of the typeface
A full, flexible character set
It was clear from previous flawed implementations of open source/free typefaces that a full and varied character set was a must. When assessing typefaces we looked for diacritics, non-Latin characters, beautiful ligatures, alternative characters and more.
Reliable, performant delivery method
Typefaces with multiple weights and variants can clock in anywhere up to 1MB in size for the full set. We needed configuration options to reduce loading time, the option to self-host on local servers and other methods of cutting down were all explored.
A well-designed, crafted typeface should render optimally whatever device it is displayed on. Proper hinting and optimisation for screen display is vital.
Legibility and clarity
Our chosen typefaces must work at varying sizes and lengths of content. Clarity and legibility of text is paramount.
How does the typeface 'feel' when set on a page? Does the typeface genuinely reflect the University of Bath and the persona we have in mind?
It's too easy to create a false relationship where none exists - we wanted typefaces with genuine meaning and subtext that enhanced the user experience.
With our criteria in place we started looking at typefaces. Many, many typefaces …
Over a handful of sprints we narrowed our typeface selection to a shortlist from foundries such as Dalton-Maag, Jeremy Tankard, Hoefler & Frere-Jones and other typographic luminaries.
And what did we find?
To meet our technical criteria we elected to use typefaces in the Opentype format delivered as web fonts via fonts.com. Opentype gives us the flexibility to add or remove typographic features as and when we need them - key to reducing the initial load time for multiple fonts. The fonts.com web font delivery service is fully featured, robust and offers a variety of font hosting options.
Early on it was decided that we should work towards selecting typefaces from a single foundry. Selecting our typefaces from one source meant that we could be sure that each face would share a commonality in design-thinking, style and concept. These values help to ensure different typefaces work together harmoniously when paired on the page.
To this end, we have selected two typefaces from a well-respected, long-standing UK type house now based in the Netherlands, The Foundry.
One of The Foundry's principle designers David Quay has a history with Bath having been the lead on the team that developed the Bath city typeface used for signage, way-finding and infographics. The Foundry are well regarded for their work in creating legible, elegant typefaces that have a quintessentially English feel but global appeal.
A beautiful, modern slab/Egyptian serif for headlines
Foundry Origin - A quiet design with a big presence.
A clean, legible sans serif for body copy
Foundry Sterling - A modern sans with a quintessentially English flavour
If you're quick, you can see the typefaces being used on alpha.bath.ac.uk and alpha.bath.ac.uk/about before the Alpha exercise comes to a close at the end of this week.