Text Decoration

The underline on your login link slices through the g. You bumped the font size for the hero. The underline got thicker with it.

The Principle

Browsers draw underlines from font metrics. The line sits close to the baseline, cuts through descenders like g, j, and y, and scales with font size. CSS gives you independent control through text-underline-offsetMoves the underline away from the baseline. Typically 0.15em for readable links., text-decoration-thicknessSets underline thickness independently of font size. Often 1px for body links., and text-decoration-colorControls underline color separately from text color. Useful with color-mix() for subtle links..

The Rule I Follow

I offset underlines by 0.15em, keep them at 1px thick, and fade them with color-mix()A CSS function that blends two colors in a chosen color space. Here it fades underline opacity. until hover. I leave text-decoration-skip-ink: autoWhen auto, browsers skip drawing underlines through descenders like g and y. alone.

Try It Yourself

Adjust offset, thickness, and underline color. Aim for 0.15em, 1px, and about 40% opacity.

At 0.15em offset and 1px thickness, the underline clears descenders without competing with the letterforms.

The Mistake I'd Avoid

Removing underlines completely or setting text-decoration-skip-ink: none. Links need a visible affordance. Forced underlines through descenders look worse, not better.

Remember This

A good underline supports the text without competing with it.

a {
text-underline-offset: 0.15em; /* clear descenders */
text-decoration-thickness: 1px; /* fixed weight, not font-scaled */
text-decoration-color: color-mix(
  in srgb,
  currentColor 40%,
  transparent
); /* muted at rest */
text-decoration-skip-ink: auto; /* browser skips descenders */
transition: text-decoration-color 180ms ease-out;
}

a:hover {
text-decoration-color: currentColor; /* full weight on hover */
}

a {
text-underline-offset: 0.15em; /* clear descenders */
text-decoration-thickness: 1px; /* fixed weight, not font-scaled */
text-decoration-color: color-mix(
  in srgb,
  currentColor 40%,
  transparent
); /* muted at rest */
text-decoration-skip-ink: auto; /* browser skips descenders */
transition: text-decoration-color 180ms ease-out;
}

a:hover {
text-decoration-color: currentColor; /* full weight on hover */
}