Why Your Underlines Look Wrong (And How to Fix Them with the Right Font)

Underlines seem simple—until you try to make them look good. Whether you’re building a website, designing an app, or just fine-tuning some typography in your UI, making sure your underlines look right across font sizes, font families, and browsers can become an unexpected challenge. Even more importantly, poorly styled underlines can impact accessibility and readability, especially for users with visual or cognitive impairments.

This article explores why it’s critical to choose your font family wisely and how to approach underlined text in a way that supports both design integrity and user experience.

Why Text Underline Matters

In digital design, underlines are most commonly used to indicate hyperlinks. That simple styling choice carries a big responsibility. Studies have shown that underlines can negatively affect readability—especially for people with dyslexia or other reading challenges—if not implemented carefully.

The biggest culprit? Improper underline positioning.

Letters like p, q, y, and g (called descenders) dip below the baseline of text. A poorly placed underline can slice right through them, making the text harder to read or visually uncomfortable. Add diacritics (accented characters), and the situation can become even more unpredictable.

The Browser Rendering Problem

Each browser renders font metrics and underline positioning slightly differently. What looks clean and elegant in Chrome might appear misaligned in Firefox or Safari. Add multiple font sizes into the mix, and the inconsistencies multiply.

In the demo below, you can try adjusting the underline position and offset for different fonts and font sizes, and then compare how each setting behaves in various browsers. You’ll quickly notice that achieving pixel-perfect alignment between underlines and descenders is not just tricky—it’s inconsistent.

Font Families: Form and Function

While designers often choose fonts based on visual appeal, it’s just as important to consider how that font functions—especially when it comes to text decoration like underlining. Some fonts render clean underlines straight out of the box, while others require a lot of manual adjustment.

Fonts should be evaluated not only in design tools like Figma but also in real browsers. A font that looks beautiful in Figma might render differently when loaded via CSS—resulting in layout shifts, clunky underlines, or broken user expectations.

When choosing a font, ask yourself:

• Does the font allow for clear, legible underlines beneath descenders and diacritics?
• Does it behave consistently across browsers?
• Does it maintain readability at all sizes?
• Is it optimized for the web?

Accessibility First, Always

From an accessibility perspective, underline clarity is key. Underlines that touch or intersect letter forms can cause serious issues for users with dyslexia, low vision, or cognitive impairments. If you want to provide a smooth reading experience, your typography must be accessible by default.

In many cases, developers use extra styling to “fix” underline alignment:

text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;

TL;DR: Best Practices

• Choose font families that render text decoration cleanly beneath descenders and diacritics.
• Don’t rely only on design tools like Figma—test your typography in real browsers.
• Be cautious with underline styles—avoid overlapping descenders, and test for readability.
• Use text-underline-offset and text-decoration-thickness to fine-tune styling when needed.
• Always keep accessibility in mind—legibility comes before aesthetics.