iOSのTypographyについて少し調べる

The details of UI typographyをみると良さそう。

文字はフォントサイズを変えるだけと大抵の人は考えるが、テキストサイズを変えると様々な結果が生まれる。オプティカル・サイズについて学ぶことでレジビリティ(読みやすさ)をより理解できる。

システムフォントのSan Franciscoが開発された時の話。全てのサイズで見た目が良いことを目標とした。SF Text(20ポイント未満)とSF Display(20ポイント以上)の2つのバリアントで目標を達成した。これがオプティカル・サイズでより文字が読みやすくなる。文字の間隔や縦の比率など読みやすいように調整されている。

オプティカル・サイズは活版印刷の時代から存在する。当時は小さいサイズでは手作業の過程で凸凹になってしまっていた。出力の種類に関係なくオプティカル・サイズの変化は読みやすさと細部のバランス。SF TextとSF Display同様文字間隔が読みやすさのキーポイントになる。オプティカル・サイズの目的は読みやすさ美しさのバランスをとり、どの縮尺でも一貫性がある快適なデザインを実現すること。

デジタルの時代では複数サイズに適応したフォントも作れるが、作業が大変で使いづらいフォントファミリーになってしまう。そのためSan Franciscoでは熟慮した結果2つのオプティカル・サイズを持つことにした。OSは2つのサイズ(<20と≧20)を自動で切り替えることができる。

SF TextとSF Displayのオプティカル・サイズの自動切り替えはここ数年プラットフォーム最先端の機能だった。しかしTextとDisplayを切り替えずとも1つのフォントが各サイズに自動で適応すればすばらしい。これは2016年にVariable Fontsで実現し発表された。(既存フォントフォーマットに限界を感じてOpenType仕様を発展させたもの)

このフォーマットはグリフの収録方法を変えた。グリフはもはや単一の静的な描画であることに限定されず、各ポイントが移動して関連するが異なるグリフを生成する方法を記述することもできる。これらの挙動をソフトウェアでコントロールできる。これによりSF Proをアップデートし既存のオプティカル・サイズを改良できた。この挙動の可能性はセリフ体のNew Yorkで示される。可変オプティカル・サイズのおかげで縮尺に完璧にあった書体をデザインできるようになった。

これにより個別のフォントとしてのオプティカル・サイズから1つの可変フォント(weightも統合される)のダウンロードが可能になった。が引き続き個別のフォントも利用可能。

コードではこの挙動は自動。

トラッキングの話。文字間隔を取り、それを調整するのをトラッキングと呼ぶ。トラッキングとカーニングは違う。カーニングは文字と文字の調整だけで書体デザイナーが調整し、開発者が触ることはほぼない。

システムフォントの挙動を再現するにはトラッキングの理解が重要、SFは可変フォントになったので17〜28ポイントの間でTextからDisplayに移行する。

文章が途切れている時にカーニングのAPIでの解決は理想的ではなくトラッキングAPIの方が正しい。
トラッキングAPIでは合字を含む単語で合字を切り離して文字間隔を調整することが可能。しかし最良の解決策は自動的に間隔が狭くなること(SwiftUIではallowsTighteningを利用)、このAPIでは読みやすい範囲でシステムが文字列を調整します。3rd partyのフォントもトラッキングする仕組みの話。

次はlineHeightの話、lineHeightはフォントの縦方向の幅。ベースラインの間を測る方法もあるがどちらも長さは同じ。2つのlineHeightの間のスペースをレディングと呼ぶ(leadingの語源は活版印刷の行間にいれた鉛(lead)から)。注意点として行の間にレディングがある場合はlineHeightにはレディングも含まれる。これらは相互に依存関係にあるため一方を変えると一方が変わる。大部分のUIではレディングとlineHeightは設定済み。

アラビア語による記述は上下に長さがあるためレディングを加えるのが良い場合がある。Apple Platformではいくつかのローケールやアラビア語などでレディングを増やしている。

watchOSではスペースが限られているため狭いレディングを適用している。

次はテキストスタイルとDynamicTypeの話