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.

A quick tip from Miggi on using grids to generate type scale and place graphics.

Roughly 20% of the population has dyslexia. The Letter Checker by Stark helps you pick fonts that are more likely to work for those people.

The official Grammarly plugin: ​“Create impactful, mistake-free content faster with your trusted AI writing partner available directly in Figma. Grammarly helps teams meet their goals while staying on-brand and in compliance.”

Daniel Destefanis from Figma made a plugin that shows how text layers within a selection are styled (or unstyled). This plugin complements the existing native Figma feature Selection colors and is a great way to see what layers aren’t using styles or select layers by font. Read more in Daniel’s Twitter thread.

Whoa, finally! Can’t believe this is getting fixed a few days before Config. Add bold, italic, underline, or strikethrough font style to a portion of text with an applied style without detaching it first.

Christine Vallaure made a responsive and modular type scale using a scaling ratio approach.