Transfer friction: typography as the surface between ideas & you

A couple months back I was preparing to speak at Web Directions Design in Melbourne and a tweet came across my timeline from type designer and all-around smarty Nina Stössinger that, quite literally, stopped me in my tracks. I knew I needed to incorporate the quote in my talk and it’s been in my brain ever since. It sits there, poking me in the back of the head, nudging me to think about it more, and how it can (and should) influence how we think about design and typography. It’s about friction. If the purpose of design is communicating ideas and influencing behavior (how I most often describe it), the actual interface between those ideas and you, the reader, requires friction. Without that, you won’t remember it at all. Figuring out the right amount of friction—well, that’s the trick, isn’t it?

Guys, no typeface is “like water”. Modernism is over. There are no crystal goblets, no defaults devoid of friction. Design has visible surfaces, inevitably, and they brim with significance and context and connotation and intent and tone.

— Nina Stössinger (@ninastoessinger) April 9, 2019

Typography can be loosely broken down into two purposes: to be read, or to be noticed. Text in product descriptions, articles, blog posts, news updates—all of that is meant to be read smoothly and easily. The purpose of typography in that context is to help convey that information from the writer to you, the reader, in the smoothest way possible. In essence, with the least amount of friction. There still needs to be a bit though, or it won’t be memorable at all (and we’ll talk about that a bit as well).

Headlines and display text (like blockquotes) have a slightly different purpose: they are meant to be noticed. Between the copy itself (I do love a well-written header) and the way it is typeset, the whole point is to draw your attention. In essence, they have a higher degree of friction. They grab your eye and hold it, passing it along to the smoother-running text that follows.

Because these two needs are so disparate, I’m going to break this into two parts. I’ll cover one approach this week, and the other the next.

So far in this newsletter I’ve generally been focused on typography for reading, but I haven’t really stepped back to talk about the ‘why’ behind all of these various techniques. In this issue I hope to correct that. Let’s take a look at some elements that influence friction in text that is meant to be read:

• Block format (size, measure, leading)
• Alignment
• Typeface

There are of course many other details within each of these elements, but they are a good place to start. We’ll start with block formatting.

The secret life of paragraphs

When I use the term ‘block’ I’m generally referring to paragraphs, but in truth it’s any chunk of text. It could be paragraphs in an article, or a bit of descriptive text under a photo on a product listing page, or perhaps the introductory copy on your home page. In each case, the text is there to be read.

The font size needs to be large enough to be legible, but still sized to allow a reasonable length line of text. This is because the way we read is generally in groups of syllables, with eye movements called saccades, jumping back and forth. Jason Santa Maria wrote a wonderful piece about it a few years back that’s still quite relevant.

Already you can see that size and line-length (measure) are quite tied. Leading, or line-height in CSS terms, is connected in that this is what aids (or hinders) our eyes’ ability to track from the end of one line back to the beginning of the next. The longer the lines, the more space we need between them for our eye to easily travel back to the start of the next one.

Keeping these three elements in balance greatly reduces friction, helping to ensure a smooth (and presumably faster) reading experience. So regardless of whether it’s a small block of text under a product photo, a series of paragraphs forming a story, or a big introductory statement on the home page, keeping the balance between those elements is key to crafting a good reading experience. I put up a quick example of these elements over on CodePen.

Off to the side of center

Text alignment is honestly one of the biggest peeves I have about typography I encounter on the web. Symmetry has crept in over the years as a quality of design, particularly responsive design. That may be attractive to the designer—but is actually antithetical to good readability. It’s a pattern we see all the time: a series of ‘cards’ in a row, each with a chunk of text centered below an image. The premise is that if everything is centered, there will be a sense of symmetry no matter how things reflow on different devices (from one to two to three or more across). 

Sadly this is something I see touted as ‘good user experience’ and codified in various frameworks we see every day. The problem with centered text is that once you get beyond two lines, it’s harder and harder for your eye to get back to the beginning of the next line—because your eye doesn’t know where it will be. This causes extra eye fatigue, reducing the attention your reader will be willing to give. Since this centered text is often product details or an introduction to your company, this is precisely the kind of copy you want people to read more, not less! (I may have ranted a little bit about this back in issue #3)

I found another example by looking through the ‘Bootstrap Expo’ gallery. Note that the copy in this image is about why this company is the right one choose, from materials to practices. Very important stuff.

With the pattern below, you can see that as the screen narrows, the ‘cards’ will likely reflow, and the centered alignment will generally keep things tidy. But the centered text slows down your reading. And when the reading slows down, the likelihood is that you won’t keep doing it. 

In the second version, I’ve just left-aligned the text in the description and padded in the left-hand side a bit more than the right. This gives a similarly-balanced feel (it would feel very heavy on the left if I didn’t) but makes it easier on the eyes to read through the copy.

p {
  text-align: center;
  padding: 0 1.5em;
}

Instead of equal left and right padding as above, we simply add a bit more on the left, and reduce a tiny bit on the right. This allows for the uneven ‘rag’ of text on the right to extend a bit more, giving a more balanced feel overall.

p {
  text-align: left;
  padding: 0 1.25em 0 2.5em;
}

Of faces and character

The typeface selection itself is the final aspect I want to cover today. And while the previous two elements are all about reducing friction, typeface selection is sometimes about adding some. That’s not entirely true, but we do want to remember that if you take away all the friction, your copy becomes a slide, and the reader just whisks away. Let me explain.

A good typeface for reading should be legible, and good typesetting will help ensure that text set in that typeface is readable. But if that text is set in a typeface that is exactly the same as millions of other sites and passages of text, that text may be less memorable. Notice I said the text, not the typeface. There’s the rub. You want a typeface that is just different enough to stand apart from the millions of pages of Arial or Open Sans or Helvetica, but not so different that it draws undue attention or impedes the action of reading the text itself.

So selecting fonts that are both legible and distinct—and related to the brand—might be the most important part of the design process. The goal is to add back just enough friction so the message will stick.

Three sides of the coin

While there are many more details to typography that will influence this overall notion of friction (especially small details within blocks or paragraphs), keeping these three broader ideas in balance will go a long way to helping you achieve a better balance of friction in your design of content. Keeping the friction low, but not ground away, will help you avoid tropes and create layouts that inspire connection. Many of these ideas are highly transferrable from one design to the next. Typeface may be one that varies the most—but that’s the fun. Let the typeface give a little tone or emotion, and then get out of the way.

Next week we’ll add some tooth to our typography, and look at how we can design for attention without necessarily sounding an alarm. (Unless we want to 😉)

Resources

• A responsive example over on CodePen
• Try typesetting some copy on Typetura. It's a really cool platform and a great way to experiment right in the browser