【Swift】日本語のSystem FontsでのWeightを指定するときの注意点

2024-10-02iOS, Swift, System Fonts, Typography, Xcode

はじめに

こんにちは、レコチョクでiOSアプリ開発をしている副山です。

dヒッツのiOSアプリでは、Visual Regression Testing（以下、VRT）を導入しています。Interface Builderで作成されたUIをコードベースに移植する際に、VRTを実行するとテストが失敗するケースがありました。

VRTで失敗した部分は以下のように、日本語のテキスト部分はズレが発生していなかったのに対し、英語のテキスト部分ではズレが発生するというケースになっていました。

変更前UI	変更後UI	Difference

この要因を調査したところ、System Fontsの使用に関して注意すべき点があることに気づいたため、この記事で紹介します。

VRTが失敗した原因

Interface Builderで作成されたUIのプロパティは、フォントが System Bold と設定されていました。

これをコードベースに移植する際に、以下のように実装していました。

label.font = .boldSystemFont(ofSize: 32.0)

boldSystemFont(ofSize:) はメソッド名から、Weightに Bold が設定されると考えていましたが、実際には Semibold が設定されていました。これはView Hierarchyで確認できます。

その結果、英語部分のフォントが異なり、VRTで差異が検出されました。

一方、日本語部分では Bold と Semibold のWeightを変更してもフォントに変化がないため、差分は発生しませんでした。

Semibold	Bold	Difference

フォントのWeightを正しく Bold に設定するには、以下のように systemFont(ofSize:weight:) を使用します。

let label = UILabel()

label.font = .systemFont(ofSize: 32.0, weight: .bold)

この問題を調査する中で、System Fontsの挙動についてさらに詳しく知る必要があると感じました。

したがって、ここからは調査・検証した内容について説明します。

System Fontsとは

Appleは以下2種類のSystem Fontsを提供しています。

San Francisco（SF）
デジタルディスプレイでの表示に最適化されており、視認性や可読性が高いフォントです。SFはサンセリフ体で、シンプルでモダンなデザインが特徴です。日本ではゴシック体にあたります。
New York（NY）

クラシックでエレガントな印象を与えるフォントで、長文の可読性を重視した設計がなされています。NYはセリフ体で、日本では明朝体にあたるものです。

また、上記のフォントには以下の9種類のWeightが提供されています。

UltraLight
Thin
Light
Regular
Medium
Semibold
Bold
Heavy
Black

iOSやiPadOSのSystem Fontsは、San Francisco Font Familyに内包されるSF Proが使用されています。しかし、SF Proには日本語のグリフ（文字）が含まれていません。このことは、AppleのフォントダウンロードサイトからSF Proをダウンロードして、Mac標準のFont Bookアプリから確認できます。

そのため、日本語のテキストを表示する際には、代わりにHiragino Sans（ヒラギノ角ゴシック）が使用されます。