How twenty years changed type on the web

Last week I gave a talk as part of a Stationers’ Company virtual event on branding and typography. After giving it some thought I decided to discuss the most exciting area of typographic design today – in my view – type on the web.

As I was working on the talk, I realised it would make a really great blog post, so have rewritten it here.

The central thrust of what I wanted to get across is that my career has been defined by an evolution of graphic design on the internet. This is less to do with my work over the past 20 years, more that the web has been a constant background presence. Everything about how it looks and acts has changed so much, sometimes slow, sometimes rather more quickly. But rather than being a potted history of type on the web, the story I wanted to tell is a more personal one, of technological change in parallel with my working life.

For the love of type

I am imagining a love for beautiful type is something that is pretty universal, but the fact is that the internet is broadly a functional thing, rather than a natural home of expressive design. Yet, every web page you see has had some element of design at its core. In fact the same could be said of a newspaper and look how that medium has fundamentally shifted in the desktop publishing era.

One of the things we must have all noticed is how significantly the use of type online has changed, particularly on sites like gov.uk that are information-led. And a few of you must have wondered – why? and how? this change occurred.

David Carson's 'Raygun'

When I began to learn about design and typography it was at the London College of Printing and latterly Goldsmiths. In the mid-1990s, my until-then personal interest in design became more formal, educated into an understanding and appreciation of beautiful type. I was lucky to be in the right place at the right time.

Students are necessarily tigerish firebrands, so while my contemporaries and I learned about the classic rules of typography at college, it was blended with a fascination with the new wave of type designers of that era. Reading magazines such as The Face or Raygun, we revered radical mavericks such as Neville Brody and David Carson as much as Eric Gill.

My fascination with new typography continued as I began work and led to my buying typefaces from various places. Particularly Emigre, a foundry in California, which was at the time creating incredibly influential work. We’re very used to instant gratification these days, but at that time, I’d place an order and then a week or two later a floppy disk or CD-ROM with the typeface files would arrive, at which point we could then use it in the logo. Cumbersome but at least current.

Web fonts – a very different story

To truly appreciate why type on the web is exciting today, it’s necessary to take a step back and understand why design was so incredibly frustrating, and let’s be honest, limited at that time. When my business started designing websites for browsers like Internet Explorer or Netscape Navigator, rather than potential, every stage involved restriction. Pages had to be 850 pixels wide and could only apply from a selection of 10 typefaces.

type on the web

The original webfonts set

The reason for this was that each typeface you used had to be installed on that user’s computer. This shortlist were the only ones you could guarantee – globally. Of them, one was the monospaced Courier which for me might as well have been the output of an electric typewriter. Another was Comic Sans, about which the less said the better.

It meant that designing for the web in those early years was always ‘in spite of something’, an intensely limiting state of affairs. Websites were very much a poor cousin, creatively, compared to what we were doing for print. Specifically all designers had to choose ‘web safe’ versions of the beautiful print typeface they had picked.

These are a couple of examples of our work from that era:

type on the web

Sample web design work from the mid-2000s

I remember these projects very fondly, but I must admit they look palaeolithic at this point.

We did well with these contraints, and great photography occasionally made up for the typographic shortcomings. But even then my colleagues and longtime collaborators Ben and Steffi were very clear those images needed to be around 400 pixels wide as people were viewing these sites using a dialup modem.

This trying state of affairs went on for years, even into the broadband era because we still had to always look back and allow for old browsers and loading speeds. Yet despite all this, I have a certain fondness for that period. One of the more interesting things about it was that restriction forced reinvention. I recall us constantly trying to find new ways of making the type feel fresh.

The gamechanger

In the years leading up to 2010, there were many tech companies trying desperately to change the web fonts status quo. Microsoft browsers ruled, dial-up was still widespread.

Whenever I tried to push it, the answer was – computer says no.

But, suddenly, in the way of anything involving technology, there was a major leap forward. A breakthrough, in fact. First, in 2009, San Francisco-based company Small Batch launched a fledgling Typekit project which showed the potential of a wider variety of online typefaces. But really the fundamental change was in 2010 when Google launched its free, hosted fonts service adding a range of new typefaces, which changed everything.

