Responsive Web Typography

Colophon

This site was conceived typography-first, very much inspired by Roslindale—a new typeface designed by David Jonathan Ross (@djrrb) and discovered via his amazing Font-of-the-Month Club. David has been a fantastic collaborator ever since the launch of variable fonts, and I’m thrilled to be using his variable version here, with the ‘standard’ version being pulled in for browsers that don't yet support their variable counterparts. 

Variable Fonts

Congratulations!

You're viewing this site with a browser that supports the new Variable Font format! That means that you'll see a wider range of typographic styles—in weight, width, and optical size—than if you were viewing it in an older browser. You can learn more about variable fonts by reading this article I wrote about them, and exploring things on the site with that tag for a topic.

Oops!

It looks like you're viewing this site with a browser that doesn’t support the new Variable Font format! That means that you won’t see quite the same range of typographic styles—in weight, width, and optical size—than if you were viewing it in a browser that does. You can learn more about variable fonts by reading this article I wrote about them, and exploring things on the site with that tag for a topic. Here’s a list of browsers that do:

I’ve used variable fonts as the primary assets during design, but have used CSS feature queries to only load them for browsers that support the new format. Other browsers get served more ‘standard’ versions of the web fonts, but they don’t get the same benefits of flexible scaling and typesetting. I wrote a lot more about variable fonts, what they are, and how they work in the blog (which in turn links to a version of the page set in variable fonts that you can play with on CodePen). The whole system makes heavy use of CSS custom properties (aka variables) and calculations in order to make a typographic system that scales font size, width, line height, optical size, and a few other tidbits smoothly across virtually any device. And it loads less data while allowing me to be even more expressive in the design. Pretty neat stuff.

PatternLab and Emulsify

I used the Emulsify project from Four Kitchens to build the design in a Drupal theme. I’ve worked quite a bit with PatternLab, and this has definitely been one of the smoother experiences. Can’t thank the Four Kitchens crew enough for this great work, and of course none of it would exist without PatternLab.

Drupal 8

I’ve been using Drupal for over 10 years, and am more convinced than ever that D8 is the best version yet. It gives me the ease of content modeling and creation paired with a more flexible theming system than anything that came before. It’s been a natural fit for this project and with design systems in general.

There’s still work to be done optimizing markup, images, and some other performance aspects. But it’s already pretty quick, and will only get better as it evolves.