How to change Webflow's default underlining for better legibility

Introduction

At Digidop, we believe that every detail counts in a Webflow project. However, there are times when some of Webflow's default elements can cause minor problems. This is precisely what we're going to discuss in this article.

If you're used to developing websites on Webflow, you may have already noticed that the default underlining is very close to the text (much closer than the default underlining on a Figma layout, for example), which can affect the aesthetics and readability of your designs.

But don't worry, we've got the solution to this problem, and it's extremely simple since it consists of a tiny line of custom CSS code that you can systematically integrate into your Webflow sites.

In this article, we show you how to easily integrate this adjustment into your projects. Let's get started!

The default underlining problem in Webflow

The default underlining in Webflow is actually very close to the text itself, and seems to practically merge with the letters, which can create an aesthetic that doesn't always match the vision you have for your design.

To illustrate this, let's compare it with the default underlining in Figma mockups:

Webflow underlining vs. Figma underlining

When you create underlined text in Figma, you'll notice that the underline is positioned lower, which improves the overall legibility of the text. In Webflow, however, the rendering is not the same, and that's where we come in.

The quick solution with custom CSS code

Now that we've identified the problem, let's move on to the solution. Fortunately, the solution is incredibly simple: all you need is one line of custom CSS code.

The magic line we're going to use is as follows:

body {text-underline-offset: .25em;}

By adding it to your Webflow project, you adjust the gap between text and underline to 0.25em (unit of measurement for font size).

To apply this effect to your site, follow the steps below.

If you use the Client-First clonable :

From the Designer browser, open the Global Styles component, then the Embed inside to access Client-First global styles.

As soon as it's open, go back to the beginning of the Embed to the styles that improve readability.

Finally, simply add the following line to the Body element (as shown in the image).

text-underline-offset: .25em;

If you create a project from scratch and don't use the Client-First clonable :

Open the site parameters and go to the Custom Code tab.
Copy and paste the following code into the header:

<style>
body {text-underline-offset: .25em;}
</style>

You can also, in a similar way to the Client-First configuration, create a global Embed in which to add this custom code so that the styles are visible in the Designer (by adding CSS in the custom code of the page or site parameters, the changes will not be visible in the Designer).

Finally, after adding the line of code and adjusting the value if necessary, make sure you republish your site. It's that simple!

Conclusion

Congratulations! You now have a simple but very practical new trick in your Webflow toolbox.

Every little detail counts in creating an exceptional user experience: underlining adjustment is no exception, helping to make the texts on your websites more aesthetically pleasing and easier to read.

To find out more, read our latest articles:

...or discover our YouTube channel!