Designer Advocate Ana Boyer takes us on a deep dive into typography and gradient variables, sharing best practices for leveraging these new features in your design system.

Jacob Miller, a Product Manager for Design Systems at Figma, gives an overview of everything launched at Framework — Code Connect for developers, typography and gradient variables, and the new Library Analytics API. All of the above is designed to drive design system adoption across the teams because ​“building a design system is only half the battle — the real challenge is getting it adopted by both designers and developers.” If you missed the event, that’s one summary you need.

A starter kit from Luis Ouriach shows how to set things up with typographic variables.

The String and Number type variables can now be bound to typography fields and saved as a style. Included fields are font family, font weight (numeric or named alias) and style, font size, line height (no percentages support yet), letter spacing, paragraph spacing and indent. Use Modes to create responsive typography scales for different screen sizes.

Figma is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. ​“We’ll share more about new capabilities to make design systems more powerful and easier to adopt, as well as features to connect your system closer to code. Our product sessions will dive deep into strategies for structuring and maintaining your system.”

Considering it’s only a couple of months until Config 2024, it’s pretty clear they will put a bow on some of the features announced last year. Typographic variables, anyone?

An important update to the plugin I featured just a couple of weeks ago — now you can curve your text along any path you draw!

A new plugin by Lichin Lin to bend your text into a circle, square, or even arch shape.

Tom Biskup shares practical tips on improving typography in your project — learning from others with a Chrome plugin, setting your type in Figma, keeping it simple by limiting choices, thinking in systems and setting a type scale, using ChatGPT for filler copy instead of ​“lorem ipsum”, and picking fonts from great foundries.

A comprehensive font management plugin with previews, controls for variable fonts, recommended pairings, filtering by style, collections, and more. Very well done.

Baseline grids are hard to implement and their value is debatable, but I still irrationally love them. This article outlines a smart approach to using Figma’s vertical trim and Auto Layout to create reusable blocks for a baseline grid.

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.