A rare feature that’s both underrated and long-awaited.

Monotype published a new kind of trends report for 2025: ​“Ancient oracles peered into the future. From a specific point in time, they forecast what could come. That’s what we want this report to be: a typographic oracle. We want to mark this moment in time, to celebrate design and typography’s progress, and to challenge all of us to envision what lies ahead by looking at the larger cultural forces shaping our time and work.”

“Figma now transforms common character combinations into smart symbols in all fonts. Now when you type the following characters – ©, ®, ™, ->, <-, vv, ^^, \[ \] – Figma will automatically transform them into smart symbols: ©️, ®️, ™️, →, ← , ↓, ↑, ▢. This will occur with every font, as long as you have the ​“Use smart quotes/​symbols” preference on. Also available in FigJam and Slides.”

A creative workaround to turn text underline into color highlight with no hacks.

Yep! Type foundry explains why text in a dark UI often looks better when it’s slightly lightened. That’s one of the reasons why choosing variable fonts for new projects became one of my non-negotiables.

Choose a color, style (solid, dotted, or wavy), thickness, and offset of your underlines.

Easily create flexible, modular typography scales. Peppercorn generates a sample scale with a documentation sheet, text styles based on variables, and even generates code in a few standard formats.

This in-depth explanation of the font-size property continues the topic of web typography. Even if you don’t care about CSS, the text tools in Figma are based on web typography, so it’s good to understand how they work: ​“For accessibility purposes font-size is only a vague measure; readability and contrast cannot be derived purely from it. It requires something more along the lines of a ratio between font-size (as in height) and font-width — and font-weight on top. And then there are also the visual qualities of the font design that come into play; some typefaces are squiggly but decorative handwritten ones and some are minimalist functional sans-serifs.” 

Christine Vallaure explains the new CSS property clamp() that I wasn’t familiar with: ​“Think of clamp() as a way to establish a ​“Goldilocks zone” for any value in CSS. Imagine a property that’s not too small, not too big, but just right — that’s what clamp() is all about. It allows you to set a minimum, an ideal value, and a maximum, making your design more adaptable and responsive.” 

While this article focuses on typography, clamp() also can be used for controlling padding, margins, or even widths. Depending on the viewport size, it can adjust in either direction, expanding from the minimum value to the maximum or shrinking as needed. 

So much goodness in this update! 1) Figma now detects when a new font was installed locally and automatically adds it to the font picker, no refresh is required. 2) The missing fonts modal now groups font families for faster searching and lets you replace the font of a single text node, entire page, or all pages. 3) Set the color, shape (solid, dotted, or wavy), and thickness of text underlines. Plus, choose the underline offset from text and whether it skips ink. 4) Mix and match paragraph spacing or indentation in the same node.

Easily switch between multiple fonts in your designs with a free plugin.

Syntaxer adds syntax highlighting to your code samples in Figma. It preserves your preferences and supports 175 languages and 28 themes.

Speaking of new typefaces, I’ve been enjoying a highly versatile Innovator Grotesk lately. Unlike some of the traditional typefaces from the print era, this one is made with UI design in mind — its well-balanced vertical metrics make it a breeze to center text vertically inside elements or next to icons. It works well as a drop-in replacement for Inter or San Francisco, and I like a slightly wider width and less ubiquitous look. Highly recommend checking out its beautiful specimens and a simple license.

In the first article in the series on Figma’s brand evolution, editor Jenny Xie takes us behind the scenes of the new custom typeface, Figma Sans, designed by Swiss and American type foundry Grilli Type. Don’t miss the Figma Sans page on the foundry’s website.

Figma just added 450 new Google Fonts to the app. Select ​“Google Fonts (8÷24 update)” from the font picker dropdown to access them.

Brilliant tip from Molly Hellmuth — create a special text style for labels where line height aligns to your grid. No matter what variable is used for padding, the height of your UI elements will be a multiple of the base grid. (This is also a nice way to keep your labels aligned with icons.)

My friend Helena Zhang designed a new monospaced pixel font and licensed it under the SIL Open Font License. It’s beautiful and nostalgic, bringing back so many memories from the early days of the web. The website is a lovely mix of retro vibes and a modern feel.

Miggi explains how to control the behavior of text fields with visual and keyboard shortcuts without touching the auto width/​height or fixed size controls in the Design panel.

Luis on the power of efficient aliasing when building typographic styles from primitives.

Day 3: Add template text styles in the Design mode instead of jumping between modes.