Variable fonts were a game changer for fonts on the web, but you can take it a step further with the addition of the color font spec. Control both the font and the colours of the font truly enabling Photoshop like text effects with real text on the web.

How to use a color font

You'll notice a lot of the examples I show are text effects and with the holiday season around the corner I've got a few holiday themed effects to share that make the most of variable fonts. This one might be a little more versatile all year round but with cookie decorating a seasonal staple it seemed appropriate to take a look at.

Creating layered text effects is easily accomplished with variable fonts without any of the performance drawbacks of loading multiple font files.

Cookie Effect layering with Variable Fonts

Wondering how variable fonts perform in comparison to regular fonts. Let's do a dive into the pros, cons and possible future

Performance benefits of Variable Fonts

The flexibility of variable fonts enable developers to create more responsive designs and components that would have previously required  sacrifices. With variable fonts that contain a width axis

There are a number of ways you can have text resize to fit its parent container, but it's been largely limited to adjusting the font size. The problem with this approach is that making the font smaller is not always the best option for our designs.

Resize text to fit

Google introduces variable fonts to their apis!

Fira Code Google API Demo

Variable fonts are perfect for scrolling effects in storytelling and interactive webpages as they enable animation without losing the practicality, accessibility and ease of real fonts

Scrolling Bloop 'Cheee' Demo

A spooky, themed, slimey oozy text effect featuring the Chee font by OhNo Type Co. Sometimes to get the effects you want you need to be a little creative! Fonts and design together can create a wonderful and whimsical experience.

Oozing Dark Mode Text with Chee

Reactive fonts with the Ambient Light Sensor

My first and most famous variable font text effect demo, the one I am most proud of, this demo was the inspiration for  everything I have done with variable fonts.

Growing text demo featuring Decovar

A invaluable resource for web developers, Google fonts provides wonderful fonts for free, so here are some of my favourite sans-serif variable fonts to try in your websites and applications.

Sans Serif Google Variable Fonts

An up and comer in the land of variable fonts is the color font variable font! You'll be amazed and what these fonts give you out of the box.

Color Font List

Mixed width variable fonts are fonts which have characters of different widths. They make great fonts for fun designs and interesting interactions.

Mixed width variable fonts

Variable font with a very large weight range can provide more flexibility in designs and experiments. Having a large weight range can give you the capabilities of representing text that is very bold as well as very thin without the need for multiple fonts and maintain the cohesion you get from using the same typeface.

Fonts that have a large weight range offer a lot of opportunities for creating impactful typography, animations and improved legibility.

Fonts with a large weight range

Weird variable fonts are perfect for creating text effects and interesting typography, useful for creating an impact or just for some fun this list are some of the most versatile (and my favourites).

Weird variable fonts

What drew me to variable fonts to start with was the weird and wonderful nature of the designs, these are my favourites

Posts tagged 'article'

Tag: article

1st Dec 2023How to use a color font

14th Nov 2023Cookie Effect layering with Variable Fonts

9th Mar 2020Performance benefits of Variable Fonts

6th Mar 2020Resize text to fit

20th Sep 2019Fira Code Google API Demo

17th Sep 2019Scrolling Bloop 'Cheee' Demo

10th Sep 2019Oozing Dark Mode Text with Chee

11th Jun 2019Reactive fonts with the Ambient Light Sensor

11th Jun 2019Growing text demo featuring Decovar