Case Study: uChicago.edu

Webfonts have brought tangible improvements to maintenance workflows and content management. Here we look at how the University of Chicago’s recent use of Proxima Nova on their main site has helped cure a few headaches.

Much of the talk around webfonts has focused on the aesthetic lift they bring and the marketing kickbacks of improved search engine visibility. So far we haven’t looked much at how webfonts streamline workflows and reduce pageload overheads, both attractive features for more extensive websites. We talked to Jack Auses, senior developer for the University of Chicago’s in-house web services team, about the type of impact webfonts have on a large institution’s day-to-day operations.

Jack, could you briefly introduce yourself please. Is your background in design, web development or something in between?

I’m a senior site developer and standards advocate at the University of Chicago, where I’ve worked for the past six years. I focus primarily on projects that are closely tied to the university’s strategic communications priorities and am the technical lead for the University’s main website. I’ve been working on the web for about 12 years and prior to Chicago I was a web developer in Cambridge, MA and Pittsburgh, PA. My background is actually in art history and I made the transition to web design & development after working 5 years as a museum professional. While I enjoy graphic design, I consider myself first and foremost a front-end developer and prefer to push pixels around with CSS rather than Photoshop.

What does your team do, within your department and for the institution as a whole?

The Web Services group at the University of Chicago is part of the central IT Services organization. We are the primary in-house web design and development shop on campus. Our team works closely with clients to provide professional standards-compliant design, development, support, consultation and hosting of sites and applications that serve broad needs for the University community.

Let’s talk a little about working with webfonts. Has the move been an incremental change? Are you already noticing any tangible improvements to the management process?

The move to webfonts is a fairly small but significant change that we are currently rolling out alongside other template refreshing work. We had been using Gotham via sIFR and image replacement for a variety of headings on the site and were becoming increasingly frustrated with the overhead required for both methods. After experimenting with both Museo Sans and Proxima Nova, we settled on Proxima Nova as our webfont replacement for Gotham and have been extremely happy with the results so far. The two huge improvements from the maintenance end of things have been discontinuing the use of sIFR and no more image-replaced subheadings. sIFR was always a headache for us. The Flash would sometime be blocked by browser plug-ins prompting user complaints, it was tricky to configure properly, and just generally not very flexible. Not to mention the added weight of the required JavaScript and SWF files. Now we can update content and it’s done. No additional work in Photoshop, or potentially messing with sIFR. And now have slightly leaner pages that perform better for our users. So win win.

Have you been able to measure any improvements in accessibility and SEO?

Our webfont implementation on the main site is less than a month old, so we don’t have any specific measurements just yet. Accessibility and proper semantic markup have always been big things for us, however. The introduction of webfonts hasn’t necessarily improved the overall accessibility or SEO of the site, but one less thing done with Flash and JavaScript, and faster loading pages impacts both in a positive way.

What kind of tests did you run as part of that decision-making process? Did you have a set of technical as well as aesthetic criteria?

Our technical criteria was that webfonts display relatively consistently across all major browsers. Aesthetically, we were looking for a font with generally the same character and gravitas as Gotham. We used Museo Sans on another project, the Urban Portal, as our first foray into webfonts. With that project we conducted regular browser testing to determine the degree of display consistency. The nice thing about @font-face is that it’s been supported for a long time, so the routine cross-browser nightmares really aren’t much of an issue. The biggest issue we came across was related to missing ligatures.

While we like Museo Sans a lot, we realized that it is a little too casual for use on the University’s main site. So we started searching again and came across Proxima Nova. I’ve been a fan of Mark Simonson for a while, so I knew that it was a solid, well-designed font. After carefully examining the font specimen and consulting with the University’s Creative Director, who manages our identity guidelines, we decided that Proxima Nova was the right fit.

How important is selecting the right fallback fonts; is the choice of first font in the stack affected by what will be next in the queue?

Since we are using webfonts in a fairly limited capacity—headings only—fallback fonts are less of a concern for us. For our headings, we fall back to Helvetica Neue, Helvetica, Arial, sans-serif with a font-weight of 200. Our design will hold together if the first font isn’t available. If we were using webfonts for main body copy the font stack order, I think, would be much more important.

Finally, how is our connected world changing our reading habits? Are we reading more than we used to? Do you find that you must evolve your presentation and design strategies along with these changing habits?

Reading habits are evolving and becoming more fractured. Personally, I read more now than ever: email, blog posts, news, novels, etc. but it’s spread out across my desktop computer, iPhone, iPad and good old fashioned books. I do the majority of reading, and general web browsing, on my iPhone. Whether it’s sitting on the couch at home or riding the train or looking something up at a bar, the phone has become the primary device by which I consume content.

The number of internet-enabled devices is continually growing, and it’s no longer possible to design for an single viewport. Sites need to scale up or down to best accommodate the variety of screen sizes out there. Whether you take a responsive design or separate “mobile-optimized” site approach, designing for that flexibility is becoming more and more imperative. In addition to presentation, the huge amount of content constantly bombarding people makes web writing and content strategy extremely important.

At the University of Chicago we restyle our site for small screen devices and have plans to make it fully responsive. We also try to shorten and simplify our writing online as well as focus on compelling storytelling and photography in order to grab and keep people’s attention. I think we’ve been fairly successful so far, but continually reevaluate and adjust to best meet the needs of our site visitors.

About Proxima Nova

Proxima Nova is Mark Simonson’s most successful family, and with 126 individual styles is the largest of our webfont packages. It’s something of meeting point between a modernist, geometric sans like Futura and the nineteenth-century humanism of Akzidenz Grotesque. Several of those individual fonts contain alternative characters and small caps, a useful feature for demanding web typographers looking to develop sophisticated layouts without the benefit of OpenType controls.

Such a large family will naturally be a versatile tool for many types of website, but we imagine that most scenarios will be perfectly fulfilled by just a few members of this superfamily. There are a number of purchasing options that allow you to assemble the ideal package for you project. Consider choosing Proxima Nova Extra Condensed Thin for big yet subtly tasteful headlines, combining it with the Regular width and weight for text, and the Black Italic for quotes. And in case you hadn't noticed, there's a Soft version which had its debut as the headlines on our very site when we launched webfonts at the beginning of 2011.