ビットマップフォントのジャギー問題
Creative Member WEBチーム
こんにちは。
WebチームのSです。
ビットマップフォントのジャギー問題
Webセーフの丸ゴシックを探し、Google Fontsにあった「M PLUS Rounded 1c」を使用したところ、表示がデザインデータと異なることに気付きました。
フォントが小さい・細い箇所を中心に線が滑らかでなく、いわゆるジャギーという状態になっていました。
❕環境：Windows/Chrome、他ブラウザ
フォント用語解説
- ジャギー（Jaggy, Jaggies）
- ビットマップ画像（ラスターイメージ）やビットマップフォントなどの輪郭に見られる、階段状のギザギザのこと。折り返し雑音の一種。
→アンチエイリアスの設定、スムージングといった処理を行うことで目立たなくできる - ビットマップフォント Bitmap font
- ラスターデータ。元からギザギザのフォント
- スケーラブルフォント Scalable font
- ベクターデータ。拡張性のある
- ストロークフォント
- 骨格線のみ
- アウトラインフォント
- 関数曲線
- バリアブルフォント
- 可変
- （Jaggy, Jaggies）
- ヒンティング
- デジタルフォントの表示品質を向上させるための技術の内、
文字を構成する線の太さと幅を調整して見かけの向上を図る技術で、制御情報はフォントに内包される。
→多くの端末が十分な解像度をもつようになったので現在は不要に、設定が不適切な場合は逆効果となることもある。 - アンチエイリアス
- 画像を滑らかに見せるための処理。
境界線のまわりに中間調が補われて段階的に色が付けられるため、境界線が滑らかに見えるようになる。
考え得る原因
①ビットマップフォントだから
②アウトラインフォントだから
＝ヒンティングが逆効果になってしまっているから
今回ジャギーを解決したいフォントは「M PLUS Rounded 1c.ttf」アウトラインフォントのため、ヒント情報を削除
フォント用語解説
軽く調べてみたところ、モリサワ公式サイトのFAQに回答を見つけました＾＾
【対処方法】
少し太めの書体を選択いただく、またはバランスが許す限り少し大きめの書体にしていただく、などをご検討ください。
参照：TypeSquare >フォントの表示について>Webフォントの表示がかすれたり、ギザギザして見えます。
→公式の見解としては、避けるほかに方法は無いようでした。。
上記のページでも（少なくとも当環境では）実際にジャギーが発生しているのが確認できます。
方法１．各ブラウザ・ユーザー側で設定を行う
ユーザー側の対処法であり、根本的な解決ではないためパス。お手持ちの端末での表示についてお困りの方には申し訳ないですが、「ブラウザ フォント 設定」等で出てくると思います！
方法２．cssで目に見えないくらい傾かせる
ヒンティングの回避方法として有用。デメリット：CSSで回転が反映される最小値(しきい値)は環境に依存するらしく、あまり小さくしすぎてもブラウザによっては効果がない可能性があり、あまり角度や適用範囲を大きくすると見た目にも影響してしまうため、細部に指定する必要があります。
方法３．ツールを使ってフォントデータからヒント情報を削除する
▼ツール「fontforge」でのヒント情報削除方法全選択→ヒント情報を削除
→フォント名等を変更
→エラー：問題が見つかりました
Self Intersecting Wrong Direction Missing Point at Extrema
Would you like to review the errors or save the font anyway?
フォントにエラーがあります。
自己交差、方向が間違っている、極値に点がない
エラーを確認しますか、それともフォントを保存しますか？
→元々のグリフの問題のようですが、今回のジャギー問題には関係なさそうなので無視して生成
結果
chromeとedgeでは解消されましたが、firefoxでは変わらずジャギーが確認されました。firefoxでジャギーが解消できなかった原因は調査中です。
解決できず悔しいですが、また何かわかり次第更新いたします！！
現時点で思い当たる原因：ブラウザごとのアンチエイリアス設定の違い
ICS MEDIA - 意外と奥深いCSSのfont-weightの話 > 落とし穴1 デザインツールとブラウザのアンチエイリアスの違い
おまけ
上記の記事を読んでいて、ついでに一点不思議だったことの原因がわかったためご共有いたします！「デザインデータと全く同じフォントに設定を適用しているのに、コーディングした画面の方が文字が太く/細く見える」
と思ったことはないでしょうか。
こちらはデザインツールとブラウザのアンチエイリアス設定の違いが原因だったようです！
ありがとうございました！