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?
Have you been able to measure any improvements in accessibility and SEO?
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.Back...
Posted 13 Sep, 2011 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
A CSS Webfont Logotype
A pure text logotype, wordmark or masthead is now very achievable using HTML and CSS in combination…
Part 3: Line height options in the kitbuilder
Our Webfont Kit Builder allows the user to fix some of the problems described in the previous part…
Defining a CSS font family
In this article we're going to be digging into the composition of the CSS Font Family and how…