Typesetting the Alphas

Posted in: Beta, Content Publisher, Design

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

Functional

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.

Aesthetic

Rendering

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.

Connection

Personality

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?

Meaning

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.

The typefaces

Foundry Origin

A beautiful, modern slab/Egyptian serif for headlines

A sample paragraph of text set in the Foundry Origin serif typeface
Foundry Origin - A quiet design with a big presence.

Foundry Sterling

A clean, legible sans serif for body copy

A paragraph of text set in the Foundry Sterling typeface
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.

Posted in: Beta, Content Publisher, Design

Respond

  • (we won't publish this)

Write a response