テキストジャギーに対応しよう！

駆け出しの頃、引数を「いんすう」だと思っていたフロントエンドエンジニアのザトです。

さて、最近の案件にてテキストにひどいジャギーが出てしまいましたので対応方法をまとめたいと思います。

Webフォント「M PLUS Rounded 1c」を使用し、IEとEdgeで見たときに発生しました。

ジャギーという言葉は以下の通り、ギザギザを意味します。

実際に見てみると以下のような状態です。

ページ全体でこのような状態だったらユーザーにとっては不快ですね、、

この解決方法としては、CSSでテキストを人間の目ではわからないくらいちょっとだけ傾かせます。

正常なブラウザには影響させたくない場合は、ブラウザを指定します（参考記事）。

//Edge(Chromium) テキストジャギー対策

_:lang(x)::-ms-,
h1,
h2,
h3,
h4,
p,
a,
li,
dt,
dd,
th,
td,
figcaption {
    transform: rotate(0.2deg);
}

この指定をしたことによって以下のようにだいぶ目立たなくなりました。

WindowsPCによってジャギーが出たり出なかったりするのはデスクトップ解像度が違うからです。

どの解像度まで対応するかで何度傾かせるかも変わってきますので実機を見ながらチェックすると良いです。

また、クラスに指定するのかセレクタに指定するのかなども案件によって柔軟に対応しましょう。