零弐壱蜂

[iOS 17] 太くなったfont-weightを以前のiOSに揃える方法

iOS 17からfont-weightのnormal（400）が太くなった

開発者としてはfont-weight: 600から太くなることを想定していた箇所が、iOS 17になるとfont-weight: 400から太くなるようになってしまい、見た目が以前と変わってしまっている。

iOSのfont-weight
iOS 16のfont-weightiOS 17のfont-weight

追記：iOS 17.4で太さが元に戻った

iOS 17.4のfont-weight

font-weightの太さの対応

MDNによると以下のような太さ名に対応している。

値太さ名
100Thin （Hairline）
200Extra Light （Ultra Light）
300Light
400Normal （Regular）
500Medium
600Semi Bold （Demi Bold）
700Bold
800Extra Bold （Ultra Bold）
900Black （Heavy）
950Extra Black （Ultra Black）

これを見ると、iOS 17で400が太くなってしまうのは開発者にとってはやや想定外である。

なぜフォントが太くなってしまうのか

Hiragino Sansの対応を当てはめると以下のような対応になる。

値iOS 16iOS 17
100W3W3
200W3W3
300W3W3
400W3W5
500W3W5
600W6W6
700W7W7
800W7W8
900W7W8

iOS 16以前の場合、font-weight: normalはW3で表示され、iOS 17からはW5で表示されるようになったため、これまでと比べて太くなった。

font-family: sans-serifを指定している場合

font-family: sans-serifを指定している場合は、どういうフォントが指定されるのか。これは HTML によって変わる。

<html lang="en">の場合は、「San Francisco」が適用されるため、iOS 17でnormal（400）指定の文字が太字にはならない。一方で<html lang="ja">の場合は、「Hiragino Sans」が適用されるため、iOS 17でnormal（400）指定の文字が太字になってしまう。

解決方法

新旧のiOSでフォントの太さを整える方法として、以下の3つが考えられる。

  • font-weightを変更する
  • font-familyを変更する
  • ウェブフォントを利用する

font-weightを変更する

iOS 17の場合、font-weight: normal（400）が太字になるのであれば、font-weight: 300に変更することで、iOS 16以前と同じ見た目になる。

ただ、iOS以外の環境を考慮するとHiragino Sans以外のフォントが適応される可能性もあるため、影響範囲をiOS 17に限定するような指定をした方が良いだろう。

仮に300にW2を適用されるようなことがあれば、また調整が必要になる懸念はある。

font-familyを変更する

<html lang="ja">とfont-family: sans-serif;の組み合わせ、もしくはfont-family: 'Hiragino Sans';の指定の場合、太くなる。Hiragino Sans以外のフォントを指定することでiOS 16以前と同じ見た目にできる。この場合、ヒラギノフォントの見た目にしたい場合は、font-family: 'Hiragino Kaku Gothic ProN', sans-serif;のように指定すると良い。

fontiOS 16iOS 17
sans-serif
Hiragino Kaku Gothic ProN
Hiragino Sans

もともとのフォント指定がHiragino Sansのようなバリエーションを期待しておらず、Hiragino Kaku Gothic ProNの想定だった場合は、Hiragino Kaku Gothic ProNを指定する形で良い。
ほぼ変わらないものの、Hiragino Sansと同等ではない点を気を付けて指定する必要がある。

ウェブフォントを利用する

ウェブフォントを利用することでユーザーの環境にかかわらず同じフォント表示を提供できる。

どうしてもヒラギノフォントを利用したい場合は、Fontplusが提供しているものがある。

https://fontplus.jp/font-list/hirakakupron-w6

この場合、有償かつウェブフォントのパフォーマンスの課題もあるのは留意しておきたい。

個人的な見解

iOS 17のfont-weight: normal（400）はたしかに太く見えるが、W5（normal）とW7（bold）で差があり、過去バージョンと比較しない限り大きな違和感はない。さらに400がやや太くなることによって、300以下を細く表現できるため、タイポグラフィのメリハリが付くようにはなっている。

対応が必要であれば仕方がないが、無理に対応する必要はないように個人的に思う。

参考