白抜きの文字が二重に見えたのは、にじみではなく太さでした

「なんか読みづらい」を、数字にするまでの話です。

青地に白い太字を載せた節があります。「文字が二重になっていて読みづらい」と言われました。

最初はにじみを疑いました。macOS の既定のアンチエイリアスは、暗い背景の白文字を太らせます。

測ってみたら、違いました

40pxの白抜きを実際に描いて、塗りの面積と中間調の面積を数えました。

                              塗り     中間調（にじみ）
Hiragino Sans 700 ………………  17.48%    1.90%
Hiragino Kaku Gothic ProN 700  14.81%    1.95%
Hiragino Sans 600 ……………… 14.81%    1.92%

にじみは、どれもほぼ同じでした。変わっていたのは塗りの面積のほうです。つまり原因はにじみではなく、字が太すぎたことでした。

白抜きに太い書体を使うと、字が膨らんで潰れます。印刷で昔から言われていることが、そのまま画面で起きていました。

測り方でも2回まちがえました

1回目は document.fonts.check() で確かめようとしました。あれは何を渡しても true を返します。

2回目は字幅を測りました。日本語は太さに関係なく全角送りなので、字幅では太さが分かりません。

結局、canvas に描いてピクセルを数えるのがいちばん確実でした。

直したこと

その節だけ、日本語の実フェイスを1段細いものに当てました。font-weight は 700 のままなので、欧文の太さは変わらず、日本語だけが締まります。

大きさも色も、1つも変えていません。

前後の記事

ほかの記事

熊谷大樹が書きました

パンくずが、18本のうち13本まちがっていました

2026-08-12　/　技術

熊谷大樹が書きました

「全部にレビューを通します」と書くのを、やめました

2026-08-08　/　仕事