Introduction
You've spent hours perfecting your Figma design, meticulously aligning every element. But when developers hand off the design, something feels off--the text doesn't quite sit right in your buttons. The spacing looks different. What went wrong? The answer often lies in how browsers handle text spacing versus how designers intend it to look. Enter Vertical Trim, Figma's powerful feature that bridges this gap by giving you control over the vertical space around your typography.
Vertical Trim transforms how designers approach typography spacing in Figma, addressing a long-standing challenge in the design-to-development handoff process. This guide explores everything you need to know about Vertical Trim: from the typography fundamentals that make it work, to step-by-step implementation, to the current limitations you'll need to navigate for production deployments.
Understanding these typography principles is essential for any design professional working on modern web application interfaces where pixel precision matters.
Understanding Typography Fundamentals
The Baseline: Your Typography Reference Point
Before diving into Vertical Trim, understanding typography's foundational concepts is essential. The baseline serves as the primary reference line in typography--the imaginary horizontal line upon which most letters and characters appear to rest. Characters with descenders, such as 'g', 'j', 'p', 'q', and 'y', extend below this baseline, creating visual complexity in text layouts.
This baseline isn't merely a theoretical concept; it's the foundation from which spacing calculations occur. When browsers render text, they measure from the baseline to determine vertical positioning, making it the critical reference point for achieving consistent typography across your designs.
Cap Height: The Measure of Uppercase Letters
Cap height represents the distance from the baseline to the top of uppercase letters in a typeface. In simpler terms, it's how tall the "big" letters in your font are. While not all uppercase letters reach exactly to the cap height (consider the letter 'E' with its horizontal strokes), most capital letters like 'H' and 'T' extend fully to this measurement.
This distinction matters significantly for Vertical Trim. When you enable this feature, Figma calculates spacing based on the cap height rather than the full line-height of the text.
Line Height: The Traditional Approach
Line height (also known as leading) controls the vertical distance between lines of text in a paragraph. By default, line height is calculated using the font's built-in metrics, which include extra space above and below the actual glyphs. This extra space--sometimes called half-leading--exists to ensure text remains readable and aesthetically balanced, but it can create challenges for precise layout control.
Figma's documentation on text properties explains that this half-leading distribution above and below the text creates the bounding box that browsers use for rendering.
For teams implementing comprehensive design systems, mastering these typography fundamentals is key to creating cohesive UI component libraries that maintain visual consistency across all touchpoints.
How Vertical Trim Works
The Technical Mechanism
When you enable Vertical Trim on a text layer in Figma, the software recalculates the bounding box based on cap height rather than line-height. In practice, this means removing the extra space traditionally reserved above and below text content. The trim aligns text to both the cap height (top) and the baseline (bottom), effectively giving you control over the exact vertical boundaries of your typography.
Consider a practical example: when text appears within a button, standard line-height calculations often leave too much space above the uppercase letters. With Vertical Trim enabled, the text's bounding box conforms precisely to the cap height, allowing for natural, optically-centered text positioning within button containers and other tight layouts.
This mechanism also impacts how Figma generates CSS for developers. When inspecting a text layer with Vertical Trim enabled in Dev Mode, you'll see leading-trim: both; in the Typography section, along with the corresponding text-edge property.
Browser Rendering Without Vertical Trim
When a browser renders text, it calculates height based on the entire line-height value--which includes the cap height, any ascender space above, descender space below, and the half-leading distribution above and below the text. This traditional approach creates challenges for designers seeking precise alignment.
The W3C CSS Inline-3 specification defines how browsers should handle cap height baselines for text rendering, providing the technical foundation for understanding why Vertical Trim matters.
Implementing these techniques requires close collaboration between design and development teams to ensure the intended design translates accurately to production code.
Enabling Vertical Trim in Figma
Step-by-Step Process
Enabling Vertical Trim in Figma involves accessing the Typography section within the right sidebar and navigating to the type settings panel:
- Select Your Text Layer: Click on the layer containing the text you want to adjust.
- Access Typography Settings: Locate the Typography section in the properties panel and click the three dots icon to reveal additional type settings.
- Find the Vertical Trim Option: Scroll through the extended list of options until you locate "Vertical Trim"--it appears under the "Basics" tab alongside alignment and decoration options.
- Enable Vertical Trim: Click the toggle to activate Vertical Trim for your selected text layer.
The Typography settings panel displays the Vertical Trim toggle within a section that includes other advanced text properties. When enabled, you'll see the bounding box immediately adjust to conform to the cap height of your text, with the layer height reducing to match the actual text content rather than including the traditional line-height spacing.
Verifying the Effect
After enabling Vertical Trim, observe how your text aligns within its container. The most noticeable difference appears when text sits alongside other elements--buttons with trimmed text will have the text appear more optically centered, and headings will align more precisely with their surrounding content. Check the bounding box of your trimmed text layer in the right sidebar--the height now reflects the cap height rather than the full line-height measurement.
Bejamas provides additional guidance on working with Vertical Trim in production design workflows.
These same principles apply when designing responsive layouts for mobile applications, where precise typography spacing is equally critical for user experience.
Why designers and developers should adopt this feature
Eliminates Development Workarounds
No more line-height: 0 hacks or manual padding adjustments. Developers receive accurate spacing values that work consistently across implementations.
Uniform Spacing and Alignment
Ensure consistent spacing across different text elements in your design for cleaner, more professional layouts that build user trust.
Maintains Visual Hierarchy
Strengthen your design's communication of information priority with precise control over text spacing and vertical rhythm.
Pixel-Perfect Design Realization
Achieve the precise alignment that separates good designs from exceptional ones, particularly when working with tight layouts.
Browser Support and CSS Limitations
The Current State of Browser Support
Despite its advantages, Vertical Trim faces significant limitations in production environments. The CSS properties that power Vertical Trim--leading-trim and text-edge--remain in draft status with extremely limited browser support. Only Safari Technology Preview offers any implementation, meaning nearly all users viewing websites in production browsers will not see the intended trim behavior.
LogRocket's analysis highlights the challenges this creates for design teams relying on Figma Dev Mode for production CSS.
Implications for Design Handoff
When designers enable Vertical Trim without communicating this to developers, the handoff process can produce unexpected results. Developers copying CSS directly from Figma's Dev Mode will receive leading-trim and text-edge properties that browsers simply ignore.
Understanding CSS Output in Dev Mode
In Figma's Dev Mode, Vertical Trim translates to leading-trim: both; and text-edge: cap;. These properties follow the CSS Text Module Level 4 specification, which defines how leading-trim should work when widely supported.
Given these constraints, many teams work with our front-end development specialists to implement reliable CSS alternatives that achieve similar visual results across all browsers.
Several JavaScript libraries help implement cap-height-based spacing:
Capsize by Seek OSS: The most robust solution. Leverages font metadata to precisely calculate spacing based on cap height and baseline. Provides a comprehensive API for generating CSS custom properties.
leading-trim npm package: Mirrors Figma's Vertical Trim feature with some manual implementation required.
Best Practices for Design Teams
Communication and Documentation
Effective use of Vertical Trim requires clear communication between designers and developers. Document which designs or components use Vertical Trim, and ensure developers understand the implications for CSS implementation. Consider creating design system guidelines that specify when Vertical Trim should be used and how to handle production fallback scenarios.
Strategic Feature Adoption
Given browser support limitations, adopt Vertical Trim strategically rather than universally. Focus on high-impact areas: buttons, navigation elements, card components, and other tight layouts where precise text alignment matters most.
Monitoring Browser Support Evolution
The CSS properties enabling Vertical Trim continue to evolve through the W3C standardization process. Monitor browser vendor announcements for updates on leading-trim and text-edge support. As browsers adopt these properties, implementations will become simpler and more reliable.
For teams building comprehensive design systems, combining Vertical Trim with other typography best practices creates consistent, professional results. Our UI design services can help you implement proper typography systems across your digital products.
Frequently Asked Questions
Conclusion
Vertical Trim represents a significant advancement in Figma's typography capabilities, giving designers precise control over the vertical spacing of text content. By anchoring spacing calculations to cap height rather than line-height, this feature enables more accurate text alignment, cleaner layouts, and smoother design-to-development handoffs.
However, the current browser support limitations require thoughtful implementation. Design teams must communicate clearly about Vertical Trim usage, prepare appropriate CSS workarounds, and adopt the feature strategically based on project requirements. As web standards continue evolving, Vertical Trim's browser support will likely expand, making this feature increasingly valuable for modern web design.
For teams looking to improve their design-to-development workflows, mastering features like Vertical Trim is part of a broader commitment to quality. Our web development services include design system implementation that ensures your Figma designs translate faithfully to production.
Sources
- Figma Help Center: Explore Text Properties - Official documentation on enabling and using vertical trim in Figma.
- Bejamas: Everything You Need to Know About Figma's Vertical Trim Feature - Comprehensive guide covering implementation steps and workarounds.
- LogRocket: Why you shouldn't use vertical trim in Figma (yet) - Critical analysis of browser support issues.
- W3C CSS Inline-3: Cap Height Baseline - Technical specification for cap height baseline in typography.
- Seek OSS Capsize - JavaScript library for achieving cap-height-based text sizing in CSS.