日本語Webフォントの「M PLUS 1p」「M PLUS Rounded 1c」のジャギー（ギザギザ問題）を解消する方法2選！

今回は、日本語Webフォントにおける「ジャギー（ギザギザ問題）」について書いていきます。

先日の案件で「M PLUS 1p」もしくは「M PLUS Rounded 1c」を使用してくださいと指示がありました。

初稿を提出した時にギザギザに表示されると指摘されました。

私の環境では普通に表示されますが先方の環境ではなかなか改善されませんでした。

ジャギーって何

「Webフォント」は、手軽にWebサイトのデザインを向上させるための便利なツールです。

特にGoogle Fontsは、無料で多くの洗練されたフォントを提供しており、日本語フォントは多くのサイトで利用されています。

しかし、これらのフォントをWindows環境で使用する際、以下の条件で発生しやすくなるようです。

特に「M PLUS 1p」や「M PLUS Rounded 1c」のようなカジュアルな日本語フォントは、ジャギーが発生しやすい傾向があるようです。

CSSで要素をわずかに傾かせることです。

「rotate」を使って、たった一行のコードを追加するだけで、視認性が大幅に向上します。

この「0.05度の傾き」によって、ブラウザがアンチエイリアス（文字を滑らかに表示する処理）を適切に適用してくれるのです。

.text {
  transform: rotate(0.05deg);
}

しかし私の場合は2箇所この方法では改善されませんでした。

文字サイズもジャギーが出にくいとされている20px以上でした。

文字サイズが同じなのに改善されていない箇所と改善されている箇所があったのも謎でした。

ただ調べてみるとこの方法で解決された方々がいらっしゃるのは事実なので最初はこれを試してみてください。

対象要素を慎重に選択してください！

.mainや.contentなど、本文エリアに限定してください。

body全体への適用は要注意です。

サイト全体がほんの少し傾いてしまいます。

色々試しましたが改善されなかったので最終的にこの方法を提案して解決することができました。

Google Fontsで提供されている「M PLUS 1」や「M PLUS 2」は代替フォントとしておすすめです。

これらのフォントを選ぶことで、コードをいじらなくてもジャギー問題を回避できます。

今回使用した「M PLUS 1p」に一番近いのは「M PLUS 1」ですのでこのフォントを提案するとOKが出てジャギーも出なくなり無事納品することができました。

以上、日本語Webフォントの「M PLUS 1p」「M PLUS Rounded 1c」のジャギー（ギザギザ問題）を解消する方法2選でした。