Jongert
Nick demonstrates the responsive power of variable fonts by recreating a lovely design from Jacob Jongert.
Grab that browser window and get squishin’!
Tags: fonts
156
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.
Font Playground — Play with variable fonts!
A fun way to play around with the options in variable fonts.
Fonty: the new way for testing web fonts
This is very neat! Test out how Google Fonts will look on your website: type in your URL and away you go. Works well on mobile too.
Ampersand 2018 | Rob Weychert
Rob attended the excellent Ampersand event last Friday and he’s made notes for each and every talk.
Pixels vs. Ems: Users DO Change Font Size – Evan Minto – Medium
I have to admit, I didn’t realise that text reszing behaved differently for user preferences compared to page zoom. For that reason alone, I’m going to avoid setting font sizes in pixels.
If 2 to 3% (or more!) of your users are relying on a custom font size, you should know that so you can either support that user preference or make a conscious decision to not support it. Doing anything less is frankly irresponsible, especially considering that users with larger font sizes may be using those sizes to compensate for visual disabilities.
Your Brain on Front-End Development | CSS-Tricks
I find this soooo relatable:
I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.
Difference is, Chris comes up with some very, very clever techniques.
Text Effects - a Collection by Mandy Michael on CodePen
Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!
Fontjoy - Generate font pairings in one click
This looks like fun: it’s like a clever slot machine for pairing typefaces.
I thought the “machine learning” angle sounded like marketing bullshit, but it’s genuinely fascinating.
How to start with variable fonts on the web – Oliver Schöndorfer
A nice intro to variable fonts.
The Next Big Thing in Type
Over the course of a semester, students at UMPRUM Academy in Prague made variable fonts. I think Krabat might be my favourite.
Wakamai Fondue
A drag-and-drop tool for examining variable fonts (kind of like FontDrop but with more sliders to play with).
I didn’t get the name until I said it out loud.
What’s new in Microsoft Edge in the Windows 10 April 2018 Update - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog
Service workers, push notifications, and variable fonts are now shipping in Edge.
Upcoming changes to the CSS you need for variable fonts | Clagnut
Rich enumerates some changes in how you set up variable fonts. So if you’re pulling in a font that has weight as an axis, you can now add this to your @font-face rule:
font-weight: 1 999;
I’m already very excited about variable fonts—I’m going to be positively giddy by the time Ampersand rolls around (which, by the way, you should totally go to—it’s going to be sooo good!).
Variable Fonts | DSType Foundry
Here’s an interesting twist on variable fonts: one of variable axes is serificity …serificousness …serifness. The serifs. The serifs, is what I’m trying to say.
One small point: it seems a bit of a shame that there are separate files for regular and italic—it would’ve been nice to have a variable axis for italicity …italicousness …ah, screw it.