Windows環境で日本語Webフォントを使って小さな文字を表示するとシャギーが目立つことがある

Windows環境で日本語Webフォントを使用した際には、ブラウザによっては下図左側のようにシャギー（文字のギザギザ）が目立ってしまうことがあります。せっかく見栄えを気にしてWebフォントを適用しているというのに、このようにシャギーが目立ってしまうと、わざわざフォントを読み込ませた意味が薄れてしまうでしょう。

このようなシャギーを防ぐには、CSSを使ってほんの少しだけ文字を傾ける方法が有効です。傾けるといってもほんの少しの角度なので、見た目に傾きは全く分かりません。しかし、その装飾の効果(副作用)によってフォントのシャギーは取れるため、文字は読みやすく綺麗に表示できます。

シャギーを防ぐ簡単なCSSは1行で済む

Webフォントを指定するには、（そのWebフォントを読み込むためのCSSを読み込んだ上で）下記のようにfont-familyプロパティを使ってフォント名を指定します。その際、下記の3行目に記述してあるようにtransformプロパティを使って値にrotateを指定すると、シャギー（文字のギザギザ）が見えてしまう問題を防げます。

.webfont {
	font-family: 'M PLUS Rounded 1c';   /* Webフォントの指定 */
	transform: rotate(0.03deg);         /* シャギーを防ぐ指定 */
}

CSSのtransformプロパティは、対象の要素を様々に変形させられるプロパティです。そこに値としてrotateを指定すると対象要素を任意の角度で傾けられます。上記では rotate(0.03deg) と指定していますから、対象要素を 0.03度 だけ傾けています。

0.03度の傾きなら、まず見た目には分からない

0.03度のような極小の角度なら、人の目にはまず傾いていることは分かりません（下図で確認してみて下さい）。
なので、事実上は何の変化もないでしょう。
しかし、この記述があることによってフォントの描画方法が変わり、文字にシャギーが目立つのを防ぐことができます。

先程もご紹介しましたが、下図の1枚目(広い画面で見ていれば左側)はWebフォントだけを指定した表示例です。シャギーが目立ちます。2枚目(広い画面で見ていれば右側)はWebフォントに加えて「transform: rotate(0.03deg);」のCSSを加えて0.03度だけ傾けた表示例です。傾いていることはまず分からないでしょう。しかしシャギーは消えて綺麗に見えています。

※上図は、Windows10版Vivaldiでの表示をキャプチャした画像です。

シャギーが取れる角度（小さくし過ぎないよう注意）

私が試した限りでは、0.03度よりも小さい角度を指定すると、シャギーは消えませんでした。
なので、先のCSSソースでは角度に0.03度を指定しています。
もしかしたら、ブラウザによってはもっと大きな角度を指定しないとシャギーが消えてくれない場合もあるかもしれません。
0.05度でも、0.07度でも充分小さいので、人の目には傾いていることはまず分かりません。心配なら、もう少し大きな角度を指定しても良いでしょう。

このように、人の目には分からないくらいの微妙な角度で傾けるだけでシャギーの発生が防げるので便利です。

ただし、ページ全体に適用するとマズい場合があるので注意

人の目には分からないくらいの微妙な角度で傾けるだけのCSSなので、「body要素に対してtransformプロパティを適用してしまえば楽で良いのでは」と思うかもしれません。しかし、そのような「ページ全体を傾ける」ように装飾してしまうと少々マズい場合があります。常にマズいわけではないのですが。マズい理由は、主に下記の2点です。

• 理由1. ページのmarginがゼロな環境で全体を傾けると、横スクロールバーが出てしまう
• 理由2. 傾けた範囲内に画像があると、画像そのものが微妙にぼやけてしまう

理由1. 横スクロールバーが出てしまう

人の目には分からないくらいの傾きだとはいえ、傾くことは事実です。なので、画面の横幅いっぱいに広がっているボックスに対して傾きを適用してしまうと、ほんの少しだけ画面サイズからはみ出してしまうために、横スクロールバーが出てしまいます。

すると、「何が原因なのかがぱっと見た感じでは分からないが、何故か横スクロールバーが見えている」という、少々望ましくない表示になってしまいます。