The selection was small to begin with but quickly expanded. Yet the mere principle of web-hosted type was massive. It opened the floodgates of possibility and combined with wider screen-sizes becoming much more standard was one of those magical, paradigm-shifting moments. This change in parameters fundamentally shifted the mindset of website designers. From those eight or so original options, suddenly real discernment became possible.

A first for the web was multiple weights of typeface, most notably on the widely used OpenSans, designed by Steve Matteson, Type Director of Ascender Corp. Raleway is still hugely popular – Matt McInerney created a single thin weight, then it was expanded into a nine weight family by Pablo Impallari and Rodrigo Fuenzalida in 2012. And the crisp Lato, designed at that time specifically for the web by Warsaw-based designer Łukasz Dziedzic, was particularly created to be readable at all sizes.

Pandora’s box was open for business.

I think it’s also worth mentioning the broader context of technology everyone was using at that point in time – much larger, higher resolution desktop flatscreens in offices, as well as a quantum leap forward in laptop technology. And of course the iPhone and later iPad were changing the way people used the web forever.

It gave type space to breathe and an appreciation of cuts and weights. The web had overnight caught up with every aspect of graphic design and the exponential freedom that Google fonts had given felt almost dizzying. Where was the control, the restriction, that forced us to be so inventive? It was gone forever, giving way to a blank canvas. What a relief, what freedom. But the best was yet to come.

The moment when the web caught up with print was imminent. This came about in a series of stages. The first was hosted web fonts, the second was Web Open Font Format. WOFF was first devised over ten years ago and established a single font format for all web browsers. This was something that had proved elusive and problematic up til this point. At a stroke it fundamentally changed the way type designers could work.

However it was the second version of this new format, in 2018, that changed things for me, for designers everywhere and in particular for typeface foundries. Suddenly online creatives could catch up with print. It allowed for two things: anyone to put any typeface online with the use of a file, stored in the website’s hosting. This allowed the owner of that typeface to license the font per website. It meant that young upstart foundries could market their creativity to everyone and have copyright control of their work.

From my perspective, it meant going full circle, back to the days of the 2000s. I – or now indeed the broader team of designers around me – get to choose the typefaces they want. Much like my fascination with Emigre, we can buy a license online and then let the typeface define the brand of our client. Our choices define their eclecticism.

How we’ve come to use type on the web

Here are three ways in which we’ve been able to use beautiful modern typefaces in our work…

The first was a project that was devised for global office logistics company MovePlan. The primary display typeface we chose here was Saol by a foundry called Schick Toikka who are based between Berlin and Helsinki.

This second project was for a website to celebrate a long-dead opera singer called Jennifer Vyvyan and the foundation in her name. One of the limitations here was that the images we had were old and often small, so large type ended up being a particularly key part of the layout. We chose Domaine Display and its cousin sans serif face Domaine Sans by New Zealand-based foundry Klim.

type on the web
type on the web

And finally, this project was for German manufacturing business Oris. During the design process, we had regular communication with the Berlin-based foundry Brownfox. Their typeface we chose is called Formular and we used a variety of weights including a highly stylised outline version.

I can’t resist telling the story of our work here. Having devised the site, graphics and shot all the images over a period of many months, finally came the point of building the site. Our problem was that we’d chosen to put all our headlines in this outline style:

It turned out didn’t have a German eszett character often used for words with a double s. I was a bit surprised by this given their German origin, and asked the type designers why. We discovered they hadn’t done one as it was thought unnecessary for this weight of the typeface. However our client required it, so we agreed to commission them to draw up an eszett specially for us, which once completed was supplied as a font file and put on the website.

This fairly simple example perhaps demonstrates the enormous flexibility of type on the web, and potential for creativity.

This feels like a great conclusion. When you consider those eight or ten typefaces we used to have, the idea of creating something special and one-off for the web is extraordinary.

It’s such a far cry from where we started. Yet some things remain true and enthusiasm for great type – which can now be anywhere and everywhere – remains.

 

– Richard Chapman, February 2021