Philip Levy

February 20, 2023

Tinkering with web typography

So, I’m still in progress on my digital decluttering exercise. And I realize Cal Newport implores us to “use skills to produce valuable things in the physical world” while exploring high-quality leisure during this time.

But I couldn’t help permitting myself a small diversion to make progress on a digital project I had started toward the end of last year. In my defense, the bulk of the work has already been done and most of what I’ve spent my time on lately is writing about it (though I probably should have lingered longer with pen and paper before moving to keyboard and laptop).

Either way, I would argue that stringing words together qualifies as craft and provides opportunity to “leave good evidence of yourself.” Just execute the Print command. 🖨

Excuses made, I’ve realized that writing about this project and documenting it will take much more time and effort than I originally estimated. So although I’m not ready to release it yet, I’ll share the introduction of a draft post, both as evidence of the time I’ve spent on my writing craft so far and motivation to finish and publish the well-documented and eloquently expounded project.

(Tbh, I wasn’t entirely disappointed that band practice was canceled today so I could spend time on this. 🤫)

My draft introduction…

In Flexible Typesetting by Tim Brown, he outlines a simple, straightforward process for achieving great typography on the web. His description of the four core elements of typesetting — typeface, size, measure, and line height — and how to approach them in a particular sequence gave me a better appreciation for how to set browser-based type. Good web typography doesn’t happen by accident — or with default settings. It takes care and attention to detail. Unfortunately, most of what we come across on a daily basis does not constitute good web typography.

In my experience, there are a few challenges to typesetting on the web, outside the much-discussed issues of browser discrepancies and device diversity:

  • Content-creator knowledge. Many people who are responsible for writing, editing, and entering content for websites simply don’t have a good baseline knowledge of typesetting, particularly for the web.
  • Separation of code and content. Typesetting involves the interplay of meaning and presentation. In a typical content management system, there is a divide between developers who write the code and authors who write the content. This usually results in a lack of control over the necessary settings.
  • Allure of frameworks. Design system frameworks, like Bootstrap and Foundation, make admirable efforts to provide general purpose defaults that work in a variety situations. But they still require the knowledge and interplay described above, so it’s often easier to settle for what you get out of the box.

On this last point, Brown warns that “being efficient is great, but you should understand the decisions a typographic system makes on your behalf.” What you get by default with most frameworks is never quite satisfying. I understand why, but even with the risks outlined above, I couldn’t help but think there might be a better way to achieve good typography without requiring much knowledge or control.

Using Brown’s words as a guide, I set out to create a simple, lightweight stylesheet that lays the “foundation for flexible typography that looks good and performs well in many contexts” while being transparent about the decisions being made on your behalf.


About Philip Levy