There are layouts that are only possible with columns. Thinking about IEEE and ACM paper formats. !Example of a two-column paper for ACM publicationshttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/acm-paper-template !Example of a paper formatted for IEEE publicationhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/ieee-format-paper The biggest difference is that the paper formats are paginated so it's relatively easier to shift from one column to another and from page to page. Because the web is one continuous format, reading columns becomes much harder since we have to scroll to get to the bottom of one column and then scroll to the top to start the next one. If we have small blocks of...
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 content: small: to be read at a close distance medium: our default size to be read while sitting on your desk large: to be read farther away than medium or on larger screens For the sake of experimentation I've chosen the following sizes small: 12 points medium: 16 points large: 24 points The idea is that the farther away we are reading from the larger we...
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 variations in variable fonts, we can use tools like Wakamaifonduehttps://wakamaifondue.com to see what OpenType features are available since they vary based on the font and to download a stylesheet with all CSS necessary to use the features on your own project. We first set custom properties for each of the available OpenType layout features on the :root pseudo-element. We set them disabled by default so we can enable them for specific elements and...
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 /...
