Skip to main content
Responsive Web Typography
Thursday, 30 May, 2019

Transfer friction: intentional tension

Last week I wrote about the idea of friction in design, sparked by a wonderful quote from Nina Stössinger. I’m pleased that a few of you have commented about it resonating with you as well. While in the last issue I focused on typography for longer-form reading where you want to actively reduce friction, this week we’ll take a look at the other end of the pendulum swing: type meant to halt you in your tracks and which demands to be read.

There are varying degrees to which this can be done, but the idea is by using type and typography that deliberately draws greater attention—and even in some cases makes the act of reading it just a little bit harder—one can influence the pace and attention of the reader.

Here’s that tweet again for reference (and because it’s fantastic):

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

Nina referenced the idea of design having a surface with context and intent. I think that the typography of headings and blockquotes are the sorts of elements that can (and often should) have a rougher surface—in a very intentional manner. These elements are often used as road signs and guideposts for the reader: they’re meant to grab your eye, draw you in, and hold your focus. By deliberately slowing you down and requiring more effort to visually decode what you’re seeing, the design can trigger a greater level of attention and retention of the message being delivered. Sometimes just by slowing you down, the message has a little more ‘stick’ to it.

There’s certainly ample history to support this idea: designers have been using type in deliberately challenging ways as long as there has been a notion of design in the first place. 

Bauhaus poster design
A wonderful design that uses type in incredibly inventive ways

(bau)Haus music

There are whole books’ worth of great examples of typographic friction in poster design over the decades, but this one from the Bauhaus is a wonderful example. Type is equally important as part of the form, and hierarchy is driven by placement, scale, and directionality. It’s a beautiful example of friction that demands your attention and focus.

1993 cover from Raygun magazine
David Carson’s inventive reinvention of typographic forms defined a decade of graphic design

Analog dreams & electric sheep

David Carson’s layering, cutting, combining, and breaking of letterforms is a hallmark of graphic design in the 90’s and early 2000’s. His work turns type into texture, mixes serif and sans-serif forms, duplicates counters, and in general reaches out, grabs your eyeballs and yanks them to the page. While it was the advent of digital tools that unleashed much of this experimentation, the end result at times looks more like a cut paper collage—in the best and most visceral of ways.

Sans Forgetica font
Not convinced I want to read Moby Dick set in it, but it certainly makes an arresting headline

You’re sans-forgettable

Late last year a group of researchers from RMIT in Melbourne released a study and a typeface they claim improves memory and reading retention by purposefully making it harder to read. There is far from enough evidence to be certain it actually works, but it certainly can serve as a playful and eye-catching display face.

Lovesick blog post
This older version of Jason Santa Maria's blog shows the possibility of what art direction can bring to the web, but was done at a time where the technology (or lack of it) meant it was an unsustainable amount of work over time.

A digital  analog

When we think about adding friction to the reading experience on the web, we have to think in a few different dimensions. We still want it to be readable—visually, for those using assistive technologies, and of course, the robots—but that doesn’t mean can’t be visually arresting. Through typeface choice, layout choices, scale, writing direction, and techniques leveraging positioning and overflow, we have lots of opportunities to create friction. It’s a shame it’s not more common.

A few years ago, Jason Santa Maria famously took on the challenge of art directing every blog post on his site, with different layout, type choices, color, and more. Stunning, and unsustainable. Jen Simmons has been doing a host of amazing explorations of superb graphic design, translated to the web—in her talks and on her Labs site (start there to see the kind of typography I'm talking about)

FIT typeface from DJR
Maybe just changing the typeface will fit the need. DJR created FIT as a variable font, with one axis constantly set to 11 (It’s not actually set to 11)

So why have we cast away our voice?

Likely for a myriad of reasons, but the simplest and most likely candidates are time and complexity. The constant rush to publish means more time spent on the universal elements of design, and less (if any) spent on the specific. I think it’s time to change that while we still can. While there are still graphic designers who remember that there used to be something called ‘art direction’ involved in publishing a piece of text. Design decisions made based on the content—this content—that amplify the mood and message. Decisions that add friction.

An example of a more art-directed interplay between text and image
An experiment you can play with on CodePen, all the type is a single variable font, and the art direction is responsive

We’ve created wonderful publishing platforms (like the ones I use to bring this to you: MailChimp, Drupal, and Medium) that allow us to create a design system that presents our content in consistent and pleasing ways, and removes much of the friction in the publishing process itself. But we stopped there. We never got around to building a few more tools that let us put the friction back in. So that’s what I’d love to see next: Tiny little style sheets paired with specific headlines and stories, adding the design and direction we’ve lost along the way to our new digital neighborhood.

<style type="text/css">
@media screen and (min-width: 60em) {
  h1 {
    --h1-font-size-max: 7;
    float: left;
    width: 4.25em;
    shape-outside: 
      polygon(0px 0px, 4.25em 0px, 4.25em 43%, 
      3.5em 43%, 3.5em 100%, 0px 100%);
  }
}
</style>

By adding that simple bit of CSS above into a code embed block on that page on my site, I can add a bit of design and direction to the individual posts without having to push custom code through a deployment cycle.

Example of a headline with the text wrapping around it
Currently live on my site: an experiment with adding a tiny bit of custom CSS to better typeset the headlines

I hope you’ve enjoyed these last two issues, and are thinking about typography just a little bit differently now. I know I’m still wrapping my head around the ideas of surface and tension, friction and flow—but that’s what I love about this industry. It changes every day, and what we experiment with today, shapes the browsers and trends of tomorrow. Let’s make a difference!

Resources

 

Sign up for the newsletterThis is an excerpt from my email newsletter devoted to web typography tips. Each issue I cover a new topic about typography for the web and digital platforms. Sometimes design focused, sometimes technical, usually a bit of both. I archive all the tips here, and all the examples are available on CodePen, so you’ll be able to quickly try out each tip live in the browser, play with it, and take it to use in your own projects.