In 1927, twelve months before he published his infamous manifesto on typography, the German book designer Jan Tschichold criticised[1] 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.

A portrait of Goethe An image of two books made in the time of Goethe

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.[2] Rummaging through this iconic material, and exploring his previous work at the Bücherkreis,[3] 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.

An image of the Penguin book cover design

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...”[4] 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,”[5] 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.

The ghost of Goethe

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.

Young Tschichold

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.

An image of Tschichold’s posters for the Phoebus Palast theatre

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,”[6] 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

  1. We must prioritise the text over the font, or semantics over style.
  2. We ought to use and/or make tools that reveal the consequences of typographic decisions.
  3. 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.[7] 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:

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[8] 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.[9]

A diagram of two websites using the FOIT and FOUT approaches of loading text

The web developer Scott Jehl has shown[10] 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.[11]

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,[12] the italics and bold weights of a family are synthesised by a browser until they are ready to be downloaded.[13] Once they’ve been successfully requested, we can then swap out the oblique and faux bold with the real web font equivalents.[14]

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.

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[15] 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.

A picture of the Tachyons website

Modern variants of these tools are vital for typography on the web because simple decisions can have an unexpected, even violent impact[16] 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?[17] 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[18] is one instance where we can immediately identify structural weaknesses.

30
60
90
121
  </div>
  <figcaption class="figcaption--dark">
      <h4>Specificity Graph</h4>
      <p>Base 10 specificity score for each selector by source order. Generally, lower scores and flatter curves are better for maintainability. Source: <a href="http://cssstats.com">CSS Stats</a></p>
  </figcaption>

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[19] 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.[20] 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.

Who is to blame when the vast majority of websites are made up of characters in exclusively one weight and one width? Is CSS to blame? Input Sans by Font Bureau in a variety of widths.

Group

There are certainly a few interesting solutions in the works for this particular problem. In Variable Fonts for Responsive Design, Nick Sherman describes a new, responsive font format for the web:

…the glyph shapes in modern fonts are restricted to a single, static configuration. Any variation in weight, width, stroke contrast, etc.—no matter how subtle—requires separate font files. This concept may not seem particularly bad in the realm of print design, where layouts are also static. On the web, though, this limitation is what I refer to as the “glass floor” of responsive typography: while higher-level typographic variables like margins, line spacing, and font size can adjust dynamically to each reader’s viewing environment, that flexibility disappears for lower-level variables that are defined within the font. Each glyph is like an ice cube floating in a sea of otherwise fluid design.

This technique of generating multiple widths and weights from a “master”[21] source is commonly referred to as interpolation,[22] which Andrew Johnson clarifies in his demo:

An example of interpolation

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[23], 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.

An animation of multiple letters in Input Sans

How many opportunities are we neglecting by using static fonts? How many treasures lurk within the typefaces that we already own? Input Sans Compressed by Font Bureau

Other examples[24] 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”[25] when he claimed that it:

...builds inherent flexibility into the font’s design. A font’s legibility and readability adjustments can be linked to accessibility options. People with low vision who increase the default text size or zoom the browser can get type optimized for them. Fonts can start to respond to combinations of factors like viewport size, screen resolution, ambient light, screen brightness, and viewing distance. Live font interpolation offers us the ability to extend great reading experiences to everyone, regardless of how their context changes.

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.”[26]

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.[27] 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,[28] 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.[29] 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,[30] 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.[31]

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?

About the author

Robin Rendle is a web designer and writer from the UK. Currently he works with the team at CSS-Tricks where he tries to figure out why browsers misbehave in the way that they do.

Colophon

Footnotes and further reading


  1. Die literarische Welt, 22 July 1927, Jan Tschichold. Translation from Active Literature, Christopher Burke, p.61. ↩︎

  2. 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. ↩︎

  3. 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. ↩︎

  4. Der Satz des Buches, p.121, Jan Tschichold — translation from Active Literature, Christopher Burke, p.219 ↩︎

  5. 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. ↩︎

  6. “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. ↩︎

  7. Experiment with Zach Leatherman’s Font Family Reunion to see just how poorly most “web safe” fonts are supported. ↩︎

  8. Combining Typefaces by Tim Brown, Five Simple Steps ↩︎

  9. For an in-depth look at the code behind loading web fonts, I wrote a tutorial on my blog. ↩︎

  10. Font Loading Revisited with Font Events, Scott Jehl. ↩︎

  11. It’s quite likely that our fancy web font will look larger or smaller than the fallback, but with the font-size-adjust property 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. ↩︎

  12. Flash of Faux Text – still more on font loading, Zach Leatherman. ↩︎

  13. For an example of the differences between these various kinds, be sure to read Toshi Omagari’s piece on Italic subtleties, and especially make note of the accompanying illustration. ↩︎

  14. 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.) ↩︎

  15. styleguides.io is a wonderful resource by Anna Debenham that collects the latest articles, resources and workflows for creating styleguides and pattern libraries. ↩︎

  16. Dan Eden explains how this is possible in his excellent talk Move Slow and Fix Things ↩︎

  17. 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. ↩︎

  18. The Specificity Graph, Harry Roberts. ↩︎

  19. 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. ↩︎

  20. This is what I was trying to explain in A Visual Lexicon ↩︎

  21. Multiple Master fonts ↩︎

  22. Interpolation Theory, Lucas de Groot. ↩︎

  23. 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. ↩︎

  24. Such as this responsive SVG demo by Erik van Blokland ↩︎

  25. Live Font Interpolation on the web, Andrew Johnson. ↩︎

  26. Tschichold changed his name from Iwan to Jan because of the stigma of Communism, which in Munich prevented him from finding employment. I found this quote from an article in McSweeneys. ↩︎

  27. 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 ↩︎

  28. 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. ↩︎

  29. It depends. ↩︎

  30. 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. ↩︎

  31. As We May Link, Jeremy Keith. ↩︎