UIパーツにメイリオを指定しないほうがいい理由
はじめに
前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。
フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。
注意事項
メイリオという特殊なフォント
まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。
といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。
Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。
記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。
そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えるという従来の問題を解決したのだという。
UIパーツにメイリオを指定しないほうがいい理由
記事の内容を読んでわかるようにメイリオはフォント内に余白が存在して、和文単体で使用すると上下中央揃えを指定した際に少しずれているように感じます。
この仕様は文章中であれば気になることは少ないかと思いますが、一行で上下中央揃えを行っているようなUIパーツ（ボタン・タブ）のような箇所では数値上では中央揃えだが見た目が揃っていないという現象が発生します。
また、メイリオは主にWindows向けに搭載されているフォントのためメイリオの見た目に合わせると今度はMacやAndroid端末でのズレに悩まされることになります。
デバイスがどのフォントを適用しているかというAPIは存在しない
デバイスごとに使うフォントを変えるという対策もありますが、デバイスとインストールされているフォントはイコールではありません。
わざわざフォントを購入してインストールしているユーザーに対してフォントを強制するのは良い選択だとは言えないでしょう。
また、ユーザーがどのフォントを適用しているかによってレイアウトを変更するという手段も考えられますが私が知る限りではそのようなAPIは存在しません。
代替案として検討できるフォント
代替となるフォントはあるのでしょうかWindows環境向けのフォント選定としていくつか検討候補をあげておきます。
BIZ UD(P) ゴシック
BIZ UD(P) ゴシックはWindows 10 October 2018 Updateで追加された書体で近年のアクセシビリティに対しての関心の高まりからメイリオに代わるWindows環境でのフォントの選択肢として非常に有用です。
またGoogle Fontsでも配信されているためWebフォントとしても使いやすくWindows環境以外でもフォントの統一が可能です。
游ゴシック
游ゴシックはMac/Windows共に採用されているフォントのため採用しているサイトなども多いです。
しかしながらこのフォントはWindowsでは「游ゴシック」Macでは「游ゴシック体」として搭載されているややこしさやウエイトの微妙な違いなどがあり扱いが難しいです。
源ノ角ゴシック（Noto Sans）
Webフォントが利用可能であれば源ノ角ゴシックを採用するのがベターな選択肢であると考えます。
上記のBIZ UD(P) ゴシックや游ゴシックのよりも癖がなくメイリオの代替としては優秀です。
また、源ノ角ゴシックについてはバリアブルフォントも用意されているためより柔軟なデザインも可能です。
実際にボタンに適用した際の見た目
下記内容で実際にフォントごとにボタンを作成してみました。
| 環境 | バージョン |
|---|---|
| OS | Windows 10 64bit 21H2 |
| browser | Google Chrome 101.0.4951.64 (64 bit) |
button {
appearance: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
予想以上にフォントごとの差異が発生しています。
メイリオは説明の通りやや上方向に偏っており、BIZ UDP ゴシックではほとんど余白がなく、游ゴシックが比較的均等な余白を持ち、源ノ角ゴシックは若干下方に表示されています。
次はline-height: 1;を付与した場合を見ていきましょう。
button {
appearance: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
+ line-height: 1;
}
line-height: 1;を付与すると行間がなくなってしまうため汎用性が低くなりますが、すべてのボタンの位置が揃って見えます。
しかしながらメイリオは下部に余白があり、源ノ角ゴシックには若干上部に余白が存在します。
源ノ角ゴシックの場合はWebフォントとして各デバイスに共通のフォントが適用される前提がありますが、メイリオを指定した場合は他のデバイスとの差異を修正する必要があります。
最後に
主題とは逸れてしまいますが各フォントにはフォント内部に余白が存在することがあるため、単純にメイリオを使用しないということではなく用途に応じたフォントの使い分けやデバイス間での差異を埋めるWebフォントの導入がデザインの運用を行っていく上で重要な項目となります。
記述の間違えなどございましたらコメントもしくはGitHubから編集のリクエストをお願い致します。
Discussion