Web Fonts &
Typography News

Issue #17 • 8 June, 2019

It’s hard to reconcile in my brain that a week ago I was in Berlin for CSS Conf EU, but such are the wonders of air travel and conference trekking. The conference was spectacular, and videos are starting to go up on the conference YouTube channel. Keep tabs: the talks were well worth watching.

As some of you might know, I’ve also been trying out cycling while traveling this year. I’m an ex-bicycle racer and avid road cyclist, so I joined the Rapha cycling club, as they have clubhouses that rent bikes out in major cities all over the world. This year so far I’ve ridden in Melbourne Australia, San Francisco (here in the US), and last week in Berlin. It’s a fantastic way to see new places and meet new people—and Berlin was a real highlight. I’ll definitely keep up with this whenever I travel to a Rapha club city.

I seem to have missed the mark in attempting to publish earlier in the week, but I now have a few weeks in a row at home—so maybe next week I'll get it out a little earlier. I think it’s time to start digging into font loading management and performance, so we’ll see how that goes.

Today’s Tip

Typographic friction: testing the vertical limits

Jumping off from last week’s theme of intentionally challenging the reader with different kinds of typographic layout ideas, I thought it might be interesting to look at one of Jen Simmons’ topics of late: writing modes. Changing the direction of text in layout has been a practice in print graphic design for decades, and is in particularly fine display in many examples of Bauhaus design. While perhaps not the easiest to read in large quantities, there’s no reason not to think about it for larger display type or things like image captions or photo credits.

For a deep dive into writing modes I recommend a couple of presentations from Jen Simmons and Chen Hui Jing: they both do a fantastic job of explaining their intricacies with far greater authority than I can. But I’ve included a couple of examples this week that might serve to get you started. Rather than simply rotate the text using ‘writing-mode: vertical-rl’ (read more about this on MDN), I’ve added a few more layers to show how it might get used in production.

Here’s a look at where we’re starting.

By default, changing the writing mode of a text element rotates the element 90 degrees clockwise (tilt your head to the right to read it), but does nothing else beyond that from a layout perspective. It’s still a block element, so the net effect is that it pushes all the content down.

There’s also another consideration: if we’re typesetting the main heading, we likely want that to be read first. So we’ll probably float the element to the left. But then the element would be on the left and to read it we’d have to tilt our heads to the right. That feels awkward (and perhaps against more common practice in Western graphic design). So we add a transform and rotate it 180 degrees. That, coupled with a float to the left gives us our heading down the left, with text wrapping around it. Not bad. 

We’ll need to add some padding between the heading and text, but we’ll have to remember that we rotated the text, so when we want to add padding visually on the right, we have to assign it on the left. Getting better.

Here’s what we have so far:

One thing that came to mind was not wanting to have to scroll to read the headline. Viewport units to the rescue here: set a max-height of 85vh and it will simply wrap more as needed, making sure you can read the headline without scrolling. Pretty nifty stuff.

But we’re still creating a somewhat awkward cut into the text area, and the gaps where the boundaries of the float are can sometimes be pretty large depending upon how the text is wrapping. So maybe we want to hang the heading outside the text area. Since we already are using a transform to rotate the text, we can add in a ‘transform-origin’ to change the point around which the rotation occurs, letting us rotate it right out of the main text area. This leaves a space in the layout though, as while we’ve transformed the text, it’s placement in the layout is preserved. So when the layout is wide enough to add this little trick, we want to pair it with one more modification: set a negative margin on the bottom of that element of -100%. This will close up the space where the text was laid out, no matter how many lines it wraps.

By layering in these techniques in stages as the screen gets wider, we’re able to still have semantically sensible content that’s easily readable on a phone, and then gets progressively more interesting as screen space allows.

I added a bit of flair to the figure and caption as well, so it didn’t feel left out. That did uncover what I suspect is an implementation bug—but that will require a bit more investigation. Thankfully folks like Rachel Andrew are really helpful in pointing me in the right direction to create a specific enough test case so browser vendors can investigate. In the meantime, I’ve left a couple of options in place. In the images below I’ve turned on the grid overlay in my Firefox Dev Tools to show the issue.

The issue arises in wanting to change the writing mode of the caption to place it on the right of the image. But in using CSS Grid to change the layout, there arises a computational conundrum in figuring out a ‘min-content’ row height that also impacts column width to keep the caption wrapping at the height of the image, but as it wraps, then that changes the horizontal space available for the image, thereby reducing the height… triggering another cycle of recalculation. So I might have uncovered a nasty rabbit hole that could be impossible to solve. Or I just need someone smarter than me to look at it a bit more. We’ll see 🙂 In the meantime, you can play around with this on CodePen and see what you can do with it.

I really like the idea I started utilizing on my site last week: rather than trying to engineer all these things in a universal manner, I’ve taken to writing a bit of CSS for specific posts. This lets me play a little bit and decide which ideas are worth codifying into a system. I hope you’ll give it a try too, and help us all move along to a more interesting and typographically sophisticated web.

Resources

• Check out the example on CodePen
• Jen Simmons on writing modes (24 Ways)
• More Jen Simmons on writing modes from CSS Day
• Chen Hui Jing on modern layouts at CSS Conf EU last week
• Writing modes on MDN

Web Type News

• The big news from Apple this week is about being able to install fonts on iOS (and the new iPadOS). WWDC video on the whole process, link courtesy of Nick Sherman
• The ‘other‘ type news from Apple is the introduction of a completely revamped New York, which will become another core system typeface. It's available for download in a bunch of weights and optical sizes, but sadly the licensing prohibits doing much with it beyond mockups at this point.

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

• Heading to Barcelona on July 17th for CSS Camp to chat about dynamic typography and variable fonts
• Winding up in the Windy City for An Event Apart Chicago on August 26-28
• Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14