[iOS 17] 太くなったfont-weightを以前のiOSに揃える方法
iOS 17からfont-weightのnormal（400）が太くなった
開発者としてはfont-weight: 600から太くなることを想定していた箇所が、iOS 17になるとfont-weight: 400から太くなるようになってしまい、見た目が以前と変わってしまっている。
| iOS 16のfont-weight | iOS 17のfont-weight |
|---|---|
 |
 |
追記：iOS 17.4で太さが元に戻った
iOS 17.4で太くなる現象が修正された。
font-weightの太さの対応
MDNによると以下のような太さ名に対応している。
| 値 | 太さ名 |
|---|---|
| 100 | Thin （Hairline） |
| 200 | Extra Light （Ultra Light） |
| 300 | Light |
| 400 | Normal （Regular） |
| 500 | Medium |
| 600 | Semi Bold （Demi Bold） |
| 700 | Bold |
| 800 | Extra Bold （Ultra Bold） |
| 900 | Black （Heavy） |
| 950 | Extra Black （Ultra Black） |
これを見ると、iOS 17で400が太くなってしまうのは開発者にとってはやや想定外である。
なぜフォントが太くなってしまうのか
Hiragino Sansの対応を当てはめると以下のような対応になる。
| 値 | iOS 16 | iOS 17 |
|---|---|---|
| 100 | W3 | W3 |
| 200 | W3 | W3 |
| 300 | W3 | W3 |
| 400 | W3 | W5 |
| 500 | W3 | W5 |
| 600 | W6 | W6 |
| 700 | W7 | W7 |
| 800 | W7 | W8 |
| 900 | W7 | W8 |
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;のように指定すると良い。
| font | iOS 16 | iOS 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以下を細く表現できるため、タイポグラフィのメリハリが付くようにはなっている。
対応が必要であれば仕方がないが、無理に対応する必要はないように個人的に思う。