等幅フォントをつかっていても、エディタで半角と全角の文字では、幅が噛み合わないことがあることがわかった。
その原因の一つに、フォントのサイズがあることがわかったので、知ったことを共有したい。
半角と全角の比率は、フォント次第
まず、大前提として、等幅フォントでも半角と全角の比率はフォント次第というのがある。
等幅フォントは、半角2文字に対して全角1文字のイメージがあったが、そんなことなかった。
Fira Codeは、半角5文字に対して、全角3文字。
Source Han Code JPは、半角3文字に対して、全角2文字。
Ricty Diminishedは、半角2文字に対して、全角1文字。
まとめると、このようになる。
| フォント | 比率 |
|---|---|
| Fira Code | 5:3 |
| Source Han Code JP | 3:2 |
| Ricty Diminished | 2:1 |
フォントサイズによって、幅が噛み合わないことがあった
Fira Codeはフォントサイズが5の倍数のときに幅が整う。
FiraCodeでも同様の現象が。FiraCodeは半角5:全角3の比率なので、フォントサイズを5の倍数にするときれいに整う。 pic.twitter.com/E0d1tZgQoU
— suin❄️PHPでオブジェクト指向 (@suin) 2018年12月7日
Source Han Code JPはフォントサイズが3の倍数のときに幅が整う。
一方、Source Han Code JPは、全角3:半角2の比率なので、フォントサイズは3の倍数にするときれいに整うことがわかった。 pic.twitter.com/g8DFJ39FHI
— suin❄️PHPでオブジェクト指向 (@suin) 2018年12月7日
Ricty Diminishedはフォントサイズが2の倍数のときに幅が整う。
Ricty Diminishedは、半角2:全角1の比率なので、フォントサイズは2の倍数にすると整う。 pic.twitter.com/xNKtQYpPgA
— suin❄️PHPでオブジェクト指向 (@suin) 2018年12月7日
以上の結果をまとめると次のようになる。
| フォント | 比率 | 幅が整うフォントサイズ |
|---|---|---|
| Fira Code | 5:3 | 5の倍数(10, 15, 20, 25, ...) |
| Source Han Code JP | 3:2 | 3の倍数(12, 15, 18, 21, ...) |
| Ricty Diminished | 2:1 | 2の倍数(10, 12, 14, 16, ...) |
このことをツイートしたら、 @iteman から、Rictyは「既知の問題」にあがってることを教えてもらった。
半角文字と全角文字の横幅比が 1:2 にならないことがあります。ピクセル値 (px) が偶数でないとき、どのフォントでも起こりうる問題です。一般的な 96 DPI のフォントレンダリングでは 9 pt、10.5 pt、12 pt、13.5 pt、15 pt など、1.5 の倍数を指定すると 1:2 で表示されます。
「どのフォントでも起こりうる問題です」まさにこれが当てはまった。
比率とフォントサイズは関係している
さっきの表を見てみると気づくことがある。「半角に対する全角の比率」と「幅が整うフォントサイズが何倍の値か？」は同じ値であるということ。
| フォント | 比率 | 幅が整うフォントサイズ |
|---|---|---|
| Fira Code | 5:3 | 5の倍数(10, 15, 20, 25, ...) |
| Source Han Code JP | 3:2 | 3の倍数(12, 15, 18, 21, ...) |
| Ricty Diminished | 2:1 | 2の倍数(10, 12, 14, 16, ...) |
つまり、等幅フォントで日本語がきれいに出るフォントサイズの設定は、半角に対する全角の比率の値の倍数にするといいということだ。