We have many ways of reading content and they will all be different. So how to best optimize font size for reading long-form content online? For this exercise we'll define three sizes for the...
OpenType fonts, both static and variable, make additional features available for developers to use. CSS makes these features available via the font-feature-settings property. Just like with font...
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be loaded from a single file and a single @font-face declaration. The single...
In a previous post, we looked at what font should we choose. Another side of the question is where to get the fonts from. This post will discuss font availability and how to incorporate the fonts into...
I'm not a type designer and I consider myself adequate as a user of fonts on the web, but I've been around for the full progression of fonts on the web. We will not review the full history of web...
The first area to consider is how we use the space on the page. Because we have different screen sizes and resolutions, we have to be mindful of how we organize the space. Content width # One of the...
It's been a while since I've researched and written about long-form content for the web. New technologies and APIs make it easier to create contet that is a far cry from Bibliotype. Bibliotype is a...
Note: Credit for a lot of information and ideas on this post goes to Miriam Zuzanne's A Complete Guide to CSS Cascade Layers publlished in CSS Tricks. CSS layers present an interesting design...
I had justification and hyphenation together because they have a similar impact on how we read online. Hyphenation is the use of a hyphen (‐) to break up a word when it reaches the edge of a document...
There are times when you want to reset the CSS of an element as if it hadn't happened. I'm finding this problem when working with WordPress block themes: There are so many css custom properties that...