What is Typesetting?

Typesetting is the most important part of typography, because most text is meant to be read, and typesetting involves preparing text for reading.

You’re already great at typesetting. Think about it. You choose good typefaces. You determine font sizes and line spacing. You decide on the margins that surround text elements. You set media query breakpoints. All of that is typesetting.

Maybe you’re thinking, But Tim, I am a font muggins. Help me make better decisions! Relax. You make better decisions than you realize. Some people will try to make you feel inferior; ignore them. Your intuition is good. Practice, and your skills will improve. Make a few solid decisions; then build on them. I’ll help you get started.

In this chapter, I’ll identify the value of typesetting and its place within the practice of typography. I’ll talk about pressure, a concept I use throughout this book to explain why typeset texts sometimes feel awkward or wrong. I’ll also discuss how typesetting for the web differs from traditional typesetting.

Why Does Typesetting Matter?

Typesetting shows readers you care. If your work looks good and feels right, people will stick around—not only because the typography is comfortable and familiar, but also because you show your audience respect by giving their experience your serious attention (Fig 1.1).

Fig 1.1: Glance at these two screenshots. Which one would you rather read? Which publisher do you think cares more about your experience?

Sure, you could buy the “it” font of the moment (you know, the font all the cool people are talking about). You could use a template that promises good typography. You could use a script that spiffs up small typographic details. None of these things is necessarily bad in and of itself.

But when you take shortcuts, you miss opportunities to care about your readers, the text in your charge, and the practice of typography, all of which are worthwhile investments. Spending time on these things can feel overwhelming, but the more you do it, the easier and more fun it becomes. And you can avoid feeling overwhelmed by focusing on the jobs type does.

Imagine yourself in a peaceful garden. You feel the soft sun on your arms, and take a deep breath of fresh, clean air. The smell of flowers makes you feel happy. You hear honeybees hard at work, water trickling in a nearby brook, and birds singing. Now imagine that this garden needs a website, and you’re trying to find the right typeface.

Sorry to spoil the moment! But hey, if you do this right, the website could give people the same amazing feeling as sitting in the garden itself.

If you’re anything like me, your first instinct will be to recall sensations from the imaginary garden and look for a typeface with shapes that evoke similar sensations. But this is not a good way to choose among thousands upon thousands of fonts, because it’s too easy to end up with typefaces that—as charming as they may seem at first—don’t do their jobs. You’ll get disappointed and go right back to relying on shortcuts.

Finding typefaces that are appropriate for a project, and that evoke the right mood, is easier and more effective if you know they’re good at the jobs you need them to do. The trick is to eliminate type that won’t do the job well (Fig 1.2).

Fig 1.2: Hatch, a typeface by Mark Caneso, is fun to use large, but not a good choice for body text.

Depending on the job, some typefaces work better than others—and some don’t work well at all. Detailed, ornate type is not the best choice for body text, just as traditional text typefaces are not great for signage and user interfaces. Sleek, geometric fonts can make small text hard to read. I’ll come back to this at the beginning of Chapter 3.

Considering these different jobs helps you make better design decisions, whether you’re selecting typefaces, tending to typographic details, or making text and layout feel balanced. We’ll do all of that in this book.

Typesetting covers type’s most important jobs

Typesetting, or the act of setting type, consists of typographic jobs that form the backbone of a reading experience: body text (paragraphs, lists, subheads) and small text (such as captions and asides). These are type’s most important jobs. The other parts of typography—which I call arranging and calibrating type—exist to bring people to the typeset text, so they can read and gather information (Fig 1.3).

Fig 1.3: Think of these typographic activities as job categories. In Chapter 3, we’ll identify the text blocks in our example project and the jobs they need to do.

Let’s go over these categories of typographic jobs one by one. Setting type well makes it easy for people to read and comprehend textual information. It covers jobs like paragraphs, subheads, lists, and captions. Arranging type turns visitors and passersby into readers, by catching their attention in an expressive, visual way. It’s for jobs like large headlines, titles, calls to action, and “hero” areas. Calibrating type helps people scan and process complicated information, and find their way, by being clear and organized. This is for jobs like tabular data, navigation systems, infographics, math, and code.

Arranging and calibrating type, and the jobs they facilitate, are extremely important, but I won’t spend much time discussing them in this book except to put them in context and explain where in my process I usually give them attention. They deserve their own dedicated texts. This book focuses specifically on setting type, for several reasons.

