Web Fonts &
Typography News

Issue #36 • 29 February, 2020

Well, not off to the regular start to the new year I’d hoped for, but here we are. I was hoping this was the week I could share with you all what I've been working on for the past few months, but looks like that will have to wait a few more days. In the meantime, I’m happy to get to share something I started sketching out a couple weeks ago. Between museum visits to the MoMA and Guggenheim in New York City, and paging through monographs of Vaughan Oliver’s and Jennifer Morla’s work, I’ve been really inspired to keep playing around with layering and masking effects.

That, combined with some user research feedback on the Georgia Digital Services platform I worked on last year got me thinking about how all of this can work while reacting to screen size to _keep_ content transitions in view, rather than hide them. I think we can do more with vertical play in our designs, and I hope this will inspire you to explore it too.



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

Today’s Tip

Figure/ground composition with text, image, and color

This week we’re going to dig in to more text effects. In keeping with the idea of exploring more editorial design without requiring lots of custom code, this issue’s experiment could certainly be set up in a content management system to allow for changing images and text content. 

A few issues back we explored some text overlay effects combined with images, and I’ve seen another really interesting experiment from Mandy Michael that got my attention. That, combined with a recent trip to the Museum of Modern Art in New York City, reminded me of an assignment from a design class in college. We were asked to create a composition with one line on a page. I tended to gravitate to a more elliptical shape, mostly off the page top-right. This created some relationships with the corners, and a tension where the line came closer to the bottom edge of the image like a weight suspended over the ground. I don’t think I got a very good grade, but 25 years later I still think about the challenge.

Image of a one-line composition experiment
One-line composition experiment

I wanted to see if there was a way to combine some of these ideas: text, image, shape, and their relationship to the visible canvas of the screen. To create a mask for text, with an interesting interplay between message and image, or even just color. Since we now have things like viewport units for height, we can play with how these elements use the screen size, and can maintain relationships with different edges of the screen. 

Web design has had a tendency to flow top-down, and this usually makes sense: you have no idea what the content will be over time, or upon what size device it will be viewed. So for a long time, much of our efforts have gone toward optimizing around that dynamic content/any device scenario. But our layout capabilities have evolved, as have the capabilities of our content management systems. So perhaps it’s time to revisit some of these limitations and see what we can do.

Photos of designs showing interplay between text and image and color
On the left, a spread from the Vaughan Oliver: Archive; on the right an ad designed by Jennifer Morla. Both show an interesting interplay between type, image, and color

The premise is to see if we could create a flexible design component based on an image or color and some text, combine that with a masking shape, and design it in such a way that it utilizes the whole screen in a way that engages the viewer and draws them in, no matter the size or shape of device. That interplay—between positive/negative, foreground/background, text/image—has long been part of our graphic design lexicon. You can see it in action in these images of Vaughan Oliver’s and Jennifer Morla’s work. 

Our challenge is to bring it into our web vocabulary in a practical, sustainable way. 

Image with text overlaid
Our first experiment, focused on image and text masking and interplay

The first example is mixing image, shape, and text. We’ve got a big background image that’s masked off with an oversized offset oval. We’ll place text over that image overlapping the bottom edge of that mask, and then position a copy of that text on top in a contrasting color, and apply the same clipping mask as on the image. Thanks to using viewport-related font-sizing and height management we can have a big bold element that (mostly) fills the screen regardless of device size or aspect ratio. By allowing the elements to move and scale we can be sure to have the effect we want without forcing every aspect of the relationship.

Image with offset-oval mask
Image with clip-path mask, before we add the text

We start with the image and mask. The image is placed as a background with ‘background-size: cover’ to be sure it always fills the visible area. The container controls the height, and the clip-path mask is an oversized oval, offset enough to create the somewhat asymmetrical effect we’re looking for. This gives us the slight visual tension and gets away from the usual boxiness of the web. Notice that we’ve set up a custom property to hold the mask shape, so we can apply the same thing to the text. This helps make the whole component more flexible: no matter what image or text, the layout will always match up.

<div class="masked-element">
  <div class="masked-element--background image"></div>
  <h1 class="masked-element--clipped-text" data-heading="Morning, mist, and magic">Morning, mist, and magic</h1>

And here’s the CSS for the wrapping element and masked image. Note we have to add the ‘-webkit’-prefixed version as well if we want it to work in the most browsers (more on that support can be found on

:root {
  --mask-shape: ellipse(200% 90% at -20% 0%);

.masked-element {
  height: 80vh;
  margin-bottom: 4rem;
  max-height: 95vh;
  position: relative;

.masked-element--background {
  -webkit-clip-path: var(--mask-shape);
  clip-path: var(--mask-shape);
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1;

.masked-element--background.image {
  background: url(path/to/image/mist_crop.jpg);
  background-size: cover;

Next we’ll add a text element, and position it on top of the image. We can use flexbox to make sure the text area fills the same space as the image. This way we can apply the same clip-path mask and they’ll always line up. Before we do, let’s look at how the text and image overlap.

Text over the masked image
Text overlaid on the masked image

First we finish setting up the styles for the overlaid text:

.masked-element--clipped-text {
  color: var(--text-color);
  line-height: 1.1;
  margin: 0;
  padding: 0 1rem 0 0;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  text-align: right;
  z-index: 2;
Mandy Micheal’s ‘Folded’ demo

Taking a tip from Mandy Michael’s ‘Folded’ demo, I’ve supplied the same text that’s visible in a ‘data-heading’ attribute on the main text element. If you were outputting this from a CMS that would be something you could set in the template file. I’ve played on Mandy’s example and added a ‘contenteditable=true’ attribute and some JS to allow you to edit the overlaid text in the demo.

<div class="masked-element">
  <h1 class="masked-element--clipped-text" data-heading="Morning, mist, and magic" contenteditable="true">Morning, mist, and magic</h1>

Finally we create the pseudo-element with matching text and position it right on top of the original text with a contrasting color. Note that since it’s a child of the main text, we can use ‘inherit’ on most of the attributes to make sure it stays true to the positioning of the main text element.

.masked-element--clipped-text:after {
  content: attr(data-heading);
  color: var(--text-overlay-color);
  -webkit-clip-path: var(--mask-shape);
  clip-path: var(--mask-shape);
  margin: inherit;
  padding: inherit;
  height: inherit;
  width: inherit;
  position: inherit;
  bottom: inherit;
  right: inherit;
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  text-align: inherit;
  z-index: 3;

By setting the overlaid text in white (or any other contrasting color), we can get the effect of the text being ‘knocked out’ of the image or color wherever it overlaps:

Image with text overlaid
The finished design: text knocked out of the image with a funky, asymmetrical curved mask

I’ve also included an example of just text and color. You’ll notice that I’m featuring another font from the Google Fonts catalog called Hepta Slab. It’s a really fun one, and has a weight range from 1-900, so you can really push the boundaries of scale with it. Check out the CodePen example to see how to use the variable version via the Google Fonts API.

Text overlaid on a color block
A dramatic bit of flair

And finally an example of using this technique as an ‘intentionally not quite full-screen graphic effect’ to give a strong title element that still shows the viewer there’s more to the story, no matter what size or shape the screen.

Image of large screen and small text overlap and mask effect
Large screen or small, it's possible to have that big, bold effect without losing sight of the continuing story


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

  • 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