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. ”
In one of her demos, Mandy uses the Ambient Light API to display the sun or the moon depending on how much light is in the room (currently only works behind a flag in Google Chrome and only in debug mode).
From Backstreet Boys fansites to speaking around the world
Mandy first started developing for the web when she was a teenager, building GeoCities fansites for the Backstreet Boys who she was obsessed with. Eventually, she went on to study multimedia and information systems. Even then, she told her friends at university that she’d never be a web developer. It seemed to her like the worst job in the world. She thought of coding as really restrictive, because you had to find ways to get around the limitations and make things work in all the different browsers.
“To get custom fonts, you had to use font replacement techniques like Cufón or sIFR or just use standard web fonts,” Mandy sighs. “These days we have different difficulties, but back then the front-end development was more painful than it is now.”
After graduating, Mandy became a digital project manager for seven years. The digital team of the advertising agency she worked at was small, so she helped out with the front-end development, and slowly became more and more interested in that part of the job. After a few years she decided to focus on it full-time. It’s the biggest regret of her career, however, that she didn’t challenge her boss who made her choose between design and front-end development.
“I’ve always loved art and design,” Mandy explains. “Front-end and design are tightly coupled in my opinion. You have to have a design eye to do really creative and fun things on the front-end. There is something very delightful and enjoyable about designing with code that, for me, other mediums can’t provide.”
Mandy’s passion for front-end development led her to organize the Perth Front-End Developer Meetup (called Fenders) and share her experiments not only on Twitter and CodePen but at conferences around the world. A big fan of the supportive and collaborative nature of the web, she’s grateful for having met so many other passionate people. In addition, her public speaking experiences also helped her improve her communication skills.
“It really helps you to put your opinions forward better and communicate more effectively in the workplace,” Mandy points out. “Being able to express yourself in a clear and confident way is very beneficial, and if you can stand on a stage and talk about something in front of 500 people, then you’re probably going to be able to do it in a room of ten, right?”
As a development manager, Mandy wants to help people be the best developers they can be. She likes to encourage team members to figure out things that they are good at and not so good at, so that they can push themselves and improve. She strives to nudge them in the right direction, yet without doing everything for them – because making mistakes and failing is an important part of moving forward.
“I think everyone can be a developer because the web is full of resources, and you can learn from the people you work with,” Mandy explains. “So I really just want to help people be the best version of themselves. The way I describe it is that everyone I work with is a Sherlock Holmes, and I’m like a Watson, because Sherlock Holmes is amazing but he needs Watson to help him get there and work everything out. That’s how I want to be.”
In this talk, delivered at JSConf Hawaii in February 2020, Mandy explores how variable fonts offer new and exciting creative opportunities for storytelling, design, and expression in ways standard fonts could never provide us.
Building front-ends with an unprecedented level of control
Mandy is currently working on building examples for a new talk on how to combine variable fonts, sensors, CSS Shapes and Grid with a bit of JavaScript to create more interesting websites.
“I spent all this time making text effects, and I would like to expand that to full-page designs,” she says. “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 [anything from] simple [to] really complicated front-ends.” Before elaborating further on the design possibilities she envisions, Mandy mentions the importance of page performance. “We get excited about technology, and sometimes forget that there are other things we’ve got to pay attention to. Once we’ve taken care of that, I’d love to see more inspired designs.”
Mandy encourages front-end developers not to be restricted by what we can already do. We’re still just at the beginning of what’s possible on the web, but new developments in CSS mean we can move on from static, predetermined interactions and enable the user — as well as their devices and environment — to shape the experience.
We now have the tools to present content in more creative, meaningful, and purposeful ways, while ensuring it’s more accessible and usable, and performant at the same time. Variable fonts in particular have given us a level of control to improve and fine-tune the readability, legibility, and accessibility of web typography that’s unprecedented. While a good performance strategy is still important, new front-end technologies can free our creativity from technical constraints and considerations.
There truly has never been a better, and more fun, time to create for the web.