First, typesetting is critical to the success of our projects. Although the decisions we make while typesetting are subtle almost to the point of being unnoticeable, they add up to give readers a gut feeling about the work. Typesetting lays a strong foundation for everything else.

It also happens to be more difficult than other parts of typography. Good type for typesetting is harder to find than good type for other activities. Good typesetting decisions are harder to make than decisions about arranging type or calibrating type.

Furthermore, typesetting can help us deeply understand the web’s inherent flexibility, which responsive web design has called attention to so well. The main reason I make a distinction between typesetting, arranging type, and calibrating type is because these different activities each require text to flex in different ways.

In sum, typesetting matters because it is critical for readers, it supports other typographic activities, the difficult decisions informing it take practice, and its nature can help us understand flexibility and responsiveness on the web. A command of typesetting makes us better designers.

Why do some websites feel wrong?

It’s not hard to find websites that just feel, well, sort of wrong. They’re everywhere. The type they use is not good, the font size is too small (or too big), lines of text are too long (or comically short), line spacing is too loose or too tight, margins are either too small or way too big, and so on (Fig 1.4).

Fig 1.4: Some typesetting just looks wrong. Why? Keep reading.

It’s logical to think that websites feel wrong because, somewhere along the line, a typographer made bad decisions. Remember that a type designer is someone who makes type; a typographer is someone who uses type to communicate. In that sense, we are all typographers, even if we think of what we do as designing, or developing, or editing.

For more than 500 years, the job of a typographer has been to decide how text works and looks, and over those years, typographers have made some beautiful stuff. So if some websites feel wrong, it must be because the typographers who worked on them were inexperienced, or lazy, or had no regard for typographic history. Right?

Except that even the best typographers, who have years of experience, who have chosen a good typeface for the job at hand, who have made great typesetting decisions, who work hard and respect tradition—even those people can produce websites that feel wrong. Websites just seem to look awful in one way or another, and it’s hard to say why. Something’s just not quite right. In all likelihood, it’s the typesetting. Specifically, websites feel wrong when they put pressure on typographic relationships.

Fig 1.5: Replacing this theme’s default font with Kepler made the text seem too small. Size and line-spacing adjustments felt necessary.

Typographic relationships

Have you ever chosen a new font for your blog template, or an existing project, and instinctively adjusted the font size or line spacing to make it feel better?

Those typesetting adjustments help because the typeface itself, as well as its font size, measure (a typographic term for the length of lines of text), and line spacing all work together to make a text block feel balanced. (We’ll return to text blocks in more detail in Chapter 3.) This balance is something we all instinctively notice; when it’s disrupted, we sense pressure.

But let’s continue for a moment with this example of choosing a new font. We sense pressure every time we choose a new font. Why? Because each typeface is sized and positioned in unique ways by its designer (Fig 1.6).

Fig 1.6: Glyphs are sized and positioned within a font’s em box. When we set a font size, we are sizing the em box—not the glyph inside it.

In Chapter 2, we’ll take a closer look at glyphs, which are instances of one or more characters. For now, suffice it to say that glyphs live within a bounding box called the em box, which is a built-in part of a font file. Type designers decide how big, small, narrow, or wide glyphs are, and where they are positioned, within this box. The em box is what becomes our CSS-specified font size—it maps to the CSS content area.

So when we select a new typeface, the visible font size of our text block —the chunk of text to which we are applying styles—often changes, throwing off its balance. This means we need to carefully adjust the font size and then the measure, which depends on both the typeface and the font size. Finally, we adjust line spacing, which depends on the typeface, font size, and measure. I’ll cover how to fine-tune all of these adjustments in Chapter 4.

Making so many careful adjustments to one measly text block seems quite disruptive, doesn’t it? Especially because the finest typographic examples in history—the work we admire, the work that endures—commands a compositional balance. Composition, of course, refers to a work of art or design in its entirety. Every text block, every shape, every space in a composition relates to another. If one text block is off-kilter, the whole work suffers.

I’m sure you can see where I’m headed with this. The web puts constant pressure on text blocks, easily disrupting their balance in myriad ways.

Pressure

There are no “correct” fonts, font sizes, measures, or line heights. But relationships among these aspects of a text block determine whether reading is easier or harder. Outside forces can apply pressure to a balanced, easy-to-read text block, making the typesetting feel wrong, and thus interfering with reading.

