CSSグラデーションを使った太くならないリンクの下線は、Mediumの詳細な記事やterkel.jpのその解説とも言える記事を見てそのうちやってみようと思っていた。フォントサイズが大きい時に下線が2pxや場合によっては4pxくらいで引かれるようになるのは見た目に結構な負荷を与えるので、常に1pxで引きたいといった希望を持ってる人は多いはずだ。
このウェブサイトでは以下の要件を満たすような感じで実装した。
- 常に
1pxで下線を引く - 文字サイズに依存しない
- なるべくシンプルな実装
a {
background-image: linear-gradient(
transparent 0,
transparent 50%,
rgb(91, 172, 208) 50%
);
background-position: 0 1.1em;
background-repeat: repeat-x;
background-size: 2px 2px;
text-decoration: none;
}1pxの下線にするには2pxの背景画像の半分だけ塗るCSSグラデーションを作る。メディア・クエリーで分岐する必要はない(と思う)。下線の位置はフォント・サイズに合わせて可変になるようにem単位を使って指定した。フォントとそのグリフの高さで多少のずれが起こるので要調整だが、だいたい1.05から1.15emだと思われる。
この記事を書いた時点では、上記スタイルに加えてcolorをinheritにしているので、下線のみ色が変わる。この形だと読みやすさそのものは向上するが、リンクの視認性はかなり下がるような印象も持った。text-decoration-colorプロパティーでも同じことが言えると思うので、このプロパティーが気軽に使えるようになってもこういった点には注意を払った方が良いだろう。
CSSグラデーションを使うのは、フォントサイズが大きくなるにつれて下線が太くなるというtext-decoration-*プロパティーでは解決できない点への解だ。下線の太さはその色の印象を強めるということにもつながるので、倍の太さになると倍以上の印象をあたえると考えた方が良い。
下線が太くなるのはフォントに依存するが、概ね24px前後で太くなる。昨今は24pxどころか40pxかそれ以上の大きさで文字を表示することもあるので、そういったサイズにtext-decorationプロパティーで下線を引いている場合は、こういったテクニックを利用して下線の、延いてはリンク全体の印象を和らげる必要もあるだろう。