Web Fonts &
Typography News

Issue #35 • 7 February, 2020

Well it feels good to be getting back to a more regular cadence of the newsletter! It’s still pretty hectic around here but generally in a good way. I spied one of my recent projects starting to sneak out into the world, so I’ll be able to tell you more about that soon.

I've had a couple more conference and workshop inquiries as well. If you think your team might benefit from a day of learning and doing for designers and developers together, get in touch.

I spent a bit more time on poster-inspired typography this week. I hope you enjoy it even a fraction as much as I have creating it!



Replies go straight to my inbox—let me know what you want to learn!

Today’s Tip

Text and image interplay & animation

Following on from last week’s issue (and inspired a bit by receiving the latest Type Directors Club annual in the post), I spent some more time looking at vintage posters. The spark came about when I went looking through the last couple emails from DJR’s Font of the Month Club. I discovered that January’s edition contained a bonus: a new, more complete version of Gimlet in variable format, complete with axes for width, weight, italic, and optical size!

Image of Gimlet typeface on blocks of color
Gimlet—the typeface!

I’ve loved Gimlet since I first saw an early version just after variable fonts were introduced, and have used it for various demos over the years. I love its quirky 60’s vibe, and have always thought it reminded me of period poster and advertising design. 

So that’s where we went.

Searching for what’s seldom seen

One of the most common and visually arresting techniques in graphic design is creating the illusion of interplay between text and image. The shifting of typographic forms before and behind photographic elements creates dynamic tension, sparking interest and examination. These techniques have been in use for hundreds of years in illustration, magazine and poster design, and can even be seen in the title screen of the latest streaming sensation, Cheer.

Title screen from Cheer shoing the cheer squad on the mat
Notice how the letters intertwine with the squad

Have a look at this poster from Schmid/Widmaier (via the TDC annual). Notice how the abstracted letterforms drift in front of and behind the hand.

Image of a poster by Schmid/Widmaier with illustration and letters intertwined
A really striking design that’s part of a set of four from this talented duo

Or this stunning travel promotion by Cussetti. Note the way the flowers curl around the ‘P’ in Paris. Subtle, but lovely.

Image of a Cussetti poster for travel around Paris
A really beautiful poster overall, but the flowers curling around the ‘P’ is particularly beautiful

So wherefore art thou on the web?

The simple answer is that we don’t see this kind of interplay between text and image because it used to be hard to do. We’re conditioned on the web to keep things simple: images in boxes, text on top. Usually on a semi-transparent block. Always optimizing for a system-driven, content-managed, ever-changing world of new posts published every day with no time for design or development intervention.

While it would be impractical to think every page, promotion, or post could be designed and custom-coded, I’ve written about a middle ground before—and this is another good example. The core text content doesn’t need much if anything modified, but spending a little bit of time customizing a clip-path mask for the text overlaying the image can create some really dynamic effects without requiring very much code.

Photo of the tail of an airplane
The photo as posted on Instagram in all it’s filtered glory

Catching the travel bug

Taking cues from the poster examples, I dug though my photo archive and found one I posted to Instagram a few years ago on my way back from Baltimore. It’s got a really graphic quality to it that seemed like it would fit. I decided on a horizontal crop that focused on the tail. Setting the image as a background sized to 100% kept it filling the container, and let me set up the basic layout. 

.poster {
  background-image: url(;
  background-repeat: no-repeat;
  background-size: 100%;

.poster-mask {
  height: 100%;
  width: 100%;
  z-index: 1;

h1 {
  color: rgba(0,0,67,.7);
  font-family: "Gimlet";
  font-size: 15vw;
  font-stretch: 75%;
  font-weight: 900;
  font-variation-settings: 'ital' 1;
  line-height: 1.1;
  padding: 5vw 2vw 0 2vw;
  width: 75vw;
Closeup of image overlaying the phtoto of the plane
Text and image without any masking

Now what I want to do is allow the text to fall behind the tail of the plane without resorting to adding separate image files with different transparency to sandwich the text (though that’s a pretty interesting technique as well). Enter CSS attribute ‘clip-path’ (and it’s vendor-prefixed cousin to ensure compatibility with Safari). I found a good article on CSS Tricks about it, and after a little fiddling with the Shapes editor in the Firefox Dev Tools (thanks Jen, Miriam, & the Dev Tools team!) I had pretty good masking layer created.

.poster-mask {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.34% 90.23%, 79.17% 10.09%, 68.35% 8.66%, 35.89% 77.18%, 31.83% 83.22%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.34% 90.23%, 79.17% 10.09%, 68.35% 8.66%, 35.89% 77.18%, 31.83% 83.22%, 0% 100%);
  z-index: 1;

Everything is done in percentages and the text is set including viewport units so we can be sure it will all scale nicely. You can always tweak the size values in other ways to fit your layout needs. But with a little bit of Grid for layout layering, this holds up pretty well.

Since we are on the web in this example, I’ve added a bit of animation as the whole thing loads. I think that's one of the emerging areas of typgraphy on the web that should be explored more. Animating type along axes during load or when content comes into view is a wonderful way to draw the readers eye. You don’t want to go overboard—and you should respect preferences for reduced motion—but it’s easy to do and animates beautifully.

Final layout with clipped text
The final layout combining various axis combinations of Gimlet and the clip-path masking helping the type hide behind the tail of the plane

While certainly not something you might do every day, you could imagine this working really well on a landing page or home page teaser (or some other promo usage). Indeed, given how much time publications put into their cover and article intros in print, it seems an obvious place to put some effort to create this kind of effect on their sites.

This experiment certainly has its limitations, but it does scale pretty well. I hope you’ll find this inspiring enough to try out osme of these techniques on your own projects. Be sure to share when you do!


Web Type News

  • Toshi Omagari’s book Arcade Game Typography is available, and it’s _fabulous_
  • Fontstand announced their annual conference, taking place in May 2020 in Dublin. I haven’t had the chance to attend but have always heard great things
  • Typographics also launched their 2020 site recently

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

  • Headed to Cape Town, South Africa for Pixel Up! in May to give a talk and a workshop on editorial design with variable fonts
  • I’ll be returning to the An Event Apart stage in Boston at the end of June
  • More events and workshop details coming soon!
If the typeface in this message has Georgia on your mind, you're not seeing the web fonts :( I'm hoping that you're seeing it set in the lovely Roslindale (Display Condensed and Text) designed by the amazing David Jonathan Ross for his You should check it out!
Copyright © 2020 Jason Pamental, All rights reserved.

Forward to a friendSubscribe
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Email Marketing Powered by Mailchimp