UIタイポグラフィーの詳細 〜その1〜 – WWDC2020

Session概要

Optical sizesについて

• SF Text: 20pts未満のフォントサイズ
• SF Display: 20pts以上のフォントサイズ
• 上記のようなフォントサイズによる切り分けをしても読みやすさと見た目が釣り合うようなサイズをOptical sizeと呼ぶ
  • Optical sizeにより縮尺に合った書体をデザイン可能
• 切り分けによるメリットは文字の可読性向上
  • それぞれのサイズに合わせて文字間隔を変更可能
  • 縦の比率の差異。同じサイズでもSF Textの方が少し大きいため、小さいフォントサイズでも読みやすくなる
• 文字が小さくなると、見分けやすくするために文字間隔がより必要となる
• 文字の形
  • 文字の細い部分はサイズが小さくなると、目立つ必要がある
    
    

Variable fontsについて

• TextとDisplayを切り替えなくても1つのフォントが各サイズに自動で適応するフォントサイズ
  • OpenTypeの仕様を発展させたもの
• 今年の改良点
  • 個別のフォントとしてOptical sizeから変わる
  • Optical sizeだけでなくウェイトも統合される
• コードではOptical sizeとpoint sizeを自動で同期させており、システムフォントに適応する
  • Optical sizeに適応していれば、カスタムvariable fontにも適応する

Trackingとleadingについて

Trackingとは

• サイズごとのタイポグラフィーに不可欠な要素で、文字間隔を取りそれを調整するのをTrackingと呼び、レイアウトでグリフの間にスペースを入れることを指す
  • サイドベアリング：グリフの描画でデザインされ、デフォルトの間隔を決める
  • カーニング：文字と文字の間の調整を行うこと
• SF TextやSF Displayのように、サイズごとにスペースを調整する時でもTrackingならうまく調整可能
  • Trackingを使わず、20ptでフォントを切り替えるとSF TextとSF Displayのスペースの違いが問題になる
  • 特にSF TextとSF Displayでデフォルトのスペースが異なるため、SF TextとSF Displayの境目のフォントは同じ長さだがpoint数が異なり読みにくさがあるため、trackingが適用されている
  • trackingの適用範囲はTracking Tableで公開されている
  • ただしSF proがvariable fontになったことで、20pt（境目）に大きな変化はない
• SF pro を使用する場合は、17〜28ptのトラッキングの値の新しいセットを適用する
• フォントには複数のTracking Tableがあり、Trackingの値を与えることで文字列の調整が可能となる
  • 文字が途切れている場合は、カーニングを行うのではなくtrackingを使用する方が意味的に正しく、タイポグラフィーの特徴の使用を停止できる
  • 合字のある単語をカーニングAPIでTrackingすると、合字は残り単語のリズムが崩れるが、Tracking APIは文字の間隔を均等にしつつ合字を切り離すことが可能
    
    

// Trackingの適用サンプル

// UIKit
label.attributedText =
    NSAttributedString(string: "hamburgefonstiv",
        attributes: [kCTTrackingAttributeName as NSAttributedString.Key: -0.5])

// SwiftUI
Text("hamburgefonstiv").tracking(-0.5)


// 自動的に文字間隔を狭くするサンプル
// UIKit: UILabel
label.allowsDefaultTighteningForTruncation = true

// AppKit: NSTextField
textField.allowsDefaultTighteningForTruncation = true

// SwiftUI
Text("hamburgefonstiv").allowsTightening(true)

Line height

• Line heigthとは、フォントの縦方向の幅のことで、ベースラインの間を測っても構わない
• アラビア語などの高いLine heightの言語ではプラットフォーム側でleadingを増やしている　
  
  

Leading

• Lineの間の距離が増加し、その間のスペースがLeading