Hi, I’m Gloria. I’ve been using Pixso for a while now, mostly for UI and web projects. Lately, I’ve been exploring variable fonts — something I’d read about but never really tried until recently.
Turns out, they’ve quietly changed how I approach typography in my designs.
What are variable fonts?
You might already know this, but just in case — variable fonts are a single font file that can behave like many. Instead of loading separate files for light, regular, bold, or condensed, you get one file with adjustable settings.
In design tools, you can tweak things like weight or width with sliders. It feels a bit like editing a parameter in code, but visually.
Common axes are weight, width, slant, italic, and optical size. Some fonts even have custom ones, like changing the serif shape or shadow density. It’s pretty wild what’s possible now.
I noticed them in Pixso when using the Noto Sans SC font in my design. It showed up in the font menu when I clicked the three dots，and that’s when I started playing around.
Why I'm Using Them?
I didn’t expect to care this much, but here’s what changed for me:
Smoother text hierarchy
Before, I’d jump between fixed weights — regular for body, bold for headings. It worked, but sometimes felt abrupt. With variable fonts, I can fine tune the weight so it flows better across screen sizes. On mobile, I might use a slightly lighter bold; on desktop, go heavier.Faster iteration
I don’t have to swap fonts or import new weights. Just slide until it looks right. It’s small, but it saves time when I’m tweaking layouts.Less clutter in the file
When handing off to dev, one font file instead of five is a relief. Smaller bundle, fewer loading states to worry about.More personality
It’s subtle, but being able to adjust width or slant just a little gives text more character. I used a narrow, medium-weight style for a navigation bar recently — felt more intentional than just “bold.”
How I use them in practice?
I’ve been using Pixso for this, since it’s my main tool right now. Here I will show you how to get started quickly just with already design resource.
Log in and open a web layout I copied from the Pixso resource library. They have a lot of free templates, which helped me skip the blank canvas stress.
Selected a text box and switched the font to “Noto Sans Arabic” (it’s marked as variable).
Clicked the little settings icon next to the font controls, then chose “Variable” Sliders for weight and width appeared.
Dragged until the text felt right. That’s it.
It’s not magic, but it’s nice to have that level of control without extra steps.
A few things I’ve noticed
They’re not perfect. Not all fonts support it, and some don’t have obvious visual changes across axes. Also, if you’re used to fixed styles, it takes a moment to adjust your thinking.
But for responsive work, especially in web design, they’re becoming a quiet must-have.
I’m not saying every project needs them. But if you’re tweaking font weights anyway, why not have more options in one file?
Curious — have any of you been using variable fonts in your day-to-day work? How’s it going? Any favorite fonts or tools that support them well?
Would love to hear your thoughts.
Top comments (0)