Web Fonts &
Typography News

Issue #1 • 27 March, 2020

I hope this is finding you all healthy and safe. Can’t deny it's been hard to concentrate lately, but I found myself getting lost in creating this week’s experiment. I thought that was a good sign it’ll be a fun one to share.

One interesting observation I’ve heard this week is about how all of us being forced to work remotely has dramatically increased the usage of web fonts (and web tools in general). While not particularly earth-shattering as a revelation, it certainly highlights the importance of implementing them well. In fact, web performance as a whole has been a real problem. I hope we’re all taking a lot of notes about what has worked well and poorly, and are making sure these lessons are baked into our project plans going forward.

In other news, yesterday marked the launch of Georgia.gov, the last of nearly 80 sites to be implemented in a new platform I had the honor of helping design in partnership with Digital Services Georgia and Lullabot. The performance, accessibility, and usefulness of their entire ecosystem is really fantastic. Now millions of visitors every month are experiencing dynamic typography and variable fonts, making the information easy to access and read across thousands of different devices. There’s a whole lot more to the platform, and you can read a bit more about it on their blog.

Until next week, stay distanced, and stay healthy!

Cheers,

Jason

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

Today’s Tip

Skewed, rotated, and styled

Once again this week there were a few different threads coming together to inspire this issue. I’m continuing to explore amazing examples of graphic design in the form of publication covers and posters, and focusing on how we can achieve these kinds of effects and techniques on the web in meaningful, scalable, sustainable ways. Those threads include a new variable font from HVD Fonts, a great post on skewed text, a beautiful book from Slanted on KH Drescher’s Berlin typographic posters, and a tutorial from Sara Soueidan on creating textures with SVG filter effects.

I got my copy of Slanted’s compendium of Drescher’s posters last week, and it is stuffed with wonderful examples of typographic design. One or two really stood out, so I decided to use them as the main inspiration. Both are for Berliner Ensemble, but quite different. The umlaut in ‘Heiner Müller’ reminded me of Christoph Koberlin's tweets about some of the alternate character designs he’d worked on for Fabrikat Normal from HVD Fonts. In the other, ‘Manifest’ is set diagonally with other text along the same diagonal axis. This reminded me of Nils Binder’s post on diagonal layouts that he publish about a month ago.

Some departure, some recreation

I deliberately have not gone down the path of an exact recreation, but rather combined ideas from a couple in order to showcase different techniques. Christoph was kind enough to share a variable version of Fabrikat Normal that includes weight, slant, and italic axes along with some nice alternate glyphs.

:root {
  --angle: -16deg;
}

h1 {
  /* set the 'slnt' axis */
  font-style: oblique 8deg;
  /* trigger the OpenType stylistic set for the alternate Ü design */
  font-feature-settings: 'ss03';
  font-weight: 850;
  letter-spacing: -0.09em;
  opacity: 0.85;
  transform: skewY(var(--angle));
}

ul {
  /* rotate the list to match the headings */
  transform: rotate(var(--angle));
}

li {
  /* switch to single-story 'a' */
  font-feature-settings: 'ss01';
  /* set the text perpendicular to the skewed angle */
  writing-mode: vertical-lr;
}

Tapping in to a really interesting umlaut alternate, the slant axis, and a skew technique gives us a more dynamic headline that could spice up any landing page or blog post. The angle is set with a CSS custom property so we can use the same value when skewing the headlines and rotating the list of acts. The names of those acts are then set using a vertical writing mode so the display at a perfect perpendicular to the rotated text. Setting the list items using grid kept them evenly spaced across the layout.

Crop of headlines and acts from the play

Combining text skew, slant angle, and vertical writing modes to create a more dynamic, cohesive layout in the top half of the poster

The bottom half is a bit closer to a recreation, but even that included some fun elements to style like the logos for Tip and Berliner Ensemble, and the color background shape for the footer. Setting borders slightly differently, setting the letters in ‘Tip’, using letter-spacing to match up the lines in Berliner Ensemble, and creating the shape of the background combined a few tried-and-tested techniques without sacrificing text accessibility.

Because the original was a letterpress print on what looked like a somewhat mottled and textured paper, I thought it would be good to add something similar. Harkening back to some talks I saw from Sara Soueidan on SVG filters, I hunted down a tutorial she wrote for Codrops. Using a noise filter I was able to create the paper texture entirely in SVG (which is inline in the HTML), keeping it tiny and fully scalable. I’ve been waiting for a chance to try out some of her techniques and am tickled that it worked out so well here.

A bit of letter-spacing and red ink overprinting

The final touch was to reduce the opacity of the main header, solid horizontal rule, and red background color in the footer to allow just a little bit of the texture to come through. Not enough to impact legibility, but just enough to reference the look of the original letterpress design. Overall I’m really pleased with the outcome. You can see it and experiment yourself over on CodePen.

The completed redesign

The whole layout is also responsive as well, though I’ll admit I didn’t spend too much time on the smaller views. But it does show how these techniques can still make your designs much more dynamic and engaging, no matter the screen size.

Resources

Web Type News

Rasmus Lund Mathisen sent me a nice note about YourTypeFace.com (my apologies to the rest of your day)
Not necessarily new, but new to me: John D. Jameson’s excellent collection of type specimen pages
Sprat is a new open-source variable font from Collletttivo (h/t to Jeremiah Shoaf’s Typewolf Tuesday newsletter for that)

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 FontOfTheMonth.club. You should check it out!

Web Fonts & Typography News