Vercel developed a new typeface specifically designed for developers and designers. ​“We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities.” Heavily inspired by Inter, it looks great and definitely going to be very popular!

Christine Vallaure with timeless advice of using percentages instead of pixels for specifying line height in Figma. There are very few cases when pixels make sense, and more often than not they cause inconvenience.

“Good typography is good design. This collection of plugins for Figma will help you to improve the typography in your design.” Font Fascia and Fonts Changer are two of my favorites on this list!

Lauren Budorick explains how the new text truncation works: ​“Now, whenever we can, we figure out at line layout time whether the next line will fit. If it won’t, we’ll override our line breaking engine to say that, if this is the last line before truncation, every glyph pair is breakable.” She also points to where the new ​“Max lines” truncation feature can be found.

Oh my, this one was long in the making! Font previews were first announced at Config 2020, but now they’re finally live along with other improvements to the font picker. See this feature tour from KC Oh.

A pack from Double Glitch with a collection of pre-made text effects that you can apply to your designs with just a few clicks. Reminds me of the good ol’ days of downloadable Photoshop actions. While the pack is commercial, I suggest checking out a free demo in the Community and watching a screencast.

My guess is we’ll see hanging punctuation in the wild more often now. (Good luck, developers.)

The timing of this release is impeccable — just a couple of months ago WebKit added support for leading-trim CSS property to Safari Technology Preview (although other browsers are not rushing). For a deeper dive into why it’s important, see Leading-Trim: The Future of Digital Typesetting by Ethan Wang from Microsoft.

Dan Hollick with a fascinating thread on an optimal x‑height size and a visual arc.

Along with its basic built-in spellchecker, Figma introduced a new API opening the door to more advanced tools. SpellCheck is a commercial plugin offering a bunch of features, like checking an entire project, building a personal dictionary, detecting ​”Lorem Ipsum”, auto-correcting typos, and supporting multiple languages.

Trim text elements by nesting them within frames to remove space above capital letters and below the baseline. This removes the bounding box and makes text behave as every other element in your layout. See also this thread by Roman Shamin on how font metrics leading to equal space above and below the text can make digital design and development easier.

Miguel with a few useful shortcuts for adjusting font size, weight, letter spacing, and line height.

Text alignment shortcuts (⌘-⌥-L for left, ⌘-⌥-T for center, ⌘-⌥-R for right) also work when you apply them inside the text box.

Free Google Font pairing and color palette suggestions.

Rasmus Andersson shows how to make a simple font in Figma.

“Check out our nine Google Fonts pairings and start using them in your design projects. The pairings are hand-picked from Google Fonts catalog and open-sourced for everyone to use.”

“Tune in to hear Clara, Amanda, and Qi walk through how to get started and unlock more font styles. From optical sizing to slant, learn how variable fonts give you more design control and expression.”

An interview with Thierry Blancpain, co-founder of Grilli Type, one of the font foundries that were a part of Figma’s variable fonts beta.

Another great shortcut from Miggie to avoid going into the advanced type settings menu — click on the ​“Fixed size” icon while holding Option (Alt) to enable truncated text. (With so much free space to the right, I wonder what’s the justification for hiding this option in the menu.)

Figma built a fantastic interactive page showing great possibilities provided by variable fonts and how to use them in Figma. It’s been a year since Toni Gemayel built the Variable Fonts plugin, and I’m happy it finally became a native feature.