Make sure you get the web fonts! You can always view this email in your browser.

Web Fonts &
Typography News

Issue #22 • 30 July, 2019

Hi there! It’s been a couple weeks since I sent out the last newsletter, and my apologies for not keeping up! I took a bit over a week off after CSS Camp in Barcelona for some much-needed vacation, and the jetlag got the best of me last week trying to catch up. But now back to business!

We’re doing something a little different this week, and while I’m throwing a lot into this demo, I hope that I explain the pieces well enough that you can get some good ideas and examples even if you don’t want to dissect the whole thing. I’ll be digging in to some of the specifics in greater detail in the coming weeks, so we’ll be able to revisit some of the more complex ideas in isolation. But I think there’s value in seeing how they all fit together, so that’s where we'll start.

I’m also really excited to be giving a talk to the team at Diedas Digital this week. Harry Keller is a friend I’ve known for a few years now from Berlin, and the agency he started with a few friends a couple years ago has really taken off. We talked a bit when I was there in May, and this week I’ll be talking to their whole team about variable fonts, dynamic typography, font loading performance, and a whole bunch more.

Seats are still available for my workshops in Tokyo, Toronto, and Berlin this fall—so follow the links if one of those fits your schdule. Of course, if you’d like to find out about a talk or workshop for your own team, hit reply and let’s talk!

Cheers,

Jason

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

Today’s Tip

A bit of fun with FF Meta

This week I decided to do something a little different. I’ve had these variable fonts from Monotype for a few weeks now and wanted to do some experiments with them to show them off a bit. So I’ve created something on CodePen.

FF Meta has long been a favorite typeface, and I really enjoyed making the first demo for Monotype when it was first introduced. At that time it only had a weight axis and italics. Now with the full release there’s a width axis too—so that comes into play as well based on viewport width. (Huge thank-you again to the team at Monotype for letting me do this! Learn more about Monotype’s variable font efforts here)

A tidbit of the origian demo I created for the initial single-axis release last year

The text is from the FF Meta Wikipedia page. It’s not terribly exciting, but it gives us enough to play with. I’ve combined a bunch of techniques that have been covered in previous issues, and have thrown in a bunch of new bits from some current projects and talks. I can’t cover all of them in detail, but I’ll do my best to call them out and will be coming back to them in future issues.

You’ll find in the top left corner a link to ‘Toggle the Editorial Layout’—which when clicked will disable (or enable) some of the layout enhancements like the floated-and-wrapped title. The idea here is to show that you can take a fairly standard web page and by adding a few lines of CSS (possibly through a text area in the content template in your CMS), you can transform individual posts and make them visually much more interesting—without compromising the overall design system.

I’ll go through some of the more interesting tidbits.

Typographic system

I haven’t gone into detail about this in the newsletter, but over the past year or two I’ve been working on this notion of a dynamically scaling typographic system. Rather than scaling font size, line height, and other elements of the typography at specific breakpoints, I took some cues from Tim Brown’s article on CSS Locks, along with Mike Riethmuller’s CSS implementation for font size, and went from there. This is going to be the subject of a much more in-depth article at some point, but if you want to get more of an overview, check out the video, slides, and whatnot from my talk at CSS Conf EU in Berlin back in May. It’s proven to be a very robust approach, and powers the typography on my own site as well as that of the new web platform I helped design for the State of Georgia (20+ sites launched and counting).

Showcasing the typographic scale from small screen to large

Typeset title

I mentioned this in issue #16 about ‘Intentional tension’, and wanted to show that again. By adding just a little bit of CSS we can dramatically change the layout and feel of the design. The interplay between the title and text wrapping around it creates a much greater level of tension and visual interest.

Note the shape-outsice bounding box around the title. Thanks to the coordinates being set in ‘ems’, it scales nicely with the heading itself across viewports. Nifty shape editor courtesy of Firefox developer tools :)

Scaling margins

Using some of the calculation ideas from the typographic system, I used the browser’s ability to mix units of measure in math to create a scaling making of 1/3 and 2/3s of the leftover space on either side of the content. This kicks the main text area off to the left just a bit rather than leaving it centered. This works by using a combination of viewport units and the ‘rem’ units for the content width. We might not be able to do that very well, but browsers can and it makes the layout just a bit less like everything else.

p {
    margin-left: 0;
}
  @media screen and (min-width: 45em) {
    p {
      margin-left: calc( (100vw - 40rem) / 6 );
      max-width: 40rem;
    }
  }
  @media screen and (min-width: 55em) {
    p {
      margin-left: calc( (100vw - 42rem) / 3 );
      max-width: 42rem; 
    }
  }
  @media (min-width: 65em) {
    p {
      margin-left: calc( (100vw - 44rem) / 3 );
      max-width: 44rem; 
    }
  }

The code above takes into consideration the maximum width of the paragraph (which changes on larger screens since the type scales up as well), and lets the browser calculate the leftover space after subtracting the known maximum width of the paragraph from the overall width of the viewport.

Font stats

To give you a sense of the range, I’ve created a bit of an info-graphic-style arrangement of some of the details. At minimum, the variable font files (I’m using separate files for Roman and Italics) replace 27 separate files (9 weights, 3 widths) each—but we also get everything in-between. These two files total just over 300kb, but they replace about 1.3MB of font data. If we optimized and subset them a bit more they’d be even smaller. A version I tested quickly that was subset down to just Latin1 Extended with a few less OpenType features was well under 100kb.

Resources

Example on CodePen
Original FF Meta demo with single-axis varaible font
My CSS Conf EU talk slides, video, and resources on Noti.st
Firefox web browser (get it for the dev tools, stay for the awesomeness

Web Type News

Henry Desroches published a wonderful Swiss poster recreation on CodePen. In fact, there's a whole collection
Juan Fuentes created a fantastic animation of Compressa in all it's variable glory
Type Directors Club has released all the videos from their Type Drives Culture event last spring, where I got to moderate a panel of brilliant designers and educators
The Fresh Fonts newsletter just launched a membership feature, and it looks totally worth it. Check it out!

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

Winding up in the Windy City for An Event Apart Chicago on August 26-28
New! Teaching a full-day workshop and giving a talk on variable fonts at ATypI Tokyo on September 4-7
Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14

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