TYPE DETAIL / 2026
Links should feel
easy to follow.
下線はリンクを見つけるための、小さくても重要な手がかりです。読みやすい下線の作り方を、文字との距離や太さから考えます。
CSS TYPOGRAPHY TOOL
Underline Designer
読みやすいリンクの下線を、見ながら整える。
CSS TEXT DECORATION
LIVE UNDERLINE STUDIO
デザインに合わせたリンク下線で、読み心地アップ
2PX4PX OFFSET
Links should feel
MAGNIFIED SPECIMEN2PX / 4PX
Typography playground
DESIGN CHECK
下線を整える3つの視点
文字を隠さない
太さと距離を調整し、文字の輪郭を読み取りやすく保ちます。
リンクだと分かる
色だけに依存せず、本文中でも操作できる場所を示します。
文脈で強さを変える
本文、ナビゲーション、CTAで下線の存在感を使い分けます。