Rise of the Digital Fonts
A history of typesetting from movable type to variable fonts.
Link tags: fonts
170
FontGoggles — Interactive Previewing and Comparing
A really nice open-source font-previewing tool for the Mac.
A Variable Fonts Primer
Everything you ever wanted to know about variable fonts, gathered together into one excellent website.
Variable fonts’ past, present and future, according to Dalton Maag
In this interview, Biance Berning says:
Cassie Evans from Clearleft is an interesting person to follow as she combines web animation with variable font technology, essentially exploring the technology’s practicality and expression.
Hells yeah!
We’re only just scratching the surface of what variable fonts can do within more interactive and immersive spaces. I think we’ll see a lot more progress and experimentation with that as time goes on.
Move Fast & Don’t Break Things | Filament Group, Inc.
This is the transcript of a brilliant presentation by Scott—read the whole thing! It starts with a much-needed history lesson that gets to where we are now with the dismal state of performance on the web, and then gives a whole truckload of handy tips and tricks for improving performance when it comes to styles, scripts, images, fonts, and just about everything on the front end.
Essential!
Recursive | Recursive
Play around with this variable font available soon from Google Fonts in monospaced and sans-serif versions.
5 Keys to Accessible Web Typography | Better Web Type
Some excellent explanations for these five pieces of sensible typography advice:
- Set your base font size in relative units
- Check the colour of your type and only then its contrast
- Use highly legible fonts
- Shape your paragraphs well
- Correctly use the heading levels
Variable Fonts for Developers
A showcase of fun experiments with variable fonts, courtesy of Mandy.
VOCAL
Each typeface highlights a piece of history from a specific underrepresented race, ethnicity, or gender—from the Women’s Suffrage Movement in Argentina to the Civil Rights Movement in America.
Progressive Font Enrichment: reinventing web font performance | Responsive Web Typography
Jason describes the next big thing in web typography: streaming fonts!
…to enable the ability for only the required part of the font be downloaded on any given page, and for subsequent requests for that font to dynamically ‘patch’ the original download with additional sets of glyphs as required on successive page views—even if they occur on separate sites.
Public Sans
A free and open source neutral sans-serif typeface, released as part of version two of the design system for the US federal government.
Intro to Font Metrics
Font metrics help the computer determine things like the default spacing between lines, how high or low sub and super scripts should go, and how to align two differently sized pieces of text next to each other.
Programming Fonts - Test Drive
Monospaced fonts you can use in your text editor. Most of them are …not good. But then there are gems like Mark Simonson’s Anonymous Pro, David Jonathan Ross’s Input, and Erik Spiekerman’s Fira Mono. And there’s always good ol’ Droid Sans.
Bodoni*
An open source version of Bodoni:
Bodoni* is the first ever no-compromises Bodoni family, built for the digital age. Years in the making, this font family includes a whopping 56 font files, ensuring you will have the perfect Bodoni for every situation.
Jongert
Nick demonstrates the responsive power of variable fonts by recreating a lovely design from Jacob Jongert.
Grab that browser window and get squishin’!
Private by Default
Feedbin has removed third-party iframes and JavaScript (oEmbed provides a nice alternative), as well as stripping out Google Analytics, and even web fonts that aren’t self-hosted. This is excellent!
The Font Loading Checklist—zachleat.com
This checklist came in very handy during a performance-related workshop I was running today (I may have said the sentence “Always ask yourself What Would Zach Do?”).
- Start Important Font Downloads Earlier (Start a Web Font load)
- Prioritize Readable Text (Behavior while a Web Font is loading)
- Make Fonts Smaller (Reduce Web Font load time)
- Reduce Movement during Page Load (Behavior after a Web Font has loaded)
The first two are really straightforward to implement (with rel="preload" and font-display). The second two take more work (with subsetting and the font loading API).
The Complete CSS Demo for OpenType Features - OpenType Features in CSS
Every single font-feature-settings value demonstrated in one single page.
Monotype restored the font Walbaum, a 200-year-old serif typeface — Quartzy
The history and restoratin of a neglected typeface, complete with this great explanation of optical sizing:
Nix illustrated the point with an analogy: “Imagine if we all decided that 10-year-old boys would be the optimal human form,” he says. “Rather than having babies, we just shrunk 10-year-old boys to baby size, and enlarge them to the size of a full grown man. That’s kind of what we’re combatting.”
Transform your type online with variable fonts | Creative Bloq
This is a great interview with Rich on all things related to web typography—including, of course, variable fonts.
I’m so lucky that I literally get to work side by side with Rich; I get to geek out with him about font stuff all the time.