Front-end developer Mandy Michael firmly believes there has never been a better time to create for the web. A development manager at an Australian media group by day, the self-proclaimed tinkerer and lover of CSS (and Batman) is best known for her CodePen demos — mind blowing experiments that push the boundaries of what’s possible on the front-end. At the heart of her practice is the wish to make the web a bit less rigid and more flexible and fluid.
“New technologies like CSS Grid, variable fonts, blend modes and masks have given us the opportunity to create in a way that’s more like print design,” Mandy explains. “We can learn a lot from print’s rich history and make the front-end more representative of the content.” Mandy points out that design can massively affect the way it feels for someone to read or browse through different types of information, yet we’ve only begun shifting towards web design that’s centered around content in the last few years. “Everything is still very static, square, and rectangular,” she says, “but recent developments mean that we can make some really amazing things now, which better represent what we want to express with our content and do so in a way that’s effective for users, thus reaching more people. There are so many opportunities for interactivity and creativity on the web. Making something change depending on user input, for example. It’s unique as a medium, and I don’t think that we utilize that uniqueness as much as we could.”
“I want people to see that you don’t have to build uninspired front-ends. You can utilize everything digital technology has to offer to design."
The future of web typography with variable fonts
Mandy started playing around with text effects and layering, which led her to experiment with variable fonts, an evolution of the OpenType font specification that allows web typography to adapt to the flexible nature of screens, environments, and devices. Mandy believes that variable fonts — in which single font files act like multiple fonts — give you the best of all worlds, so that you no longer have to make trade-offs for design, performance, accessibility, and usability when you work on the front-end. You have more control over the typography and can improve both actual and perceived performance at the same time.
“Variable fonts offer you so many possibilities,” Mandy exclaims. “[With regular font files,] if you wanted to change or modify things, you’d need to use an SVG or Canvas. But with variable fonts you can directly change the font based on different kinds of inputs. Also, rather than loading several different fonts into a site, which slows down performance, you get to load one. You save on load requests and page size but also have more flexibility because a variable font allows for interpolation of styles.”
Instead of having a set amount of weights — such as regular, bold, and italic — Mandy points out that having all of the variations in between opens up a lot of creative opportunities. You can now do smooth transitions between a bold and a regular font, for example, which means you can vary how content is represented and express things in different ways.
Mandy’s creative experiments on CodePen are all done in 15 minutes or less. Initially just an attempt to better manage her computer time, the self-imposed rule allows her to create a quick demo and share it publicly without having to worry about builds and project setups. Whenever an experiment needs more time, she simply doesn’t publish it.
Mandy uploads detailed explanations of how she’s created some of her variable font demos on variablefonts.dev. She created this resource in order to showcase the many possibilities and opportunities that variable fonts can offer developers and designers on the web, and provide them with the tools needed to use variable fonts in their own projects.
One CodePen demo in particular, a text effect that made it look like the grassy text was growing, which features a variable font called Decovar, became Mandy’s proudest achievement so far.
“I was working on a talk about text effects and wanted to include variable fonts to show how cool they are. It’s a really vivid memory for me,” Mandy recalls. “A few days before the event I decided to recreate a growing grass effect that I had seen on a Photoshop tutorial in CSS. I put it out on Twitter, and the reception was amazing.”
At the time — around two years ago — Mandy’s use of a variable font was completely new and took many people, including industry experts, by surprise. While everyone else was focusing on performance and typography, Mandy approached her playful demo from a refreshingly different angle. To her, variable fonts were just another opportunity to make cool text effects.
“I met a bunch of people who make variable fonts and are really involved in that community who said that nobody had ever expected to use variable fonts in that way. That was really exciting for me. It made me very proud that I made something so impactful just by playing around a little, and I hoped that it would inspire people to make fonts do more interesting and creative things.”
New technologies to improve both usability and creativity
After adding animations to her variable font demos, Mandy started looking into sensor and browser APIs, specifically speech recognition, ambient light, and device orientation.
“I particularly like speech recognition, which enables you to incorporate voice data into web apps,” she explains. “With the popularity of Google Home and Amazon Echo we’re moving towards voice interfaces. But when you convert speech to text, it loses the personality, intention, and tone that you get when you speak to someone. At the moment, it’s not easy to do because the speech recognition API doesn’t have time stamps, which means you can’t match it to Web Audio, so it’s a little bit tricky to get it to align. I think in the future we’ll be able to use variable fonts and other CSS techniques to help convey that meaning more effectively.”
These new APIs can make your website react and respond to a user’s device, environment, or input, and their use cases are both practical and creative. Audio and speech allow for more interactive and accessible experiences. The device orientation API, on the other hand, makes use of the device’s built-in accelerometer, and Mandy experimented with it to create text effects that change depending on how the user is holding their phone. Finally, the ambient light sensor in phones, laptops, and tablets opens up possibilities for more engaging and immersive storytelling, while also improving usability and accessibility.
“You can make text more readable with ambient light,” Mandy suggests. “A photodetector senses the amount of ambient light that’s present. In a low light environment, for example when you’re moving from out- to indoors, you can dim the screen brightness to reduce the strain on your eyes. I feel like we often design for this perfect scenario but people use mobile phones on the bus, in the rain, or in their bedroom with the lights off. Our sites and apps should respond to these environments. Sensors like ambient light — although it’s currently not widely supported — would allow us to do that. ”