Quickly Alter Typography with Firefox Font Editor

Fonts and typography are at the heart of design on the web. We now have powerful tools to inspect, understand, and design our typography in the browser. For instance, have you ever landed on a web page and wondered what fonts are being used? Then, have you asked yourself where those fonts come from or why a particular font isn’t loading?

The font editor in Firefox provides answers and insights. You gain the ability to make font changes directly, with a live preview. As for me, I use the editor for understanding variable fonts, how they work, and the options they expose.

Get started with a quick overview by Jen Simmons:

I’ve been using Firefox font tools since they were first released. And yet, I wasn’t aware of all the things the editor can do. Start using the built-in unit-conversion feature, which quickly exposes relative units like em, rem, as well as percents along with computed px values. Interested in more detail? Check out the follow-up video:

Enjoy styling type on the web!

About Miriam Suzanne

Miriam is a co-founder at OddBird, with 15 years experience as a project manager, user-experience designer, and front-end developer. She’s a member of the Sass core team, staff writer for CSS Tricks, and creator of popular open-source tools like Susy, True, and Herman. Miriam is also a musician with Teacup Gorilla, a published novelist & playwright, and a featured speaker at conferences around the world.

More articles by Miriam Suzanne…