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.

Me and my Rapha club pals in front of the Brandenburg Gate

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.



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

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.

Die Bühne cover by Oskar Schlemmer
Cover from ‘Die Brühme im Bauhaus’

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.

A simple start with standard horizontal header and caption
No surprises here. A typical layout of header, text, and photo with a caption

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. 

Heading vertically down the left-hand margin

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:

.vertical h1 {
  float: left;
  text-align: right;
  min-height: 50vh;
  max-height: 85vh;
  /* turn the writing on its side */
  writing-mode: vertical-rl;
  /* flip it around to the left */
  transform: rotate(180deg);
  /* we've rotated 180 degrees, so left is right :) */
  padding-left: 1rem;

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.

@media screen and (min-width: 35rem) {
  .vertical h1 {
    min-height: 50vh;
    max-height: 85vh;
@media screen and (min-width: 45rem) {
  .vertical h1 {
    max-height: 55vh;

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.

@media screen and (min-width: 35rem) {
  .vertical h1 {
    /* the negative margin-bottom removes the space blocking 
    out the surrounding content */
    margin: 0 0 -100% 0;
    /* transform the point of origin for the rotation to 
    position the heading outside the text block */
    transform-origin: center left;


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.

Here's our finished effort. A nice departure from the route to publishing sameness

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.

Figure with grid overlay and caption overlapping image
Figure with grid overlay and caption shifted to the right

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.


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
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 © 2019 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