Web Fonts &
Typography News

Issue #40 • 3 April, 2020

Hey there. How are you? If there’s one thing I’ve come to really appreciate is the number of times and the sincerity with which I've been asked that question lately. Even as someone who is used to working from home, life has gotten really strange. I’m thankful that quarantine has included family, dogs, and bike rides (the latter at least for now). So I put the question to all of you: how are you? Personally or professionally, if I can help, listen, advise, or be of service in some other way I’ll do my best to do so. Of course, if all 1100 or so of you take me up on it I might be slower to respond, but I’ll try :)

One of the ways I’ve been coping is by writing this newsletter. It’s an engaging distraction to work on, and at least something I can do to provide the same for you. No hard feelings if you don’t want to read about fonts right now though—I completely understand. Interestingly enough open rates of the newsletter are still roughly the same, so as long as you all still are reading it, I’ll do my best to keep writing it!

Online workshops: interested?

On a related note, since in-person workshops are on hold for who knows how long, I’ve been thinking about offering online workshops in using variable fonts, working with the Google Fonts API to get them, and other bits and bobs about dynamic typography like what I write about here. If you’d be interested in participating in one, send me an email and let me know. Pricing will be based on the length of the workshop, but figuring likely not more than $100, with a discount for students or other extenuating circumstances. Basically as long as the platform cost is covered I want to make this as accessible as possible.



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

Today’s Tip

Masks, perspective, and pattern

Inspiration has struck yet again in the form of an email from International Poster Gallery in Boston. I love vintage travel posters, and this Rio advertisement by Joa circa 1950 really grabbed me. The big graphic use of type as compositional object and mask, the strong diagonal interpretation of the boardwalk at Copacabana Beach, all emerging from a luscious deep blue. It’s a really beautiful design.

Poster advertisement for Rio
A beautiful example of mid-century poster design

Aside from just looking good, the techniques that really intrigue me are the combination of using a super heavy typeface as a mask for a secondary image, and skewing the text with a perspective effect to further enhance the strong directionality of the composition and illusion of space that it creates. These are wonderful techniques that add a real dynamism to the design, but are rarely seen on the web. 

It occurred to me that a couple of these techniques have already been covered and could be combined in a fun way to create a similar overall design on the web. We covered masked and clipped text and image back in issue 29, and last week we played around with skewing live text. Adding a perspective distance to the transform can give us the receding effect we want, and keeps all the text ‘live’ with no additional classes added to the markup. 

Reservoir Dog in text, skewed, masked and filled
Just the main title perspective and mask effects

This is really important: in order for an effect like this to be viable on the web, we want to ensure it can be set up in a system. By focusing on the ability to substitute any photo and any string of text, the effect could be generalized enough to incorporate into a CMS, allowing for enough variation that it can still feel fresh. I would envision incorporating several of the techniques we’ve covered so that whenever you want to have a more unique headline, you have plenty of choice and flexibility without having to custom-code everything.

When I started working on this demo, I knew I needed to find a typeface  with a lot of ‘surface area’ in order to work well as a mask and show enough of the photo underneath. As has often been the case, I knew I had something at hand from DJR’s that would work: Bild! David released a variable version with a width axis that, when combined with the perspective and skew effects would really exaggerate the effect perfectly. I used Bild Widths for both parts of the title, and put the open source gem Work Sans (the variable version) to the task of the tagline.

.reservoir {

/* perspective skew */
  transform: perspective(10cm) rotateY(-30deg);

.dog {

  /* Image masking bits */
  background: url(;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: -12vw 3vw;
  color: transparent;
  /* perspective skew */
  transform-origin: center left;
  transform: perspective(20cm) rotateY(30deg);

In the code above I’ve removed the positioning and general text style bits—but the relevant bits about masking and skewing are what’s central to the design. Note that in positioning the masked photo you’ll want to match the font-size units and background-position ones so they scale in a relatively uniform manner. In this case I’ve used VW units so they scale with the window size. 

It felt like something was missing, and the boardwalk pattern from the original poster gave me an idea. I went hunting for CSS background gradient patterns and found a collection of them from CodePen. I grabbed one that felt vaguely waterlike, and modified it to give me the overall palette I was looking for. Once I reduced the contrast enough, it sat in the background nicely, and I can imagine that as a really interesting texture if this were done as a lithograph.

Final composition of masked and skewed text
The final result

I’m really happy with the result—not so much as a piece of artwork on its own, but once again as a demonstration of techniques that can be used on the web in interesting ways. I think it’s worth challenging ourselves to keep learning about and exploring great graphic design and finding ways to reinterpret it in the context of a multi-device web. Not everything will translate—or should—but if we take a little extra time and push past just getting it on screen, we’ll create a more compelling experiences that will really stand apart in a web of so much of the same.


Web Type News

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

  • [Event postponed until September] 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