先に結論
- 明朝・丸ゴシック・手書きの3書体を、9月に測った極太ゴシック（Dela Gothic One）と同じ言葉・同じ方法で測りました。
- インクの量は、丸ゴシックが極太ゴシックの0.92倍、明朝が0.59倍、手書きが0.54倍でした。
- 明朝と手書きは、小さくしても潰れませんでした。一覧で14pxの「顔置」に残る白は、極太ゴシックの14%に対して、明朝65%・手書き51%でした。
- その代わり、線が消えかけます。明朝の横線は縦線の6分の1ほどで、一覧で16pxの字なら0.4pxです。 字の大きさの16%の縁取りを付けると、細い線も黒い縁に囲まれて形が残りました。
比べた4書体
4つとも Google Fonts で配布されていて、SIL Open Font Licenseなので、商用の画像に使えます。 サムネるで段ごとに選べるのも、この4つです。
| 書体 | 種類 | 太さ（ウェイト） |
|---|---|---|
| Dela Gothic One | ゴシック | 1つだけ（もともと極太） |
| Noto Serif JP Black | 明朝 | Black（いちばん太い） |
| M PLUS Rounded 1c Black | 丸ゴシック | Black（いちばん太い） |
| Yusei Magic | 手書き | 1つだけ |
実測：同じ言葉で、インクの量を数えた
同じ言葉「見た目が9割」を、同じ大きさ（200px）で4つの書体で描き、字面の箱の中で黒い画素が占める割合を出しました。
| 書体 | 字面の箱に占めるインク | Dela Gothic One を1としたときの黒い画素の数 |
|---|---|---|
| ゴシック | 68.5% | 1.00 |
| 明朝 | 35.1% | 0.59 |
| 丸ゴシック | 56.1% | 0.92 |
| 手書き | 37.2% | 0.54 |
明朝はいちばん太い Black を選んでも、極太ゴシックの6割に届きません。手書きも同じくらいです。 丸ゴシックは9割あり、9月に測った M PLUS 1p Black（56.5%）とほぼ同じ太さでした。
明朝と手書きは、小さくしても潰れない
画数の多い2字「顔置」を、一覧での大きさが 11 / 14 / 20 / 31px になるように描き、字面の箱に残っている白の割合を数えました（小さいほど潰れています）。 一覧での大きさは、1280×720 でつくった字を幅360pxに縮めたときの値です。
| 書体 | 11px | 14px | 20px | 31px |
|---|---|---|---|---|
| ゴシック | 20% | 14% | 18% | 24% |
| 明朝 | 68% | 65% | 62% | 55% |
| 丸ゴシック | 31% | 28% | 36% | 30% |
| 手書き | 62% | 51% | 52% | 48% |
極太ゴシックは14pxで白が14%まで減りましたが、明朝と手書きは半分以上が白のままでした。 線が細いぶん懐（線と線のあいだの白）が広く、小さくしても「顔」「置」の内側が埋まりません。 丸ゴシックはその間で、どの大きさでも3割前後でした。
その代わり、細い線が消えかける
潰れない代わりに、線そのものが細くなります。 横線と縦線が1本ずつの「十」を200pxで描き、横線と縦線の太さ（黒が続く長さ）を測りました。 字の大きさに対する割合と、一覧で16px（1280×720で56px）・28px（100px）の字にしたときの太さです。
| 書体 | 横線 | 縦線 | 一覧16pxの字で（横・縦） | 一覧28pxの字で（横・縦） |
|---|---|---|---|---|
| ゴシック | 20.5% | 24.0% | 3.3px・3.8px | 5.7px・6.7px |
| 明朝 | 2.5% | 16.0% | 0.4px・2.6px | 0.7px・4.5px |
| 丸ゴシック | 17.0% | 20.0% | 2.7px・3.2px | 4.8px・5.6px |
| 手書き | 5.5% | 13.0% | 0.9px・2.1px | 1.5px・3.6px |
明朝の横線は縦線の6分の1ほどしかなく、一覧で16pxの字では0.4px、28pxの大きい字でも0.7pxでした。 手書きも、16pxの字では横線が1pxを切ります。 画面の1画素より細い線は画素の一部しか塗られないので、白い字なら、背景との差が小さい薄い線になります。
縁取りで、細い線を支える
右の列のように、字の大きさの16%の黒い縁取りを付けると、細い横線も黒い縁に囲まれて、形が残りました。 縁取りは字の下に描いているので、字の白い部分は細くなりません。
サムネるは、はじめは文字の後ろに板を敷かず、この16%の縁取りで読ませています。 明朝や手書きを選んだ段も同じです。
同じサムネで比べる
同じ背景・同じ文字・同じ型で、書体だけを変えた4枚です。 サムネるの本番で、背景をそのままにして書体だけを変えてつくりました。文字の縁取りは字の大きさの16%です。
ゴシック
明朝
丸ゴシック
手書き
書体は段ごとに選べるので、1段だけ変えることもできます。下は、2段目「石垣だけ」だけを明朝にした1枚です。
ほかの題材で
サムネるの本番でつくった、ほかの2枚です。
今日からできること
- 明朝や手書きは、縁取りとセットで使う。この記事では、字の大きさの16%の縁取りで細い線の形が残りました。
- 小さい段は、ゴシックか丸ゴシックにする。一覧で16px前後になる段では、明朝の横線は1pxを切ります。
- 大きい段だけ書体を変える。1段目だけ明朝や手書きにして、ほかの段はゴシックのまま、という分け方もできます。
- 決める前に、一覧の大きさで見る。見え方チェックで、一覧に並ぶ大きさで確かめられます。