We can trace a nervous path through the links and hearts that occupy our timelines. In search of answers, we’ve peeked under the covers of Material Design and examined hundreds of pattern libraries, since one of them might be secretly withholding the principles of good design within. But why are we obsessed with typographic rules? And if we were to make guidelines for setting text on the web, what form should those rules take?
In 1927, twelve months before he published his infamous manifesto on typography, the German book designer Jan Tschichold criticised designers for mimicking the classical forms of design:
What’s wrong with a book made in the time of the early 19th century author and statesman Johann Wolfgang von Goethe, you might ask? Personally, I wouldn’t argue with all that much since these books were often quite the spectacle. According to Tschichold, however, books designed in the 19th century were for the people and the technology of the time; they solved problems that were entirely inapplicable to the needs of his own century a hundred years later.
Tschichold wanted something for his own people, and his own time; he wanted designers to stop copying previous generations altogether. In fact, Tschichold was obsessed with this question over the course of his life: what is of technical and visual relevance today? And how do we reflect this in the design of the interfaces around us—through type, through geometric space, and through the mediums with which we communicate? How do we avoid copying previous solutions to design problems and how should we go about making rules to aid this process?
You might be familiar with some of Tschichold’s answers. Around the time he emigrated to London in the late 1940s he redesigned the original Penguin paperback books. Rummaging through this iconic material, and exploring his previous work at the Bücherkreis, it’s clear how much Tschichold adored the format of the book. But he also wanted to confront it, to poke it, to challenge our preconceptions of how we should work and how these formats should work for us.
Yet it’s difficult to say anything resolute about Tschichold’s ideas, since his opinions tended to shift dramatically over the course of his life. At one point or another, it can be said that Tschichold believed in a “common, everyday book that will soon show a new style, which will be distinct from previous book styles...” In other words, Tschichold thought of technology and culture as invisible tidal forces which would continue to shape our graphic vocabulary. Instead of resisting these changes, Tschichold demanded that we should be more curious and that we alter our expectations of design as time passes.
So lately I’ve been obsessed with Tschichold’s analogy of the reader on the plane, with his “common, everyday book” and the snark with which he aimed at poor old Goethe. And now, almost a century after Tschichold wrote his manifesto on his New Typography, I’ve started to obsess about what our own time and our own text should look like.
Our own time, our own text
To begin with a discussion of the text we must first acknowledge the container. Although sadly, the dialogue around these typographic containers is often directed towards what we’ve lost.
For instance, if we make a website then we must forego the binding and the comforts of the physical heft of the object. We discard the familiar smell of the page and the ability to have absolute typographic control. Or, alternatively, if we print a book instead then we lose the ability to share the text with ease, or to point deep into the text itself. We lose all the mobility of hypertext.
Thanks to this feeling of inevitable loss whenever we choose a print or a screen-based format, many designers, developers and readers only see a choice between two options: they talk of the networked and the un-networked text.
We dissect the media landscape into physical books on one end in order to lump websites off on the other. We love categories, we crave outlines and we need a tidy media landscape where words such as mobile, tablet and desktop have comprehensive, divisible meanings. But there’s an ugly implication that we ought to stick to one side of this modern-day media trench or the other. I get the impression that we should either announce our allegiance for the pro-web or the anti-web cause as there’s just not enough time or room for subtle arguments in between.
Although, the longer I think about this, the more I’m led to believe in something greater than these two conflicting states. I’ve begun to think of design today as not so much defined by a binary option, but instead as a spectrum or a continuum—I’m fascinated in this space between the networked and un-networked texts.
Let’s take a closer look: with ebooks we can share the text, we can make highlights, append notes and in our pockets we have a vast library that follows us all over the world. But that library of ours is not public, it’s not even fair to call that library ours. We trade private ownership of these libraries for one with infinite shelves.
On the other hand, with the web, it’s hard not to dream of a Utopian media format. It’s difficult for us not to pine over what Erasmus once described as “a library without walls,” and it’s easy to fall victim to the excitement of Big Data and Open Source. How is it possible to avoid the giddy sensation of text which is available to edit, share or remix as we see fit? Then, there are the many websites that are publicly accessible via URL, but they don’t all appear to be built for the web: I see Facebook as a portal into a semi-accessible intranet, rather than as a series of interwoven public hypertexts. And that’s ok, too.
So I think the question that we need to ask ourselves, in our own time, in our own culture, is this: where is it on the network that we make our stand? Where about on this spectrum should we define our allegiance? In fact, we don’t necessarily have to pick a side as if we’re preparing ourselves for battle, but I think we need to at least acknowledge that typography, reading and design in general is far more complicated than we’d like to admit. And where we stand on this spectrum is predominately what shapes those experiences more than anything else.
We have to acknowledge the subtlety of this continuum in our work, even if we prefer the comforts of one specific point. It must be said that I don’t have as much empathy for screens as much as I do the networks that make those screens worth having. It’s only been over the past year or so in which I’ve recognised myself as a ‘Web designer’ with a capital W, as I now believe that something happens to information and technology, and even typography itself, when people pass through these interconnected networks and interact with hypertext.
It’s for these reasons that I don’t believe in “digital design” or “designing for screens” and it’s why I’m often attracted to one particular side of this spectrum. Of course, I don’t mean to say that there’s anything inherently wrong with the experience of un-networked, or semi-closed, platforms.
Each of them have, for the most part, improved over time. The Kindle’s typography has developed substantially since its original launch, and iBooks has become less gaudy. But really, it’s not the typography or the design of these digital platforms and formats that unnerve me as they once surely did. It’s because the more that I stare at and see the world through them, the more I begin to find someone staring back at me through the glass. A face reveals itself from behind these partly-connected, intranet-like platforms and self-contained applications where links are non-existent and file formats are often used to control people’s behaviour rather than to preserve or honour the integrity of the text.
It won’t take long for me to see an outline of this weathered face, as soon enough I’ll begin to see poor old Goethe emerging from the screen.
What I mean to say is that I don’t see enough of the network in these things, and that bothers me. Instead, I want to recognise our culture and our time in a long line of other cultures and other times, much like Tschichold. So today, even though I acknowledge all the opportunities available to us along this spectrum of networktivity, I really just want to explore what happens way out at the furthest edge where the network is strongest. I’m interested in what happens to typography, or the mechanical process of setting letters into legible text, when we design interfaces on top of flimsy networks and unpredictable browsing environments. I think these technical implications have drastic consequences on how designers and developers ought to see the art of typography itself.
But I think we need a guide of some description, we need rules for this new form of typography and in order to make these rules I think we need to return to Jan Tschichold and his “common, everyday book.”
We must first learn about Johannes, Iwan and Jan.
In 1923, the young art student Johannes Tzschichhold stumbled into his apartment in a state of almost complete terror. He had just returned from an exhibition held at the Bauhaus design school in Weimar, and what he found there astonished him; posters and books from modern Russian and Hungarian designers were on display and each of them represented new artistic movements, such as the design principles of the Constructivists.
This work was unlike anything the young Tzschichhold had ever seen before; he found experimental ideas for setting layout mixed with the unfamiliar juxtaposition of symbol, colour and text. But what’s surprising about Tzschichhold’s response is that, despite being 21 years old, he was already an experienced “graphic designer”. Although that term certainly didn’t exist at the time, he lived comfortably on the salary he earned working for commercial clients, especially in the field of book design.
Regardless of Tzschichhold’s skill, there was something about all these colourful posters and books at the Bauhaus that must’ve sent shivers down his spine. Consequently, Johannes was so enamoured by this material that he wrote to designers all across Europe asking them for copies of their work. Later, he would rename himself “Iwan” (pronounced Ivan) and simplify his surname to “Tschichold”, in honour of this underground style that had quickly become his inspiration.
Iwan was now obsessed with machines, efficiency and engineering in typesetting. He looked back at his work and saw nothing more than the duplicity of a copy cat, mimicking the styles and used-up energy of ancient artistic movements.
It was around this time that Tschichold began formulating his ideas for what he called the New Typography. These were rules for setting letters and type, as well as how circles, lines and arrows should be employed in print. In his book on the subject, Die neue Typographie, which was published in 1928, Tschichold described the goals of this movement:
In Die neue Typographie, Tschichold was desperate to supply laws and guidelines for designers to emulate in their work. For example, an important section in the manifesto is written to support the “elemental letterforms,” or what we might today call sans-serif letters. Tschichold believed these letterforms were in “spiritual accordance” with his time and any other typeface choice would almost certainly be a mistake. Although, this was a particularly difficult issue for Tschichold to reconcile with because he despised most of the sans-serif letters that were available.
It’s interesting to note, and few make this point when they recite the history of Tschichold’s work, that during the time when he published some of the most famous examples of this movement, he was still designing books and posters that completely disregarded the strict laws from his own manifesto. It appears that Tschichold was always the first to break his rules.
Perhaps this was because of the lack of commercial demand for this New Typographic style, yet I think it’s also because his rules were too specific, such as which graphic forms and styles were permitted, whilst also being too vague—what really makes this new typography new? So, despite my love of Tschichold’s early work, I think that preparing a set of rules for typesetting in general is an impossible task because it doesn’t take into account all of the subtleties and nuances of the work. It’s also made more difficult thanks to those churning tidal forces of culture and design, as Tschichold mentioned only a few years earlier.
Here’s what I’m thinking: What if we could set principles for web typography that circumnavigate these problems that can be found in Tschichold’s often preachy rules? If we were to make such guidelines, then what should we include? What would be too specific or vague? What influence does the spectrum of the network have on typography?
This has led me to three principles, suggestions, outlines, or rather things-that-I-ought-to-be nervous-about when setting text on the web.
The Value of Text
In printed material, such as in a book or a poster, the text and the font are one and the same. Something peculiar happened when typography became entwined with the web though, since there was now a colossal number of systems that could render that text. Unfortunately however these systems couldn’t agree with one another about anything, especially when it came to typography.
As it happens, most fonts are not supported consistently. They’re excluded by a mischevious operating system, or a slow browser. Or, instead, a number of problems might occur on the network, such as a web font failing to load.
In order to solve some of these problems we can use what is known as a font stack in CSS, like so:
If a webfont doesn’t load properly then the browser will, in most cases, try and use the next one in the stack. This is a very simple example, but I believe that we can see the core differences between a networked and un-networked text at this juncture. This single line of CSS exemplifies how web designers have such limited control over essential typographic components and it proves to me how splintered and fragmented our text will be experienced.
There’s a separation between the text and the font because the font can, rather unpredictably, be any one of these three values, even if the text will always be preserved in the markup of a document, like so:
<p>This is how we write a paragraph of text with the HTML language.</p>
The text above is predictable since it will be rendered in every browser. The font, however, is fragile in comparison. It’s a critical point of failure for typographers to grapple with, and ultimately we must accept that preparing our typographic interfaces with failure in mind is better than the alternative. Kenneth Ormandy described this problem when he wrote that:
Kenneth was riffing on the book Combining Typefaces in which Tim Brown argued that typography on the web should be “centered on the principle of progressive enhancement—that a text itself is fundamentally more important than our suggestions about how it should be typeset.”
We can learn more about prioritising the text in this way by diving deeper into the murky waters of web font loading: in my walkthrough on the subject I mentioned two of the most popular techniques. In the first approach all of the text is hidden until the font has been successfully requested—this technique is commonly known as the Flash of Invisible Text (or FOIT) for this very reason. In the second, a webpage will always show the fallback font until the fancy web font has loaded, after which it will then be switched out for the other. In this way, the browser will show a strange Flash of Unstyled Text (or FOUT), but the text will always be there for the reader.
If you happen to be a typographer from any other realm then you might feel a bit queasy, since this obviously sounds rather perverse. Designers pick certain typefaces because they compliment the written word, why must they be limited to a grotesque smorgasbord of flashing text before they reveal their beautiful typefaces?
From the perspective of a developer this is merely the consequence of sending text via an unstable network; the technique itself is not to blame. We can either feign the same level of control as print designers and ignore these technical considerations at the expense of the reader, or we can instead learn how to dance with this new web typography, what with all its quirks and clumsiness.
Continuing on this thread, earlier this year Zach Leatherman wrote a post called Critical Web Fonts where he argued that first we should load a tiny font file which has been subsetted—which means that certain characters have been removed—in order for the font to contain upper and lowercase characters from A-Z. Then, we should make a separate request for the full font file—think punctuation, ligatures and other such typographic niceties. Effectively the user will then see the “flash” between system font and web font much sooner, but it will then be followed by a smaller, subsequent flash when the last part of the web font loads.
Zach expanded on this idea, arguing that not only is the font itself a progressive enhancement, but so are bold, italic and any other variant besides roman type. In a separate method which he described as the Flash of Faux Text, the italics and bold weights of a family are synthesised by a browser until they are ready to be downloaded. Once they’ve been successfully requested, we can then swap out the oblique and faux bold with the real web font equivalents.
In the demo below you can see the differences between a faux italic, generated by the browser from the regular font, and the real italics:
...whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can.
If we were designing a print document, using faux shapes like this would be seen as an unforgivable failure because they’re lazily skewed by an algorithm without the human eye for subtlety. In this case, however, it should really be seen as a matter of pride for the web designer because the act of reading can begin immediately.
The consequence of typographic decisions
A cautious, uncertain balancing act exists between the art and the mechanics of setting text. This became clear to me when I realised the foolishness of building complex typographic systems without a low-level CSS toolkit and clear documentation for laying out text on a webpage with a list of components. These could be instructions as how to make a list look like a certain type of list, or instead, how margins, padding and other relationships work in sync together.
Much has been written about them, but what’s most interesting to me is their ability to help us visualise the possible, latent relationships between things.
When I look at the documentation of Tachyons or Basscss, and when I begin to figure out how the padding, font size and background color of an element can be manipulated, I can’t help but imagine that I’m perusing a modern day typecase. This ancient system for separating and organising typographic objects quickly reveals what the system is capable of; they’re filled to the brim with opportunities for us to exploit, and without them we are blind.
Modern variants of these tools are vital for typography on the web because simple decisions can have an unexpected, even violent impact on unrelated parts of the system. A single line of CSS or a classname added in haste can break layouts and render the text either illegible or ugly.
How do we deal with the padding between elements then? What is the relationship between different headings? How can layouts be broken up into strings of code without those relationships becoming a source of confusion? To answer these questions successfully we desperately require a variety of tools to help us visualize relationships between the code (how it works) and the design (how it ought to work).
Web typography is only as strong as its weakest point
As I mentioned previously, font loading is certainly one area where we can spot a weakness or two, but I think it’s best to classify the weaknesses of a typographic system in order to best identify them in our work: I believe there are failures of programming and then there are failures of aesthetics.
First, the typographic frailties to be found in the programming of these design systems are most likely to be revealed inside a large, half-organised codebase, mostly made up of CSS. For example, a measure of a website’s selector specificity is one instance where we can immediately identify structural weaknesses.
There are two noticeable peaks in the plot above where fragile code, or very specific CSS selectors, can be found. This is likely to cause problems elsewhere, as the code is either overwriting previous code or, even worse perhaps, it attempts to make sure that no-one can overwrite it in the future. Bits of code like this can influence the act of typography in strange and unpredictable ways—when we set text on the web we should ideally require a consistent and reliable API for doing so. Specific code like this is bound to stop us dead in our tracks because if we add a class to an element such as
.font--bold and it doesn’t do what we expect it to then the programmatic weakness of the system is revealing its ugly face.
Likewise, aesthetic frailty can be found when designers don’t understand how a system can be replicated with code. If there isn’t an option for designers to unfold the system before their eyes and untangle the mass of dependencies that make up the codebase, then as soon as they begin to add new features to this system they are sure to duplicate functionality or override the options that already exist.
It’s often difficult to identify where the weakness in a design system can be found because a failure in programming will often cause a surprising failure in the aesthetics, and vice versa. Take the current implementation of declaring a
font-weight in CSS. At the moment it’s horrendously limiting, and I think this has the effect of blinding us; we only see design on the web as consisting of regular, bold and italic variants.
Rarely do we see complex typographic interfaces on the web which consist of thin, light, book, regular, medium, bold and black weights. These variations can often be useful in print so as to make nuanced typographic choices that lead the eye or pull the heart. The same problem can be said for a font’s width; I sometimes wonder if we rarely see condensed or extended variants on the web because CSS has a peculiar bias against them.
I believe that these weaknesses in the programming—in the technical limitations of CSS and within the font formats themselves—have slowly become a weakness in aesthetics. Thanks to these limitations we are only able to play with a tiny slither of what many type families are capable of.
Why would we want this sort of flexibility on the web? Because loading multiple weights and widths is impractical in some cases and outright foolish in most. Yet the ability to stretch and expand a single responsive font file would supply improved performance, as only one font would need to be requested, and typographic subtlety, since we could adjust the text as we see fit.
Another project, also made in part by Nick Sherman, is called Font to Width and it shows what’s possible when responsive text can adapt to its container. As each container changes shape, so does the text within it; a new font with a more suitable width replaces its predecessor in order to best fill up the space. This demo relies on a number of scripts to switch out the fonts and calculate the remaining space, but with a responsive font format we could generate a seemingly unlimited number of styles—condensed, thin, compressed, book, medium, bold and black—with only a single font file being requested.
Other examples of this kind might appear at first as some kind of fancy art project, suitable for desktop wallpapers and indie art exhibits. But! This level of responsiveness reveals new methods to manipulate text, new opportunities for designers and, most interestingly, new ways to read the text itself. Andrew Johnson has called this same technique “live font interpolation” when he claimed that it:
By stark contrast, our current implementation of the limited
font-weight values, and the limitation of static fonts, appears to be a combination of programmatic and aesthetic frailty. Our designs are held back because of the technical limitations imposed upon us. And so I suppose that this begs a question that I find difficult to answer: how else do we notice weakness in a typographic system, both in the code and in the design? How do we confront those inherent problems?
Tschichold once saw frailty in a design system as being the visual references it made to a particular time and culture where certain graphic elements had been so overused that they became clichés. It wasn’t until many years later that, as Jan, he would become “the most severe critic of the young Tschichold.”
The elderly Jan Tschichold was a little too severe when looking back at the work of Iwan and Johannes however, since the New Typography, as a movement and as a manifesto, is still important for many reasons. The first and foremost is that designers, even today, are always on the lookout for typographic laws and principles to guide them.
Like Tschichold, for a time I believed that we could very easily define what good typography is. For instance, we could say that good typography is surprising and charming. Or we could be more verbose and say that good typography is a well documented technical and graphic system. Subsequently, it’s said by many designers that a legible paragraph of text should have a measure, or width from one side to the other, of roughly 75 characters. But what happens in scenarios when that’s entirely impossible? What do we do then? How on earth can small devices be capable of good typography if the classical rules of typography no longer apply?
At some point in 2011 I remember stumbling upon a guide called On Book Design, written by Richard Hendel, which I hoped would unmask these hidden principles. Tell me about letter spacing, I pleaded with the book. Tell me which typefaces to use! For the love of all holy things, tell me how to design a book!
Hendel replied to these questions in the most frustrating way imaginable, he merely stated that “it depends” on the situation, or by the context at hand. Setting text is so deceptively complicated, Hendel reasoned, that it’s impossible to give universal orders and commands about what to do and how to go about it. In other words, typography might be a science but it has no guiding light, no Principia Mathematica, no Origin of Species—there are simply too many variables, and too many problems, to list the answers themselves.
As disturbing as this was to read at the time, I soon found that almost every piece of advice about design, besides “it depends”, was a well disguised cliché of some description. And so I see the flaws in the principles that I’ve half-jokingly described here as the New Web Typography. Perhaps, one day in the near future, our networks will become so fast and so dependable that we won’t have to worry about supporting untrustworthy network conditions with strange typographic hacks. Perhaps font files will become so small that subsetting them will sound as unfamiliar to us as
<table> based layout appears to us today.
I suppose that these suggestions all deal with the instability I find when setting text for the web, and I hope to remind myself of this when a new feature replaces an older one in a browser, or a new hack emerges. I want to consider technical implications of my decisions, and I want to ensure that we think about the effects of an unstable network sending an unstable codebase, only to be interpreted by an unstable browsing environment.
Our hypertext, as fabulous as it might be, sits on a network built in the image of a sand dune. The slightest change to the environment and the whole thing topples over or gobbles up our text. Instead of building systems on shifting foundations then we must celebrate a new form of typography where we strive to navigate the instability between reader and text; I see little use in building castles out of sand.
Yet it’s thanks to this fragile relationship that readers have different expectations of the text itself—words are no longer the ancillaries of simply reading. Now a reader can travel through the letters via their hyper-trans-dimensional magic, each link forming a gateway to many greater, more elaborate, adventures.
I wouldn’t be writing here today if it were not for the many links that lead me to you, across an ocean, across a network. But where will the text lead us next, I wonder, and how will our typography continue to adapt to these changes?
Footnotes and further reading
Die literarische Welt, 22 July 1927, Jan Tschichold. Translation from Active Literature, Christopher Burke, p.61. ↩︎
My good pal Alex Charchar has written a more in-depth article about Tschichold’s work at Penguin that’s very much worth reading. David Pearson has also made a Flickr collection with some of the early experimental layouts by Tschichold. ↩︎
Sadly, many of the images of Tschichold’s work are either of low resolution or simply aren’t publicly accessible. In any case, I’d make sure to read the section on his work at the Bücherkreis in Active Literature by Christopher Burke in order to get a sense of Tschichold’s shifting approach to book design. ↩︎
Der Satz des Buches, p.121, Jan Tschichold — translation from Active Literature, Christopher Burke, p.219 ↩︎
How Aldus Manutius Saved Civilization by G. Scott Clemons is an excellent talk that puts into perspective how much we owe to those that reprinted and then circulated ancient Greek texts to a much wider audience. ↩︎
“Elemental letterforms” in this instance meant sans-serif letters, but the term had also been used to signify the removal of uppercase letters from running text at this time. ↩︎
It’s quite likely that our fancy web font will look larger or smaller than the fallback, but with the
font-size-adjustproperty we can manually adjust the size of the text based on the size of the lower case letters. This will then smoothen out the transition between the two fonts, making the flash of text much less noticeable. Check out demo one and demo two in Firefox. The two typefaces in each example look very different from one another, even though they are set at the same font size. When we toggle this property we can see that the two will look proportionally similar and thus the flash of font loading can be soothed. ↩︎
I’m unsure whether this technique of subsetting fonts is applicable to all languages, just take a look at the complexity of Vietnamese typography for instance. (Update: Donny Truong informs me that browsers will use diacritics from Georgia or Times New Roman which is better than not having them at all, but is not ideal.) ↩︎
I think one of the most under appreciated aspects of the new web typography is how we normalise the original design. This is how the reader thinks, says the designer. Ah, but this is how the computer thinks, says the developer. ↩︎
CSS is seen as a silly, broken language by many developers and so calling it an API might draw a scoff or two from certain crowds. Chris Eppstein digs into some of these misconceptions in his talk called The Expanding Boundaries of CSS. ↩︎
This is quite difficult to argue fairly without the implementation being in place to test it. This technique would put all the responsibility onto the browser for manipulating the font file, rather than the network for downloading them, and so estimating the various performance bottlenecks involved with that process isn’t likely to be accurate. My argument is primarily from the standpoint of a designer and user. ↩︎
Tschichold’s contemporary Kurt Schwitters said that: “Innumerable rules get written about typography. The most important is: never do it as someone has done it before you.” ‘Thesen über Typographie’, Merz no.11, 1924 ↩︎
Another excellent reference for students is Thinking with Type by Ellen Lupton, since it focuses on typography outside the realm of book design as well. Other good references can be found in Jake Giltsoff’s Typography on the Web. ↩︎
In her essay Hypertext for All, Mandy Brown reveals a lot of my biases towards text which makes me feel a little embarrassed. I remember talking to a web developer at XOXO and he mentioned that he was working on making a responsive comic book out of SVG. From his perspective the web was a tool for bombastic panels made up of heroes and big explosions and eye-popping graphics. I had to make the boring admission that I see the web as a rather simplistic tool for writing love letters out of text instead. ↩︎