WindowsでBIZ UDフォントのアンダーバーが薄くなる問題に対処する
BIZ UDフォントとは
モリサワが開発したユニバーサルデザインフォント「BIZ UDフォント」をご存知でしょうか？
Google FontsからもWebフォントとして提供されているため、知っている方や使ったことがある方も多いと思います。
モリサワのBIZ UDゴシックは、教育やビジネス文書作成などに活用できるよう、より多くの方にとって読みやすく使いやすいように設計されたユニバーサルデザインフォントです。
多くの人がわかりやすく、読みやすいように工夫されたユニバーサルデザインフォントは、アクセシビリティの向上のためにも、積極的に使用していきたいものです。
政府広報オンラインのサイト（アクセシビリティにはかなり力を入れているはず）でもBIZ UDゴシックが使用されていました。[1]
また、現在Google Fontsで利用可能な日本語のユニバーサルデザインフォントはこのBIZ UDフォント（ゴシックと明朝）のみとなっています。
そのためユニバーサルフォントを採用するとなった場合、まずこちらが最有力候補となるでしょう。
問題点
しかしこのBIZ UDフォント、Windows環境では特定のフォントサイズや画面の拡大・縮小時にアンダーバーが薄くなったり見えなくなるという問題が存在しています。
Windowsユーザーの方は試しにGoogle FontsのBIZ UDゴシックのページで「_ ＿」と入力し、フォントサイズを色々と変えてみてください。
あるところで極端に細くなったり、薄く見えたり、場合によってはほぼ消えてしまうように見えると思います。私の環境では16~20px、27～29pxあたりで線が細くなってほぼ見えなくなってしまいました。
この問題を解決するための対処法を紹介します。
対処法
対応としてはシンプルで、アンダーバーにだけ別のフォントを適用することで解決できます。
アンダーバー自体はただの棒なので、別のフォントになっても違和感が出ることは無いでしょう。
ここではOS標準フォントをアンダーバーに適用してみます。
@font-face でアンダーバー専用のfont-familyを定義
以下のようにCSSの @font-face を使って、アンダーバー専用の font-family を定義します。
@font-face {
font-family: "lowline-only";
src: local("Hiragino Sans"), local("Hiragino-Sans"), local("游ゴシック体"),
local("YuGothic"), local("Meiryo"), local("Meiryo UI"), local("メイリオ");
unicode-range: U+005F, U+FF3F;
}
-
font-familyには任意の名前を指定 -
srcでOS標準のフォントを指定 -
unicode-rangeで適用させたい文字のUnicodeを指定
これによって、特定の文字（この場合はアンダーバー）にだけ適用されるフォントファミリーを定義できました。
font-familyの指定
あとは定義したフォントファミリーを"BIZ UDGothic"の前に指定するだけです。
html {
font-family: "lowline-only", "BIZ UDGothic", sans-serif;
}
これにより、アンダーバーには標準フォントが、その他の文字にはBIZ UDGothicが適用されます。
無事アンダーバーがはっきりと見えるようになりました。
まとめ
まずは「アンダーバー薄くなる問題」自体が根本的に解決されることを望みたいです。
ただ、とりあえずはこの方法で安心してBIZ UDフォントを使えるのではないでしょうか。
そして、これからより多くのサイトでUDフォントの採用が増えると良いなと思います。
参考リンク
-
2024年1月23日現在 ↩︎
Discussion