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 file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. The advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few static font files that you would have loaded separately. You may...
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 your CSS stylesheets. Variable fonts will not be covered here. They are a large topic and will get their own post later in the series. Generic font families Generic font families are designed as fallback fonts for web font stacks. The idea is that they will map to an existing font on the user's computer so there will be a font to render...
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 fonts in this post. If interested you can read the history on Brief History of Webfontshttps://www.typotheque.com/articles/briefhistoryofwebfonts Font selection The first decision we need to make is what font we want to use. It is a deceptively simple question since it is not just a matter of picking up a font that looks nice. I follow this list, taken from Google...
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 biggest issues with working with long-form content is how many characters wider should we go? According to the The Elements of Typographic Style Applied to the Webhttp://webtypography.net/ the optimal measure length of a line is between 45 and 75 characters. We will have problems if the line is too long or too short. According to the Baymard Institutehttps://baymard.com/blog/line-length-readability: > If a line...
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 Bibliotypehttps://craigmod.com/bibliotype/. Bibliotype is a project from Craig Mod aimed at creating long-form reading experiences for iPads at the time the project was developed there were no Android tablets. But now we have technologies that make the whole concept of a Bibliotype-like page easier to implement. There are also web technologies that were not available ten years ago to make it even more interesting to explore and implement now. This...
Credit for a lot of information and ideas on this post goes to Miriam Zuzanne's A Complete Guide to CSS Cascade Layershttps://css-tricks.com/css-cascade-layers/ publlished in CSS Tricks. CSS layers present an interesting design paradigm. They allow developers to group styles based on the criteria we define. For the example, we'll define four layers. css @layer base layout utilities theme; The order we declare our layers is important, it will dictate how they cascade. In our example, the rules from the theme layer will have precedence over the rules in the layout layer. Using the layers we defined earlier, the cascade precedence...
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 or container. At its most basic, hyphenation consists of two steps: 1. Set the language in the HTML element 2. Enable hyphenation in your CSS To set the language use the HTML lang attribute with the appropriate ISO Language Taghttps://www.w3.org/International/articles/language-tags/ html To enable hyphenation use the following code: css .container { -ms-hyphens: auto; / Old Edge / -webkit-hyphens: auto; / Safari /...
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 may affect a given element that it's hard to know which ones to override and whether using the Full Site Editor, or theme.json is the best way to do it. I came across Resetting Inherited CSS with “Revert”https://cloudfour.com/thinks/resetting-inherited-css-with-revert/ and a particular way to reset styles without having a full reset stylesheet like normalize.csshttps://necolas.github.io/normalize.css/ or Eric Meyer's Reset CSShttps://meyerweb.com/eric/tools/css/reset/ According to MDNhttps://developer.mozilla.org/en-US/docs/Web/CSS/revert: > The revert...
The @supportshttps://developer.mozilla.org/en-US/docs/Web/CSS/@supports at-rule allows us to test if something is supported in CSS. The version of @supports that we see most often is testing for a rule inside a selector. css @supports display: grid { / Styles for when grid is supported / } We also have three logical operators: and, or and not that enable more complex queries. We can use and to test for more than one property. For example, we can test for grid and subgrid support. css @supports display: grid and display: subgrid { / code goes here / } The or operator comes in handy...
When working with CSS technologies, we may be in situations where not all browsers support a given property and we need to code around this partial support for the feature we're testing. To me, this is particularly important when creating examples to publish as part of a blog post or as standalone examples in Codepen. The idea is as follows: 1. Add a message to the example HTML and style it appropriately 2. Check if the browser supports the feature 1. If it does, hide the message 2. If the feature is not supported then make sure the message is...