We just discussed how choosing a new typeface introduces pressure. The same thing happens when our sites use local fonts that could be different for each reader, or when webfonts fail to load and our text is styled with fallback fonts. Typefaces are not interchangeable. When they change, they cause pressure that we have to work hard to relieve.

We also experience pressure when the font size changes (Fig 1.7). Sometimes, when we’re designing sites, we increase font size to better fill large viewports —the viewing area on our screens—or decrease it to better fit small ones. Readers can even get involved, by increasing or decreasing font size themselves to make text more legible. When font size changes, we have to consider whether our typeface, measure, and line spacing are still appropriate.

Changes to the width of our text block also introduce pressure (Fig 1.8). When text blocks stretch across very wide screens, or are squeezed into very narrow viewports, the entire composition has to be reevaluated. We may find that our text blocks need new boundaries, or a different font size, or even a different typeface, to make sure they maintain a good internal balance—and feel right for the composition. (This may seem fuzzy right now, but it will become clearer in Chapters 5 and 6, I promise.)

Fig 1.7: Left: a balanced text block. Right: a larger font size causes pressure.

Fig 1.8: Left: a balanced text block. Right: a narrower measure causes pressure.

We also experience pressure when we try to manage white space without considering the relationships in our text blocks (Fig 1.9). When we predetermine our line height with a baseline grid, or when we adjust the margins that surround text as if they were part of a container into which text is poured rather than an extension of the balance in the typesetting, we risk destroying relationships among compositional white spaces—not only the white spaces in text blocks (word spacing, line spacing), but also the smaller white spaces built into our typefaces. These relationships are at risk whenever a website flexes, whenever a new viewport size comes along.

Fig 1.9: Left: a balanced text block. Right: looser line spacing causes pressure.

Typesetting for the web can only be successful if it relieves inevitable pressures like these. The problem is that we can’t see all of the pressures we face, and we don’t yet have the means (the words, the tools) to address what we can see. Yet our natural response, based on centuries of typographic control, is to try to make better decisions.

But on the web, that’s like trying to predict the weather. We can’t decide whether to wear a raincoat a year ahead of time. What we can do is get a raincoat and be ready to use it under certain conditions. Typographers are now in the business of making sure text has a raincoat. We can’t know when it’ll be needed, and we can’t force our text to wear it, but we can make recommendations based on conditional instructions.

For the first time in hundreds of years, because of the web, the role of the typographer has changed. We no longer decide; we make suggestions. We no longer choose typefaces, font size, line length, line spacing, and margins; we prepare and instruct text to make those choices for itself. We no longer determine page shape and quality; we respond to our readers’ contexts and environments.

These changes may seem like a weakness compared to the command we have always been able to exercise. But they are in fact an incredible strength, because they mean that typeset text has the potential to fit everyone just right. In theory, at least, the web is universal.

The primary design principle underlying the web’s usefulness and growth is universality.

