Blog スタッフブログ

WEB制作

日本語WEBフォント使用時にジャギーが発生するのを防ぐ方法

ジャギーとは、デジタル化された画像等のデータにノイズが現れて線がギザギザに乱れる現象のことです。

日本語WEBフォントの中には、WINDOWS環境下において一定のフォントサイズ以下でジャギーが発生するものが存在します。
例を挙げると、Google Fontsで使用可能なM PLUS Rounded 1cというフォントはこうしたWEBフォントのうちの一つです。
フォント適用時、ご覧のようにfont-size: 21pxの際は問題なく表示されますが…

一定のサイズ（画像ではfont-size: 19px）まで下げると、この通りテキストにジャギーが発生します。


ジャギーが発生したままでのサイトの公開は視認性の低下につながるため、以下の記述を追加することによって解消します。

	<div class="midashi_text">
	<span class="span1">日本語WEBフォント使用時にテキストにジャギーが発生するのを防ぐ方法とは</span>
	</div>
.midashi_text {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 19px;
    font-weight: 700;
    transform: rotate(0.05deg);
    font-family: "M PLUS Rounded 1c",sans-serif;
}
.midashi_text .span1 {
    border-bottom: 1px solid;
}

transformとは、テキストや画像といった各種要素に対し変形を加えるcssプロパティです。
transform: rotate()を指定することで、要素を回転させることができます。
()内には回転させる角度の数値を入力します。

以下がtransform: rotate()を適用した後のfont-size: 19pxでの見出しテキストです。


ジャギーが見受けられなくなっていることに加え、要素を回転させたことも見た目にはほぼわかりません。
0.05degというわずかな角度の差は、人間の目には認識できないからです。

戻る一覧へ戻る