Why creating real value for people beats technology hypes every time

Who still remembers NFTs, Google Glass and ChatGPT 3 years later?

Ultimate guide to baseline alignment using Figma’s auto layout

An in-depth analysis of implementing the overlooked baseline grids in Figma

Cover image of the article, showcasing a simple card under the grid and the measurements between the text styles

It’s been a few years since Figma introduced its first version of the auto layout feature. I wanted to write about my experience with it since then, so I started a draft, but it’s taken me some time to get back to it.

Now, that Figma recently implemented vertical trim, I came to the realization that if I don’t write this now, someone will eventually come up with a better solution. Or Figma might actually implement something even better than vertical trim, so my method will be rendered useless 😅.

The goal of the article is to showcase and propose a quick solution for using and documenting baseline grids in design systems.

Since this is my first article, I’m looking forward to feedback on the writing and the method presented here, so don’t hesitate to leave your comments.

How it started

Before I jump into baseline grids, here are a few words on how exactly I stumbled on this issue.

Prior to my transition to UX design, I worked as a brand designer. I always believed that I could have created more valuable work if I hadn’t been so preoccupied with geometry and grids in my designs 🤓.

My interest in geometry, and particularly in grids, was further fueled after reading “Grid Systems In Graphic Design”. The book not only helped me deepen my understanding of leveraging grids, but also inspired me to make the jump from brand to product design.

As the book puts it:

By arranging the surface and spaces in the form of a grid the designer if favorably placed to dispose his text, photographs and diagrams in conformity with objective and functional criteria. The pictorial elements are reduced to a few formats of the same size.

I was then convinced that working on products would allow me to focus more on geometry and grids in design. At the time, I was also drawn to some well-documented design systems, such as Material 2, which offered clear guidelines for creating consistent layouts.

Still, something needed to be added to these guidelines. Responsive 12-column grids were, and still are, extensively used for the web. Baseline grids, on the other hand, are sometimes mentioned and documented, but rarely implemented or used when designing digital products.

This topic haunted me and presented an unhealthy interest for me for a long time. I kept tweaking the method presented here over time, and now with Figma’s vertical trim and auto layout, I had a method and process that presumed easy implementation, had no manual shifting of text elements, and was easy to be documented and included in design systems.

What are baseline grids again?

By definition, the baseline can be considered the invisible line upon which a line of text is seated. It plays an essential role in determining the vertical distance between text and other elements in the design.

Baseline grids are also a popular technique for maintaining consistency in layout and establishing vertical rhythm in design. Oversimplified, baseline grids are used to set the distance (leading) between text lines. On the web (and mostly all UI design tools), this distance is calculated using line heights instead of baselines.

There is no correlation between a typeface's baseline and the line height.

The difference between text aligned using baseline grids and text aligned using line heights
Difference between how text is aligned using baseline grids, and how it is aligned using line heights

The problem

Baseline grids are often specified in design system libraries and kits to ensure that text and other elements align consistently and accurately between them. Two popular design system libraries, Material Design (version 3) and Fluent UI, provide clear and well-documented guidelines for baseline alignment.

However, despite this guidance, baseline alignment is more than often ignored in public UI kits and libraries.

Why are baseline grids challenging to set up?

Files are big and designs are complex. This can be especially difficult when checking thousands of lines of text manually. It’s a tedious job to make sure that the baseline of each text element falls on the grid.

The process is difficult to set up and most of the time not important enough for the purpose of a UI kit or design system library. We download UI kits, play with them, and probably detach the components… in the end, nothing relates to anything no more… you know how this usually goes.

The baseline of a typeface is also specific to the typeface itself, making it challenging and time-consuming to align text elements across multiple typefaces. It needs to be done for each of them.

The solution

Wrap text elements in components with auto layout. Use vertical trim to cut the vertical space that’s above and below the text. Add some vertical padding, and that’s it.

The resulting components will then be included in the design system library. The use of these components will be documented, similar to other major components in the design system.

So, without any further ado, let’s jump straight into it.

Getting started

Since I mentioned Material 3 earlier, let’s continue with some text styles from the kit. This will help us have a better understanding of how everything works (while also having the examples supported in Material).

We’ll start with four basic styles from the Material 3 kit: Title Medium, Body Medium, Body Small, and Label Small.

Detailed attributes of four basic text style from the Material 3 UI kit
Detailed attributes of four basic text styles from the Material 3 UI kit

Leveraging auto layout, we’ll create a simple card using these styles. We’ll use a similar layout to the one used in the Material 3 typography guidelines. We’ll align everything to a 4px grid. Each value for padding, the distance between elements, and line height will be multiples of 4px.

Example of a card made using Figma auto layout
A simple card, showcasing the settings used for its auto layout

Putting this under the 4px grid, we can see that every element perfectly aligns with it.

Card with auto layout under the 4px grid

Now, we will map every padding value, line height, and spacing between elements to understand and visually see how much height each represents.

Different measurements of each of the card’s elements

Shifting our focus away from the distance between elements and spacing, we’ll move on to the distance between baselines. This will allow us to understand and see how baselines are distributed between the elements and their alignment on the grid.

Illustrated distances between baselines

Putting this under the grid, we can see that, while everything is indeed aligned on the 4px grid, the distance between the baselines is pretty random.

Illustrated baseline distances under the 4px grid
We can also see that in this example, the differences between the actual grid lines are very small (33px instead of 32px, 17px instead of 16px, etc.)

