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!
Tags: variable
22
Monday, June 11th, 2018
Friday, June 8th, 2018
How to start with variable fonts on the web – Oliver Schöndorfer
A nice intro to variable fonts.
Tuesday, May 29th, 2018
Dark theme in a day – Marcin Wichary – Medium
On Ev’s blog, Marcin goes into great detail on theming an interface using CSS custom properties, SVG, HSL, and a smattering of CSS filters.
I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images.
Saturday, May 19th, 2018
Super-powered layouts with CSS Variables + CSS Grid by Michelle Barker on CodePen
This article is about using custom properties and CSS grid together, but I think my favourite part is this description of how custom properties differ from the kind of variables you get from a preprocessor:
If you’re familiar with Javascript, I like to think of the difference between preprocessor variables and CSS Variables as similar to the difference between
constandlet- they both serve different purposes.
Thursday, May 3rd, 2018
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.
Tuesday, May 1st, 2018
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.
Monday, April 30th, 2018
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!).
Wednesday, April 25th, 2018
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.
Friday, April 6th, 2018
Understandable excitement
An Event Apart Seattle just wrapped. It was a three-day special edition and it was really rather good. Lots of the speakers (myself included) were unveiling brand new talks, so there was a real frisson of excitement.
It was interesting to see repeating, overlapping themes. From a purely technical perspective, three technologies that were front and centre were:
- CSS grid,
- variable fonts, and
- service workers.
From listening to other attendees, the overwhelming message received was “These technologies are here—they’ve arrived.” Now, depending on your mindset, that understanding can be expressed as “Oh shit! These technologies are here!” or “Yay! Finally! These technologies are here!”
My reaction is very firmly the latter. That in itself is an interesting data-point, because (as discussed in my talk) my reaction towards new technological advances isn’t always one of excitement—quite often it’s one of apprehension, even fear.
I’ve been trying to self-analyse to figure out which kinds of technologies trigger which kind of reaction. I don’t have any firm answers yet, but it’s interesting to note that the three technologies mentioned above (CSS grid, variable fonts, and service workers) are all additions to the core languages of the web—the materials we use to build the web. Frameworks, libraries, build tools, and other such technologies are more like tools than materials. I tend to get less excited about advances in those areas. Sometimes advances in those areas not only fail to trigger excitement, they make me feel overwhelmed and worried about falling behind.
Since figuring out this split between materials and tools, it has helped me come to terms with my gut emotional reaction to the latest technological advances on the web. I think it’s okay that I don’t get excited about everything. And given the choice, I think maybe it’s healthier to be more excited about advances in the materials—HTML, CSS, and JavaScript APIs—than advances in tooling …although, it is, of course, perfectly possible to get equally excited about both (that’s just not something I seem to be able to do).
Another split I’ve noticed is between technologies that directly benefit users, and technologies that directly benefit developers. I think there was a bit of a meta-thread running through the talks at An Event Apart about CSS grid, variable fonts, and service workers: all of those advances allow us developers to accomplish more with less. They’re good for performance, in other words. I get much more nervous about CSS frameworks and JavaScript libraries that allow us to accomplish more, but require the user to download the framework or library first. It feels different when something is baked into browsers—support for CSS features, or JavaScript APIs. Then it feels like much more of a win-win situation for users and developers. If anything, the onus is on developers to take the time and do the work and get to grips with these browser-native technologies. I’m okay with that.
Anyway, all of this helps me understand my feelings at the end of An Event Apart Seattle. I’m fired up and eager to make something with CSS grid, variable fonts, and—of course—service workers.
Friday, March 30th, 2018
Ampersand: Interview with Mandy Michael – Clear(left) Thinking – Medium
I’m soooo excited that Mandy is speaking at Ampersand here in Brighton in June!
Be there or be square.
Wednesday, March 28th, 2018
Variable Fonts
A simple resource for finding and trying variable fonts.
Friday, January 26th, 2018
How to use variable fonts in the real world | Clagnut
The gorgeous website for this year’s Ampersand conference might well be one of the first commercial uses of variable fonts in the wild. Here, Richard documents all the clever things Mark did to ensure good fallbacks for browsers that don’t yet support variable fonts.
Thursday, December 7th, 2017
Silly hover effects and the future of web typography – Pixelambacht
These experiments with transitioning variable font styles on hover might be silly, but I can see the potential for some beautiful interaction design.
Friday, September 22nd, 2017
mbeaudru/modern-js-cheatsheet: Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
A handy guide to navigating all the new-fangled JavaScript.
Tuesday, August 29th, 2017
User Interfaces for Variable Fonts · An A List Apart Article
A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?
Thursday, June 22nd, 2017
Using CSS variables correctly - Mike Riethmuller
Mike examines the real power of CSS custom properties compared to Sass variables—they can change at runtime.
I’m convinced that in almost all cases, responsive design logic should now be contained in variables. There is a strong argument too, that when changing any value, whether in a media query or an element scope, it belongs in a variable. If it changes, it is by definition a variable and this logic should be separated from design.
Tuesday, February 21st, 2017
Get started with variable fonts – Medium
Rich has posted a sneak peek of one part of his book on Ev’s blog.
Friday, February 10th, 2017
Decovar: A multistyle decorative variable font by David Berlow
Here’s one of them new-fangled variable fonts that’re all the rage. And this one’s designed by David Berlow. And it’s free!
Tuesday, October 11th, 2016
Pragmatic, Practical, and Progressive Theming with Custom Properties by Harry Roberts
Harry demonstrates a really good use for CSS custom properties—allowing users to theme an interface.