Link tags: variable

Times New Arial

Ever wanted to set some text in 70% Times New Roman and 30% Arial? Me neither. But now, thanks to variable fonts, you can!

Dark mode and variable fonts | CSS-Tricks

This is such a clever use of variable fonts!

We can use a lighter font weight to make the text easier to read whenever dark mode is active.

Rise of the Digital Fonts

A history of typesetting from movable type to variable fonts.

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.

Recursive | Recursive

Play around with this variable font available soon from Google Fonts in monospaced and sans-serif versions.

Variable Fonts for Developers

A showcase of fun experiments with variable fonts, courtesy of Mandy.

German Naming Convention

Don’t write fopen when you can write openFile. Write throwValidationError and not throwVE. Call that name function and not fct. That’s German naming convention. Do this and your readers will appreciate it.

Making Future Interfaces: Custom Properties - YouTube

Heydon cracks me up—his Patterns Day is going to have you crying with laughter; guaranteed!

Here he is talking about custom properties in CSS as part of his Making Future Interfaces video series.

Stepping away from Sass

I think Cathy might’ve buried the lede:

The knock on effect of this was removing media queries. As I moved towards some of the more modern features of CSS the need to target specific screen sizes with unique code was removed.

But on the topic of Sass, layout is now taken care of with CSS grid, variables are taken care of with CSS custom properties, and mixins for typography are taken care of with calc().

Personally, I’ve always found the most useful feature of Sass to simply be that you can have lots of separate Sass files that get combined into one CSS file—very handy for component libraries.

Difference between currentColor & Custom Properties | Mike Riethmuller

I had to read through this twice, but I think I get it now (I’m not the sharpest knife in the drawer). Very useful if you’re doing theming in CSS.

Jongert

Nick demonstrates the responsive power of variable fonts by recreating a lovely design from Jacob Jongert.

Grab that browser window and get squishin’!

A Tale of Two Buttons

In defence of the cascade (especially now that we’ve got CSS custom properties).

I think embracing CSS’s cascade can be a great way to encourage consistency and simplicity in UIs. Rather than every new component being a free for all, it trains both designers and developers to think in terms of aligning with and re-using what they already have.

Remember, every time you set a property in CSS you are in fact overriding something (even if it’s just the default user agent styles). In other words, CSS code is mostly expressing exceptions to a default design.

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.

Ampersand 2018 | Rob Weychert

Rob attended the excellent Ampersand event last Friday and he’s made notes for each and every talk.

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!

How to start with variable fonts on the web – Oliver Schöndorfer

A nice intro to variable fonts.

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.

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 const and let - they both serve different purposes.