That happens because, even if the font size and line height are multiples of 4px and so they fall on the grid, it’s not guaranteed the baseline will also fall on it. In most cases it doesn’t, and when it does it’s simply coincidental.

Continuing with the same Material 3 example, we see that the suggested distances between baselines are multiples of 4px (32px, 20px, and 24px). We’ll try to place the text elements in a similar manner.

Illustrated baselines on a card without auto layout

Now the baselines are on the grid, but we had to manually shift the text elements for them to be like that.

This generates two important problems: we lose the auto layout feature, and it takes a ton of time to do this for each text element.

Measurements between elements with baselines aligned on the grid, but without the auto layout feature

With baselines manually aligned on the grid, the other measurements will then be affected.

Adding additional top and bottom paddings as a solution

Now that we have a pretty good idea of what the issue is, let’s jump into solving it.

The first step is to set the vertical trim of each text element to cap height to baseline. This will completely trim the vertical space around the element, leaving only the text (glyph).

Table comparing standard vertical trim against cap height to baseline

Next, we’re going to wrap each of these elements in components with auto layout.

Text elements wrapped into components

By adding auto layout, we have the necessary control over the top and bottom paddings of the newly-created text components. Padding will be used to shift the text element inside the component and force its baseline to fall on the grid.

We’ll start with the Title Medium text style from this list. The baseline distance is calculated from the top and bottom of the total glyph height, which measures 11px. Putting this element under the 4px grid, we can see that the closest grid line is located 1px after the font’s baseline.

Overview of Title Medium text style’s baseline on the 4px grid
We can see that the closest grid line is located 1px after the style’s baseline

Therefore, using the top padding in the auto layout feature, we will add 1px on top to shift the baseline on the grid.

Why? Adding 1px on top will bring the whole text down, so in the end we’ll have a total line height of 12px.

Baseline shifted for Title Medium text style
Adding 1px to the top padding will align the baseline with the grid

Now, both the line height and the baseline align perfectly with the grid.

Here’s a recap of the complete process:

Overview of the process of adding vertical padding to a text component
Pretty nice 50fps GIF that I’m proud of, showing the process of adding vertical padding to a text component

The next step is optional. We can leave our newly created text component to have a total height of 12px, or we can tweak it further in order to match the actual line height of the text style (20px in our example).

To do this, we simply need to add 4px more on each side of the text component (because, you guessed it, 12px + 4px + 4px = 20px).

Final padding values for Title Medium text style
In the end, we’ll have 5px as top padding and 4px as bottom padding

Like this:

Demonstration on how to match the font’s line height
Another great quality GIF that showcases how to match the font’s original line height

Confusing? Not really. Weird? A little… not your typical flow for working with type, right?

We can continue doing this for the rest of the remaining text components: Body Medium, Body Small, and Label Small.

Rest of the text components after adjusting their paddings

Now we should have a set of text components with auto layout, and top and bottom paddings adjusted. Time to put these to use!

Using the components

Using these components instead of simple text styles, we will recreate the same layout from before, allowing us to see the benefits of this method.

Card made with auto layout and the new text components
We have auto layout and each mapped value is a multiple of 4px
We have perfect values between each of the elements’ baselines
Perfect baselines under the 4px grid
And our baselines are now perfectly aligned on the grid

As you can see, now everything automagically falls on the grid. The distance between fonts, paddings, and line height are all aligned to the defined 4px grid, while still preserving the functionality of auto layout.

Using the same text components, we can create more complex layouts and alignments. Everything flows perfectly into a harmony of obsessive-compulsive multiples of 4px.

Example of complex layout that showcases the use of the custom text components
A more complex layout that showcases the use of the custom text components

Keeping it organized and ready for future updates

Usually, when I work with a file like this, I simply design a new frame, where I explain how the method works and I provide guides for the alignment.

Method documentation and component library
Method documentation and component library

This is usually divided into two parts. The first part explains the vertical rhythm, how it works, and some examples.

The second one includes the actual text components with the paddings added. We keep the master components like this, so in case a font gets an update and its original baseline gets modified, we can come here and quickly correct it. Numerous text lines that before required manual adjustment, are now all managed from these master components.

Here’s the file with everything presented in this article, including the examples, library, and guidelines. You can just duplicate and save yourself a copy to play with.

On implementation and future of the approach

There could be multiple options to implement this. Some options can either be similar to the approach here, maybe tweaking the React library of text styles to react (pun intended) the same as the method showcased here.

For web, a great way to do this is to use Capsize, it trims the space above capital letters and below the baseline.

There’s a suggested new CSS property called (for now) text-box-trim that allows you to trim the leading off a text box without cutting off the text. It’s similar to Figma’s implementation of vertical trim.

The downside of the approach

  • One of the drawbacks of this method is that you can no longer use simple text layers. Instead, you have to get used to picking your font container from the list of components.
  • The method is typeface-specific, so you need to manually adjust the baselines for different typefaces. If you decide to change the font, you will have to revisit the offsets. Luckily, it will be easy to perform with a design system where ideally there is a single main typeface.
  • The rendering of typefaces can vary between design and implementation. Implementing this method will depend on each team’s preferences and the existing implementation of design systems.


While doing my research for this article, I discovered more or less similar approaches and workarounds for managing baselines in UI design.

In no particular order, here are some other great articles and resources that tackle the same subjects:

Ultimate guide to baseline aligment using Figma’s auto layout was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.






Leave a Reply

Your email address will not be published. Required fields are marked *