![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/svg_logo.svg){kind=logo}
フリーフォントをWebフォントとしてWebサイトに使用する場合、フォントサイズによって文字の表示が不鮮明になったり、線がつぶれたりすることがあります。
特に小さな文字では、フォントに含まれる「ヒンティング」が表示結果に影響する場合があります。
この記事では、M+系のフリーフォントをWebフォントとして使用する際に小さな文字がきれいに表示されない場合の対処法として、ヒンティングを削除する方法を紹介します。
事象
フリーフォントをWebフォント化してWebサイトに適用すると、20px以下の小さな文字がにじんだり、線がつぶれたりして表示されることがあります。
大きな文字では特に問題がなくても、フォントサイズを小さくすると文字が見づらくなる場合があります。
このような場合は、フォントに含まれる「ヒンティング」が表示に影響している可能性があります。
ヒンティングとは？
ヒンティングとは、フォントを小さなサイズで表示する際に、文字の線や位置などを調整して、画面上で読みやすく表示するための仕組みです。
特に小さなサイズでは、フォントの輪郭をそのまま画面のピクセルに合わせると、線が太くなったり細くなったりするなど、意図した形で表示されないことがあります。
ヒンティングは、こうした小さなサイズでの表示を調整するために使用されます。
ただし、フォントやOS、ブラウザなどの組み合わせによっては、ヒンティングによって文字がつぶれたり、線が不自然に見えたりする場合があります。
今回使用したM+系フォントでも、小さなサイズでの表示にヒンティングが影響していたため、ヒンティングを削除することで表示を改善できました。
解決策
小さな文字の表示にヒンティングが影響している場合は、フォントからヒンティングを削除してみる方法があります。
今回は、ヒンティングを削除した.ttfファイルを作成し、その後Webフォント用の.woff形式に変換します。
ヒンティングを削除することで、20px以下の小さな文字も、削除前と比べてきれいに表示されるようになりました。
※フォントやブラウザ、OSなどの環境によって表示結果は異なります。
ヒンティングを削除することで必ず表示が改善するとは限らないため、実際に使用する環境で確認することをおすすめします。
ヒンティングを削除できる無料ソフト2選
今回は、以下の2つのソフトを使ってヒンティングを削除する方法を紹介します。
どちらも無料で利用できます。
ttfautohint
.ttfファイルのヒンティングを削除したい場合は、ttfautohintを利用できます。
ttfautohintには、既存のヒンティングを削除して新しいヒンティングを生成しない「Dehint」機能があります。
1. ttfautohintをダウンロード・インストール
公式サイトからttfautohintをダウンロードします。
Windows版は圧縮ファイルで配布されているため、対応する解凍ソフトが必要です。
2. ttfautohintを起動してヒンティングを削除
ttfautohintを起動し、対象の.ttfファイルを指定します。
「Dehint」を選択してヒンティングを削除します。
ヒンティングを削除した.ttfファイルが保存されます。
あとは、以下の記事と同じ手順で.ttfを.woff形式に変換すれば、Webフォントとして使用できます。
フリーフォントをWebフォント化！サブセット化してファイルサイズを軽量化する方法
FontForge
FontForgeでもフォントのヒンティングを削除できます。
1. FontForgeをダウンロード・インストール
公式サイトからFontForgeをダウンロードしてインストールします。
2. フォントを開く
FontForgeを起動し、ヒンティングを削除したいフォントを開きます。
3. フォントを全選択する
表示されたフォントを全選択し、ヒンティングの削除を行います。
以下の項目を順番に実行します。
- 「ヒント」→「Remove Instr Tables」
- 「ヒント」→「ヒントを削除」
- 「ヒント」→「ヒント命令を削除」
4. フォントを書き出す
「ファイル」→「フォントを出力」を選択します。
フォント形式で「TrueType」を選択し、「生成」をクリックします。
ヒンティングを削除した.ttfファイルが保存されます。
あとは、この.ttfファイルを.woff形式に変換してWebフォントとして使用します。
まとめ
小さな文字をWebフォントとして表示した際に、文字がにじんだり、線がつぶれたりする場合は、フォントのヒンティングが表示に影響している可能性があります。
今回のケースでは、ヒンティングを削除することで小さな文字の表示を改善できました。
ヒンティングの削除には、以下のような無料ソフトを利用できます。
小さな文字の表示が気になる場合は、ヒンティングを削除したフォントを作成し、表示結果を比較してみるとよいでしょう。