リンクの下線が文字に重なるときは text-decoration-skip-ink で避ける
下線が g や j など文字の下にはみ出る部分と重なって読みにくいとき、text-decoration-skip-ink で文字の形に沿って下線を途切れさせる。
どんな問題を解決するか / いつ使うか
本文リンクやナビで下線を残しているデザインで、ディセンダーと下線がぶつかってうっとうしいとき。テキストリンクは色を変えるだけにせず、下線を残す とセットで使う。
やり方
リンクや下線付きテキストに次を指定する（多くのブラウザでは auto が初期値に近いが、明示しておくと意図が伝わる）。
css
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* または all */
}下線を文字のインクを無視して一直線にしたい稀なケースだけ none を検討する。
注意点
- 下線の太さ・色・オフセット（
text-underline-offset）もあわせて調整すると読みやすい。 - エージェント向けルールには「リンクは下線を残し、skip-ink でディセンダーと重ねない」と短く書いておく。