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:

Can it really be called culture…when the woman sitting in an automobile or an aeroplane is reading a book that could have been made in the time of Goethe?

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.

Johann Wolfgang von Goethe 1749–1832 Corsica and Napoleon, by Ferdinand Gregorovius, 1855. The Vision; or Hell, Purgatory & Paradise of Dante Alighieri, by Henry Francis Cary, 1844.

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.

Penguin books Certainly there’s an attribute, or a quality here, hidden somewhere within these books which distinguishes Tschichold’s century from Goethe’s. London, 1948.

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.

offline-offline-2 </figure>

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.

Good typography can never be humorous. It is precisely the opposite of adventure.” Jan Tschichold, 1902–1974

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.

Phoebus Palast theatre In 1927 Tschichold experimented with his New Typographic style on a number of posters.

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:

The essence of the New Typography is clarity. This puts it into deliberate opposition to the old typography whose aim was “beauty” and whose clarity did not attain the high level we require today. This utmost clarity is necessary today because of the manifold claims for our attention made by the extraordinary amount of print, which demands the greatest economy of expression. p. 66, Die neue Typographie, June 1928. Translation from University California Press Edition, Ruari McLean 2006

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.

Principles of the New Web Typography We must prioritise the text over the font, or semantics over style. We ought to use and/or make tools that reveal the consequences of typographic decisions. We should acknowledge that web typography is only as strong as its weakest point.

Suggestion #1 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:

p { font-family : "Tiempos Text" , Georgia, serif ; }

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:

It’s tough for a typographer like me to admit it, but on the web we have to prioritise the text, and the font, independently. Kenneth Ormandy, Efficient Web Type c. 1556

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.

The web developer Scott Jehl has shown that the FOIT approach caused the text in one example to be visible in 2.7s on a 3G connection whereas the FOUT approach made the text visible in 0.6s. The final approach, where the text is not hidden by CSS or JavaScript, is therefore much faster for the user, more robust for the network, and manages to prioritise the text over the font.

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.

The New Web Typography demands to be seen; bad typography is better than none at all.

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:

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.

Suggestion #2 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).

Suggestion #3 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.