It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
I hope you read that title out loud in your best Seinfeld impression.
A recent question in our forums made me aware that there are more properties that can be added to @font-face than the usual font-family and src suspects. What are the point of those? Why would you want to declare other font declarations there?… Read article “What’s the deal with declaring font properties on @font-face?”
Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:
…instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.
Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will … Read article “Critical Web Fonts”
Typekit has updated the WebFont Loader project with support for the new CSS font loading API:
… Read article “TypeKit Starts Using Native Font Loading API”Before the introduction of the native API, we detected font loading by inserting test elements in the page. These elements were regularly polled for width to see if the font had loaded. This process is very expensive because it triggers a page wide style reflow each time the elements are checked. Using the native API, we can bypass this process completely, which results
Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps, but other tools such as kerning or contextual alternates can often have a big impact on the overall reading experience:
… Read article “Caring about OpenType features”More than fancy swashes and superfluous ligatures, OpenType features are font superpowers. The best, most capable typefaces are full of sophisticated reasoning and delightful surprises
A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in place. This idea is slightly at-odds with the responsive web that we know and love, where text is fluid and wrappable and whatnot. Yet, the design possibilities of lockups are very appealing. I think we can hang onto what makes them awesome while still holding onto what makes the web awesome.… Read article “Creating a Web Type Lockup”
Nick Sherman gave a fascinating talk at Ampersand earlier this month which was based on an article he wrote called Variable Fonts for Responsive Design. In both the talk and the essay he suggests that we need a new font format to solve complex responsive design problems:
… Read article “A New Responsive Font Format for the Web”…the glyph shapes in modern fonts are restricted to a single, static configuration. Any variation in weight, width, stroke contrast, etc.—no matter how subtle—requires separate font files. This concept may not seem
Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have been downloaded. Many designers and developers argued that the default font loading method called the “Flash of Unstyled Text”, or FOUT, was an annoyance to users. This is when the fallback web font, say Georgia, is shown on screen first then replaced by a custom font when it loaded. They argued that it … Read article “Loading Web Fonts with the Web Font Loader”
Joe Richardson shared this little trick over on CodePen:
body {
/* operating system font */
font: caption;
}
- If you’re on Ubuntu this will be the Ubuntu Font.
- If you’re on Yosemite this will be Helvetica.
- If you’re on El Capitan this will be San Francisco.
- If you’re on Microsoft this will be Segoe UI.
Not entirely sure the support of this, but if it works for your needs it’s a lot easier than declaring them directly or … Read article “font: caption;”
Chris Manning takes us through the weird journey that is custom fonts on the web. We started with the “Flash of Unstyled Text”, which at first we didn’t like because it was abrupt and felt janky and could even cause reflow, which didn’t help readers focus. Browsers reacted, and started hiding text until the custom font was ready (various implementations did it differently). “Flash of Invisible Text” as it were. Times have changed such that FOUT is now preferable again, … Read article “The @font-face dilemma”
A post by Craig Hockenberry that details how to use the San Francisco system font for your website if you’re running El Capitan.
I especially like Craig’s suggestion for a new syntax when using any operating system’s font, so for example in iOS that would probably be San Francisco or Helvetica Neue whilst in Android it would be Roboto. He suggests that we declare a system keyword in the font-family rule (although this won’t work in any browsers today):
body