—Tim Berners-Lee (http://bkaprt.com/ft/01-01/)

We must now practice a universal typography that strives to work for everyone. To start, we need to acknowledge that typography is multidimensional, relative to each reader, and unequivocally optional.

Multidimensional Decisions

Take a minute to go find a physical book. Any book will do. Open it up and look at a paragraph. Ask yourself: What if this paragraph were sitting on a much narrower page? How would the paragraph need to change to look good? I wrote this book to begin to answer questions like this.

There are many such questions. What if the paragraphs were much wider? What if the font size were much bigger, or much smaller? What if it were a different font? What if the paper looked sharp and crisp, or coarse and muddy? What if the dimensions of the page were tall and narrow? Or short and wide? Or short and narrow? Or tall and wide? What if the paper were a brighter white, or a dim off-white, or some vivid color? What if the book was so heavy it had to rest on atable?

This isn’t theoretical. People today use a variety of devices with different screens, different settings, and different preferences to read text on the web. That multiplicity of reading experiences means that many people can look at the same typeset text and see it many different ways. All of these people experience the same typography, but they each see something a little different than everyone else sees, and the diversity of these unique experiences will only intensify as the web matures (Fig 1.10).

Fig 1.10: Screenshots of an article from Vassar Stories, clockwise from top left: wide layout, narrow layout, with web fonts disabled, with CSS disabled, and in Safari Reader View.

Typography now requires us to design for many conditions at once, which is hard because our brains can’t directly perceive all of those conditions simultaneously—it’s like trying to see the fourth dimension (Fig 1.11). But although this might sound extremely complicated, designers have lots of relevant experience. From branding guidelines to advertising campaigns, designers have, as an industry, already tackled the problem of putting the same typographic message into spaces of various size and context. Our new challenge is to articulate those decisions in code. We need to prepare our work to answer all kinds of questions, on the fly, as it responds to, and for, readers.

Fig 1.11: Screenshot from The Fourth Dimension (http://bkaprt.com/ft/01-02/), an iOS app with interactive diagrams that helped me understand web design. We build experiences by manipulating their shadows.

One with the Reader

Typographers don’t make absolute decisions anymore. Instead, they make decisions that are relative to each reader.

Good typographers have always gotten to know their readers’ contexts, such as the kind of typesetting readers are familiar with, the environment in which they do their reading, and their general level of sightedness. But the web takes this “familiarity and comfort” concept to a whole new level. Familiarity and comfort mean many different things to many different people. The devices we all use are personal. We use them all the time and are very familiar with how text generally looks. There are settings, preferences, and different software versions too, so even people with the same hardware and operating system may still see very different results.

Our decisions about typesetting need to account for this. We do that by providing logic for when conditions are not ideal, but most importantly by starting from each reader’s perspective. By using any given reader’s default font-size to structure our typesetting and measure our layout, we stand the best chance of making something that feels natural to each reader.

And that’s important, because even if we’ve done all we can to respond to our readers’ conditions, not all reader comfort zones will result in beautiful typography—and that’s okay. If the reality of a reader’s context challenges our design intentions, that’s not wrong. It’s not even bad typography. Because of the web, typography is now forced into spaces and situations where it can’t look good. But it can still be beautiful if it works well, and that is good typography.

Get used to the idea that readers are in control, because it’s not going away. I have wondered about this. When VR and AR advancements expand our field of view beyond the physical devices we use today, will we revert to giving print-like dimensions to our virtual texts? I don’t think so, because reader expectations have already been changed. People won’t want to have to hold a virtual piece of paper or book—they’ll want to summon that text according to their preferences, with minimal effort, and have it look familiar and comfortable.

People now expect text to flex and respond to their settings and preferences.

Readers Are Typographers, Too

Typography is now optional. That means it’s okay for people to opt out. Styles for font-size and line-height, styles for a site’s heading hierarchy, and styles for the overall dimensions of a layout—if any of these, or any styles at all, are absent, that’s okay. If a webfont file doesn’t load, and a reader instead sees a fallback font that you, the designer, have never seen before, that’s okay. In fact, it’s better than okay.

Deep breaths!

But Tim, you might be thinking, this is nonsense! How text looks is very important. Do I seriously have to defend the value of typography to the author of a book about typography? I hear you. I know how tough it was to read that last paragraph.

Of course typography is valuable. Typography may now be optional, but that doesn’t mean it’s worthless. Typographic choices contribute to a text’s meaning. But on the web, text itself (including its structural markup) matters most, and presentational instructions like typography take a back seat. Text loads first; typography comes later. Readers are free to ignore typographic suggestions, and often prefer to. Services like Instapaper, Pocket, and Safari’s Reader View are popular partly because readers like their text the way they like it.

Formal meaning is even devalued by some presentational responses to the web’s prioritization of semantics: designers have either felt compelled to settle for experiences easily distilled into the format of an academic text, bland tomes speckled with headings and bulleted lists; or they have railed against the web’s logic by using plugins and scripts that change its priorities by force, in which case they discard the most essential, amazing aspect of the web: that it has the potential to work for everyone bydefault.

What are we going to do about this devaluation of graphic meaning besides talk? How can we act? What might we do differently as we work on our next project? How can we make the optional nature of web typography align with producing excellent work?

One thing we can do is practice. If typography is optional, it has to be worth opting into. It has to be great. Readers need to prefer it to experiences that are faster and more convenient. If you have this book, you’re probably already honing your skills and working to make your typography as good as it can be for the web. In doing so, you’re not only improving the quality of your work—you’re moving the entire practice of typography forward.

The other thing we can do is pay attention to performance.

Performance is a word web designers and developers use to describe the speed, loading sequence, and smoothness of a web experience. In the context of typography, performance refers to the speed with which fonts and typographic suggestions load, the order in which they load, and what readers see while that stuff is happening. These factors are in part the result of typographic design decisions.

If we don’t pay attention to performance, and if the experience consequently feels slow and sloppy, many people will opt. Furthermore, when we don’t pay attention to performance, we’re leaving important design work undone. A lot of people have spotty and/or slow internet connections, and we need to design for those experiences too.

We’ll touch on performance throughout this book, from the basics of font loading to managing fallback font transitions. For a thorough guide to webfont performance—particularly when it comes to deciding how to spend a budget, and how to optimize type for production sites—read Bram Stein’s Webfont Handbook (http://bkaprt.com/ft/01-03/). And to learn how webfonts fit into a site’s overall performance, check out Scott Jehl’s Responsible Responsive Design (http://bkaprt.com/ft/01-04/).

Fig 1.12: On the web, what something is—its structure—matters more than what it looks like. This is a feature. The fact that this is a subheading matters more than how the subheading looks.

This Is Only the Beginning

So there you have it. Typesetting matters, but often feels wrong because of pressure exerted by the web’s changeable formats and reader participation. To relieve that pressure, designers need to work in a dimension human beings can’t directly perceive, consult every single device on earth about our units of measurement, and plan for anyone to contribute opinions that override our own educated design suggestions.

This is fine (Fig 1.13). No, really. It’s overwhelming and difficult, and it sounds absolutely ridiculous, but it will be okay. We’ll figure this out together.

Typesetting for the web—not just sticking some beautiful, static typesetting on the web, but crafting something innately of and for the web —is difficult because we are at the beginning of a major transition in typographic history.

We used to view typography as a set of fixed decisions, but now we understand it as a continuum of conditional logic. And although we currently think of the web in terms of mobile-device screens and browser windows on personal computers, the crux of this historic transition is not about any particular medium. It’s not about today’s screens and software. It’s about how the web has changed our relationship to text.

Fig 1.13: Panel from the Gunshow strip “On Fire” by KC Green. Reprinted with permission.

Reading on the web is not like picking up a book or a magazine. It’s not like zipping past a billboard on the highway or watching a title sequence crawl through on video. Web-based text is like all of these things at once, and we’ve come to expect it to conform to our personal preferences. We each see text on the web through our own lens, and our ability to customize it invites us to participate in how it looks and behaves. We challenge text to meet us halfway.

Typography is still evolving on the web. There are a number of ways in which it is less capable than print typography, but the gap is closing thanks, in large part, to web standards. Web standards are agreed-upon conventions about how things are achieved in code—like how to mark up a heading with HTML, and how to declare font-weight in CSS (http://bkaprt.com/ft/01-05/). Once upon a time, web browsers competed with features, offering proprietary code and behaving in unique ways. To design for the web back then meant understanding the eccentricities of each context and writing separate codebases for each browser. The introduction of web standards reined in those eccentricities and encouraged collaboration and compatibility among browsers.

Web standards are ours. We—designers, coders, writers—make them, and they exist for everyone’s benefit and use. They are not finished. They will never be finished. New ideas are continually incorporated when there is, as Jeff Veen likes to say, “rough consensus and running code” (http://bkaprt.com/ft/01-06/). Successful processes exist for making improvements. I bring this up as a reminder that you and I can participate in shaping the future.

Let me tell you a quick story.

In Chapter 4, I’ll discuss how line spacing looks better tight in narrow text blocks, and loose in wide text blocks. There is broad consensus about this—ask any experienced typographer. In CSS, we can achieve this by changing line-height with media queries, but that’s a bit heavy-handed.

This was bothering me, but then I had an idea for how to make it more fluid. I didn’t know how to script my idea, so I wrote a blog post explaining how a script might work (http://bkaprt.com/ft/01-07/). Sharing that idea resulted in several actual working implementations, one of which can be done with ordinary CSS (http://bkaprt.com/ft/01-08/). This journey led me to profound ideas about how all white space should flex (which I’ll talk about in Chapters 4 and 5)—ideas that I’m certain benefit typography now that lots of smart people have discussed one such example. That example is something we can show to people who build web browsers and craft web standards. Rough consensus and running code!

I hope this book will help you orient yourself in this historic moment, so you and I can move things forward together. Don’t worry if it seems complicated. We’ll take it nice and easy. First let’s read some text. It’s the best way to start.