|
Greetings from a surprisingly sunny and warm Berlin! I just landed a few hours ago, and wrote most of this on the flight over. Since I’ll be speaking tomorrow, I thought I’d get a start on my plan to send this earlier in the week by getting this out a day earlier than usual. According to MailChimp, the most opens happen if you send on Tuesday. Y’all do a pretty solid job of at least opening the newsletter every week—but if the goal is to teach more people typography for the web, then the more people who open it the better.
I’ve been thinking a bit about the workshop I did in NYC a couple weeks ago, and about a message I got from a friend inquiring about any other workshops I might have scheduled. As I mentioned, my goal in all of these activities is to teach more people about the value and benefits of good typography, and how to implement it on digital platforms. So let me put it to you, the readers: would you be interested in spending a day with me and some of your peers, learning more about typography on the web? It could be more design or development focused, depending upon audience.
But my thought is if we can come up with about 10 or so folks who can be in a common place for a day, that it might just make for a viable and fun series of workshops. And it doesn't have to be just one. So give it some thought. Email me if you like, and in the coming week or two I’ll put together some sort of form or poll to collect interest more formally.
|
|
Cheers,
Jason
Replies go straight to my inbox—let me know what you want to learn!
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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)
|
|
|
|
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.
|
|
|
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.
|
|
|
|
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!
|
|
Web Type News
- Issue #3 of Type Magazine just came out, and it’s another one chock full of great writing about fascinating subjects (and an article from me about variable fonts :D ) Join today and get your copy!
- Scott Kellum passed along a link to a page on Ravi Parikh's site devoted to the distribution of word lengths in various languages. Some interesting data to keep in mind when designing for changing content.
|
|
Does your organization need a boost?
If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!
|
|
Upcoming Events
- I’ll be talking variable fonts and lots more at CSSconf EU in Berlin on May 31st
- Heading to Barcelona on July 17th for CSS Camp to chat about dynamic typography and variable fonts
- Winding up in the Windy City for An Event Apart Chicago on August 26-28
- Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14
|
|
|
|
