Page tree
Skip to end of metadata
Go to start of metadata

The goal

A short, informal discovery sprint with an aim to getting an overview of the state-of-play regarding web typography on the University of Bath website.

What do we want from our web typefaces?

  • Ease of implementation - A consistent, reliable method of implementation
  • Small footprint - Simple to prune out unused or irrelevant characters
  • Cost-effective - No need to purchase multiple fonts if at all possible
  • Full glyph & character set - Character sets of the free fonts don't cut the mustard
  • Historical relevance - What provenance does the typeface have?
  • Globally appeal - It should not be a parochial typeface catering only for UK residents
  • Cultural relevance - Why is this typeface representative of UoB? What are it's characteristics and values?
  • Modernity - Forward facing, not dwelling too much on past glories
  • Sophistication - But not complexity.
  • Usefullness - Usable in a wide variety of contexts

What do we currently use?

Header/display typefaces

Web fonts

Web fonts imported via HTML/CSS.

  • Raleway (Google font - Free)
  • Droid Sans (Google font - Free)
  • Rokkit (Google font - free)
  • Alexandria (Dafont - Free)
  • Libre Baskerville (Google font - free)

Bitmap text

Fonts rendered out into bitmap or vector images as we do not currently have a web font license to use them.

  • Caecilia (H&FR typography.com - subscription)
  • Tungsten (H&FR typography.com - subscription)

Body typefaces

Web fonts

  • Lucida Grande/sans (Not imported - simply part of a font stack) - Primary body font
  • Gotham (H&FR typography.com - subscription) - Used on blogs.bath.ac.uk
  • Ubuntu (Google font - Free) - Social media toolkit
  • Arial, Helvetica Neue, Trebuchet MS, Droid Sans, Myriad (Not imported - simply part of a font stack) - body font fallbacks

Cursive

Web fonts

No cursive fonts are currently used although some are still being imported on certain pages.

  • Handlee (Google font - Free)
  • Shadows into light (Dafont - Free)

Currently part of the cursive font stack.

  • Apple Chancery
  • Montotype Corsiva
  • Bradley Hand
  • Mistral
  • Zapfino

Recommendations

Technical

A number of specific recommendations for technical changes to the way we manage our web fonts.

  1. Strip out all unused web font @imports from the various CSS files
  2. Delete the unused font files from /assets
  3. Concatenate all font import rules into a single, central .scss partial file. Fonts should not be imported on a microsite or section-specific basis.

Typeface 'retirements'

The following fonts should be 'retired' from use, either as imports or within font stack fallbacks:

  • Raleway
  • Rokkit
  • Alexandria
  • Libre Baskerville
  • Shadows into light
  • Handlee
  • Apple chancery
  • Zapfino
  • Myriad
  • Lucida Sans

Typefaces

What we need

There are specific set of typefaces we need to fulfill certain roles throughout the site.

  1. A serif headline/display font
  2. A sans-serif headline/display font - Acts as a counterpoint to the serifed display font in certain situations
  3. Body font
  4. Impact font - A font for short 'impact' statements
  5. Personal font - A cursive font used for certain types of quotes, notes or questions

(warning) It has been pointed out to me that if a typeface is available it will be used by someone out there. This raises the distinct possibility of wayward users setting an entire section of the site in a cursive font.

Recommended typefaces

I am currently recommending the use of four fonts from the Hoefler & Frere Jones foundry. These four fonts are available through our existing web font subscription with typography.com.

I have also recommended the purchase of a more sophisticated and elegant cursive font from myfonts.com - http://www.myfonts.com/search/Narrative+BF/fonts/

  1. Sentinel (H&FR - Subscription)
  2. Ideal Sans (H&FR - Subscription)
  3. Gotham Narrow (H&FR - Subscription)
  4. Tungsten (H&FR - Subscription)
  5. Narrative BF (Myfonts.com - £15.99)

Typeface details

Sentinel

Sentinel is a progression from the classic English typeface Clarendon. Although it makes nods to it's old school provenance it is also thoroughly modern in approach.

Although tenuous, there is a historical link between the South West UK and Sentinel. Clarendon was used on the trains that traversed the Great Western railway that runs through Bath.

Sentinel was used, in conjunction with Gotham, for Obama's 2012 presidential campaign. Although this does add to the American-ness of the typeface it also clearly associates certain aspirational values with the typeface.

Ideal Sans

Not a direct replacement for Raleway but a typeface capable of taking up the mantle of headline font when our serifed contender (Sentinel) isn't right for the job.

It's a sophisticated, warm, crafted typeface that still retains a sense of character and personality.

Gotham Narrow

A hardworking, precision engineered typeface available in a whole host of weights and forms.

As with a number of H&FR typefaces the biggest issue with Gotham is it's inherent American-ness. As outlined above Obama utilised Gotham for his iconic 'HOPE' poster in  2012.

We could use this global/international recognition of the typeface to align the university with a number of key values established by Obama's campaign.

Tungsten

Our trusty impact typeface currently in heavy rotation across the website footer and numerous printed paraphernalia. I see no reason to not continue using it.

Questions

(question) Would we be happy to go with a single font service provider for all web fonts? This would essentially tie us into using a single foundry (H&FR - typography.com) which has both pros and cons.

The Bath City typeface

It seems clear that the bath City typeface is not the be all and end all of our typographic investigations.

I believe we should move forward on the implicit understanding that we will not be able to use the Bath City typeface.

  • No labels