Web Fonts &
Typography News

Issue #42 • 20 April, 2020

Hello there! So how’s your sourdough starter going? (Based on my twitter and Instagram feeds, this seems pertinent) We’re still doing a lot of Zoom yoga, going for walks, and I’ve still been getting out for a lot of nice rides. While frustrating, our current ‘stay at home’ reality is certainly better than even more widespread sickness. We’re definitely still firmly on Team #StayHome.

This week marks the beginning of a series in the newsletter that I hope you’ll like. Over the next few issues we’ll be typesetting a book! We’ll incorporate lots of what we’ve been covering over the past year in a single project—and then build on that with some experiments I’ve been including in my talks over the past year but have not yet written about or published in project form. This is something rattling around in the back of my brain for quite some time now, and I’m really excited to make it a reality. I hope you’ll enjoy it too.

Online workshops: interested?

I’ve been asking this for the past couple weeks and got a bunch more emails this past week. Given the interest so far, I’ve been thinking more about offering online workshops in using variable fonts, working with the Google Fonts API to get them, and other bits and bobs about dynamic typography like what I write about here. If you’d be interested in participating in one, I’ve created a handy form you can fill out. Pricing will be based on the length of the workshop, but figure likely not more than $100, with a discount for students or other extenuating circumstances. Basically as long as the platform cost is covered I want to make this as accessible as possible.



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

Today’s Tip

Landing the whale: making a book on the web, part 1

I don’t know when it was I started using the text of Moby Dick in my workshops and talks. Likely it dates back to some of my earliest explorations of web typography. Since it’s out of copyright, it’s one those texts you can find online in various forms, and somehow that became one of my standbys. Then at some point my friend Bil let me borrow his 1930’s Rockwell Kent edition and it really captivated me. The typesetting is straightforward, but combined with such wonderful illustrations it just sat there in the back of my brain, waiting, nudging.

Illustration of a whale breaching the surface of the waves
One of Rockwell Kent’s many captivating illustrations

Every year, Bil participates in the Annual Moby-Dick Marathon, a live reading of the book held every year at the New Bedford Whaling Museum. After this year’s event we talked about how hard it was to find a good eBook version, which of course led to the idea of A Project. Since I had started working on some experiments in what a book could be like on the web with modern web typography and layout techniques last year, it seemed this might be the perfect fit when the right time came along.

Last week, it seems that time had arrived. In fact it was prompted another friend via his own newsletter. Robin Rendle wrote in his latest Adventures in Typography about how the best way to get better at designing book covers (or typesetting the text of that book on the web) was to do it. And he provided a CodePen link to a fair chunk of Moby Dick upon which to practice. It wasn’t the whole text, but that was easily findable via Project Gutenberg. Now we just have to define what will make for a good book experience on the web.

Chapter one of Moby Dick with minimal typesetting in a web page
Starting with no web fonts and some generally light typography

To start, we’ll set a simple baseline: break the text into separate pages for each chapter, provide a simple navigation structure to tie them together, and add some minimal text formatting. I did add one or two refinements to style the first letter and first line of each chapter, and enough layout formatting to keep the basics of paragraph structure and the content a bit more balanced on screen. The source code and the entire text are now freely available online. But to create an experience that even comes close to that Rockwell Kent beauty, we need to do a lot more. 

Over the next few newsletters, we’ll apply more and more of what we’ve covered here in previous issues, and take it even further. 

  • Make the typography responsive to screen size
  • Add web fonts (both static and variable)
  • Update the responsive typography to a more dynamic solution
  • Add a web font loader and style fallback fonts for a better loading experience
  • Add typographic controls for the user to set preferences for light/dark mode (coupled with OS setting detection), font size, and spacing
  • Add bookmarking to save or share your place in the text
  • Add support for offline reading
  • Experiment with a more book-like experience, especially on touch-based devices

By the time we’re done, we’ll have a pretty complete typographic and layout design that could be adapted or tweaked to work with almost any text. Beyond just making a website out of a book, the intent is to really examine what makes a great reading experience, and make it even better on the web than we can in print or any other current digital format. 

And maybe I’ll finally land my whale.


To get started, I’ve created a site using the Eleventy static site generator. I’ve endeavored to keep that setup as simple as possible, but some amount of build-process complexity was necessary to balance ease of development and quality of output. The entire source is available on Github and the compiled site is automatically deployed to Netlify. At any point you can always download the source from Github and look in the ‘_site’ folder to find the complete, compiled site. This way you don’t have to set up the build process if you are not so inclined. If you are, I’m including some basic documentation on getting the project up and running in the file.

I’ll create a ‘release tag’ with each issue, so you’ll always be able to look at the code corresponding to that issue, but the latest version will always be what’s deployed on Netlify, and viewable at


Web Type News

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 You should check it out!
Copyright © 2020 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