※ページの周囲に余白がある状態（marginに充分な幅がある場合）なら、中身を一律に傾けても横スクロールバーは出ないので、「常に横スクロールバーが見えてしまう」というわけではないのですが。レイアウトを調整した後に横スクロールバーが現れてしまう可能性もあり、そうなった場合には原因の特定が面倒になりそうですから、最初から（ページ全体を傾けるのは）避けておく方が無難なように思います。

理由2. 画像そのものが微妙にぼやけてしまう

傾ける範囲内（transformプロパティが適用される範囲内）に画像があると、その画像も微妙に傾くことになるため、画像そのものが若干ボケた具合に表示されることがあります。
これは、画像をほんの少しだけ傾けるようレンダリング(描画)されることが原因です。（この辺の処理はブラウザ次第なので、もしかしたら問題ないブラウザもあるかもしれませんが。）

いくら文字のシャギーが取れても、画像がボケてしまうと困るでしょう。

上記の2点の問題があるため、「marginがゼロに設定されたbody要素」や、そのような状況で「画面の横幅全体に広がるよう設計されたdiv要素などのブロック」に対しては、transformプロパティを適用するのは避けておきましょう。
微妙に傾けるのは、必要最小限の範囲に限っておく方が無難です。

シャギーの有無を見るためのサンプルHTML＋CSSソース

本記事でご紹介したシャギー発生の有無を見るために記述したサンプルHTML＋CSSソースも参考までにご紹介しておきます。

まず、HTMLソースは以下のように記述しました。

<div class="webfont">
	<p class="fontsamplebox normal"  >Windows環境で日本語Webフォントを使用した際、ブラウザによってはシャギー（文字のギザギザ）が目立ってしまうことがあります。そのようなシャギーを防ぐには、CSSでほんの少しだけ文字を傾ける方法が有効です。ほんの少しの角度なら見た目には傾きは分かりません。しかし、フォントのシャギーは取れるため、読みやすい表示にできます。</p>
	<p class="fontsamplebox noshaggy">Windows環境で日本語Webフォントを使用した際、ブラウザによってはシャギー（文字のギザギザ）が目立ってしまうことがあります。そのようなシャギーを防ぐには、CSSでほんの少しだけ文字を傾ける方法が有効です。ほんの少しの角度なら見た目には傾きは分かりません。しかし、フォントのシャギーは取れるため、読みやすい表示にできます。</p>
</div>

まず、最も外側にWebフォントを適用するdiv要素を設けています。
内側のp要素2つは、transformプロパティを適用する段落と適用しない段落のために、同じ文章を並べて記述しています。

※注：Webフォント「M PLUS Rounded 1c」は、Google Fontsサイトから読み込むように別途記述しています。
例えば下記のように書きます。(Webフォントを読み込むための記述については、適用したいWebフォントやそれを提供してくれるWebフォントサービスの解説をご参照下さい。)

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&amp;display=swap" rel="stylesheet">

次に、CSSソースは以下のように記述しました。

.webfont {
	font-family: 'M PLUS Rounded 1c';  /* Webフォントの適用 */
}
.fontsamplebox {
	margin: 1em;
	max-width: 307px;
	box-sizing: border-box;
	display: inline-block;
	border: 1px solid gray;
	padding: 0.5em;
	box-shadow: 3px 3px 3px gray;
}
.noshaggy {
	transform: rotate(0.03deg);  /* シャギーを防ぐ指定 */
}

上記のCSSソースのうち、

• .webfont だけが適用されると、シャギーが目立ってしまう可能性があります。
• .webfont に加えて .noshaggy も適用すると、シャギーが出ずに済みます。

※上記の .fontsamplebox は、表示用の枠を作っているだけです。記述は必須ではありません。

常にシャギーが目立つわけではない

Windows環境で日本語Webフォントを使う場合でも、フォントの種類によってはシャギーが発生しないこともあります。また、シャギーが目立つフォントでも、太字で表示したり、文字サイズを大きくしたりすれば、シャギーは出なくなることもあります。

フォントの表示はブラウザ側の処理の問題ですから、将来的にはこのような（本来の用途とは異なる）テクニックを使わなくても綺麗に表示できるようになるでしょう。あくまでも、現在の（主にWindows）環境をターゲットにした一時的な対策です。

(更新日：2020年06月24日)