The new typography

Posted in: Design, Development

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.

— Jan Tschichold (Author of Die neue Typographie, 1928)

Alexandria, Arial, Cambria, Droid Sans, Lucida, Myriad, Raleway, Tahoma, Times New Roman, Ubuntu.

Those ten typefaces were used extensively on our website across various sections, and often on the same page to differentiate content elements and provide a visual identity to specific areas. They were then supplemented by a phalanx of back-up typefaces to cover issues of platform-specific availability - hello to Trebuchet, Malayalam, Optima, Geneva, Palatino, Georgia, Verdana.

At the time of implementing, having a large font stack made sense - in fact it was best practice. Fonts were identified that were common to specific operating systems and them paired up to create a unified "stack" of fonts that would ensure your content would look very similar however it was viewed. Web fonts were at the time still an emerging technology, and IE still had major issue with anything other than Embedded Open Type formats with @font-face - I documented the complexity of supporting this at the time.

Myriad was chosen as our headline font as it looked great and was readily available on most platforms due to being packaged by default on a mac, and bundled with Adobe Reader (a very common installed application on a pc). Recently we have seen a sharp decline in Myriad being installed on our target platforms - leading to some rendering issues with fonts defined lower down the 'stack', and a steady incline in the support of "web fonts".

Our recent relaunch of the research section of our website afforded us the opportunity to use a framework (Foundation) and revisit the font stack in light of better options and support (Typekit, Google Web Fonts et al).

Here is an example of a commonly-used font-stack from our site:

font-family: "Myriad Pro", "Myriad Web","Apple Myriad","Adobe Myriad",Candara,"Trebuchet MS",Trebuchet,sans-serif;

This was replaced by the following in our research site:

font-family: "Raleway", sans-serif;

After two weeks auditing our site and uncovering all the various stylesheets that contained rules defining font families, I have now implemented a change to every page delivered by our CMS so that we use the same font stack as that defined in the Research restage. This work was not without its hiccups, as certain pages had some layout elements affected by the new font - but we are working with our web content providers across the university to fix any problems, and provide guidance where the update has highlighted practices that need updating.

I've also received feedback from maintainers of pages not in our CMS, who would like their content to be part of this project, which was very rewarding. And subsequently I'm looking at ways we can roll out this change to all pages hosted under our domain.

This is a really large step forwards for us, creating a consistent user experience as well as a much simpler maintenance process for everyone involved.

The next step after this initial consolidation is to work closely with our print colleagues to define a new typographic identity for the university that reflects its position both geographically and academically.

Watch this space.

Posted in: Design, Development