Qiita
You are not logged in to any team
Log in to Qiita:Team...
Community
List of all usersList of all organizatioinsAdvent Calendar
Qiitadon (β)
Community GuidelineHow to write good articles
Sign upLog in
1514755638 @usagimaru
Edited at

San Francisco フォントを探る

iOSmacosフォント

San Francisco Font Family

San Francisco はひとつの書体ではなく、SF, SF Compact などと呼ばれ、それぞれに Text, Display バージョンが存在します。Display の方が多くのウェイトを備えているのは、Text は視認性を重視した書体ゆえ、細いものは利用する想定にないからなのだと思われます。

SF vs. SF Compact

SF（無印の方）は macOS や iOS, tvOS デバイスのシステムフォントとして採用されています。SF Compact は Apple Watch のシステムフォントとして採用されています。Compact は字がより四角形に近い形をしていて、Apple Watch のような小さなデバイスでも視認しやすいようにデザインされています。

Display vs. Text

小さな文字は読みやすく、大きな文字は美しく描画されなければなりません。昨今はさまざまな大きさのディスプレイが存在しますから、それら環境ごとにフォントの課題というものも異なってくるというわけです。そのため、SF, SF Compact にはそれぞれ Display と Text の2バージョンが用意されています。

Text は小さな文字でも読みやすいよう字間や太さが調整されていますが、これを見出しなどに用いると逆にそれらが悪く目立ってしまい、美しさを損なってしまいます。そこで、システムフォントでは小さなテキストには Text, 大きなテキストには Display を用いるように自動的に切り替える仕組みになっています。20pt 以上のテキストには Display、それ未満には Text という具合です。
macOS/iOS ネイティブアプリでシステムフォントを利用しているなら自動的に行われる処理ですが、Sketch などのスクリーンデザインの現場ではこのことをデザイナーが意識する必要があります。

  • SF Pro Display – 20pt 以上の大きなテキスト向け。これをそのまま縮小表示すると字が詰まって読みづらい
  • SF Pro Text – 20pt 未満の小さなテキスト向け。Display よりも可読性に優れるが、これをそのまま拡大表示するとあまり美しくない
  • システムフォント – 特定の書体ではない。複数のメタフォントを内包し、状況に応じて自動的に切り替わる。メタフォントはよく .AppleSystemUIFont などと呼称されるが、固定値ではないためこれを直に利用してはならない。macOS や iOS ではユーザーインターフェイスに「システムフォント」を採用する

SF Pro vs. SF UI

San Francisco 書体がいつの間にか SF Pro と名乗るようになっていて、当初の SF UI ** はどこ行ったんだ？ と疑問に思っていました。実際のところよくわかっていませんが、SF は細かくアップデートを重ねており、それがいつの時期からか SF Pro と名乗るようになったのだと思われます。SF UI は旧版です。Font Book.app で確認してみると、SF UI の方のコピーライトは 2015 でバージョン11系のBETA表記、対して SF Pro の方は 2015-2017 でバージョン13系の正式版となっているので、SF Pro を使いましょう。

SF Pro も何度かアップデートされているようなので、WWDC 後くらいになったら Apple の San Francisco フォントのページで提供される SF Pro を入れ直すと良いでしょう。

SF Mono

Xcode や Terminal.app で利用できる等幅の SF です。コードの可読性が良くなるようにデザインされています。見たところ、これは SF Compact がベースになっているようです。

SF Mono はフォントファイルとしては公に提供されているわけではありませんが、Xcode.app あるいは Terminal.app のパッケージの中を掘ればフォントファイルが見つかるので、これらを macOS のフォントディレクトリーに（自己責任で）インストールすれば他のアプリでも利用できるようになります。

Xcode.app/Contents/SharedFrameworks/DVTKit.framework/Versions/A/Resources/Fonts/

Terminal.app/Contents/Resources/Fonts/

SF Pro JP

Apple の web ページに使われている一部の日本語は SF Pro JP という Web フォントです。
Apple はこっそりと日本語書体の San Francisco 化を進めているようですが、現在のところ公に otf / ttf ファイルでは提供されていません。これの見た目は AXIS にそっくりです。

この Web フォントの元のファイルを無理やりに落としてきて macOS にインストールを試みましたが、フォントファイルが壊れていて使い物にはなりませんでした。

ウェイト

ウェイトの種類は次の通りです。Cocoa では NSFont.Weight、Cocoa Touch では UIFont.Weight として定義されています。

  • Ultra Light （極細）
  • Thin
  • Light
  • Regular （通常）
  • Medium
  • Semibold
  • Bold
  • Heavy
  • Black （極太）

ただし、SF Pro Text の場合には上の Family Tree の画像が示すように次のものに限ります。

  • Light
  • Regular
  • Medium
  • Semibold
  • Bold
  • Heavy

ウェイト指定でシステムフォントを得るには、次のようにします。

macOS
let font = NSFont.systemFont(ofSize: 20, weight: NSFont.Weight.light)
iOS
let font = UIFont.systemFont(ofSize: 20, weight: UIFont.Weight.light)

NSFont または UIFont オブジェクトからウェイト情報を得るには、いったん CTFont にキャストしてからその情報を抽出します。CTFont と NSFont, UIFont は toll-free bridge の関係にあるので、このようにとても簡単にキャストすることができます。

macOS
let ctFont = font as CTFont
let traits = CTFontCopyTraits(ctFont) as Dictionary // CFDictionary もまた Dictionary にキャストできる
if let weightNum = traits[kCTFontWeightTrait] as? NSNumber {
    let weight = NSFont.Weight.init(CGFloat(weightNum.doubleValue))
  ...
}

Tracking

「システムフォント」と SF Pro Display / SF Pro Text をならべてみても、それらの字間が異なることに気付くかと思います。システムフォントでは Tracking と呼ばれる Kerning に似た字間の調整が独自に行われています。Tracking の値はポイントサイズに応じて個別に定義されており、その Tracking Table は Apple からも提供されています。

iOS HIG に SF の Tracking Table が記載されています。また、表記自体は消失しているようですが、かつて San Francisco フォントのページに Tracking 対応表 (iOS & OS X Tracking Chart) なるファイルのリンクが存在していました。リンクはまだ生きているのでここに記載しておきます。

Human Interface Guidelines - Typography
https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

iOS & OS X Tracking Chart
https://developer.apple.com/fonts/downloads/iOS-OSX.zip

Tracking → Character Spacing

Tracking の値をそのまま利用できない環境もあるかと思います。例えば Sketch では Character Spacing という項目になっています。

次の記事によると、Tracking と Character Spacing の変換は単純な計算式によって行うことができます。

http://devsign.co/notes/tracking-and-character-spacing
I created lots of PSDs and Sketch files, comping up different tracking values and character spacing values, and doing pixel comparisons to figure out what lined up. Once I found a match between tracking, character spacing, and font size, I put it in a spreadsheet and worked out some theories as to how the two were related - and after a bit of algebra, I found that it was actually a very simple relationship:

characterSpacing = fontSize * tracking / 1000

Tracking を直接扱うことができない場合には、この式を使って Character Spacing の値を割り出す必要があります。

システムフォント vs. SF Pro Display vs. SF Pro Text

実際に「システムフォント」、SF Pro Display、SF Pro Text とで結果にどのような違いがあるのか、簡単な macOS アプリを作って実験しました。

20pt 付近では、システムフォントと Display, Text それぞれの差が一番大きく現れます。T eの字間に注目すると、19pt から 20pt で Text だったのが Display に切り替わっていることがわかります。
そして、小さくなるほどシステムフォントと Text の差が縮まってゆき、目視でおよそ 12pt に達すると両者一致します。逆に大きくなるほどシステムフォントと Display の差が縮まってゆき、目視でおよそ 78pt で両者が一致しました。

この結果が意味するのは、システムフォントというのは SF Pro Display とも SF Pro Text とも異なる書体だということです。20pt で切り替わるルールを考慮したとしても、フォント名に SF Pro Display を指定してテキストを描画した場合は macOS や iOS ネイティブのそれとは異なる結果になってしまうでしょう。

このことは Sketch でも同様でした。システムフォントの描画を実現させられるSketch プラグインを自作し、これと同様のことを試してみましたが、やはりシステムフォントというのは SF Pro ** とは異なる Tracking が適用されました。

SF のさまざまな機能を呼び出す

SF にはあまり知られていない多くの機能が備わっています。これらは Typographic Features, Font Features とも言います。

例えば数字で囲ったコロン : を中央に寄せて見栄えを良くする機能もその一つです。

TextEdit.app でタイポグラフィ機能を手動操作する

TextEdit.app でなくても良いのですが、Cocoa が提供するタイポグラフィの機能を備えており、かつリッチテキストを扱える身近なエディタだったのでこれを採用しました。

フォントパネルの歯車メニューから「タイポグラフィ…」を選択すると、その書体が持つさまざまな機能の一覧を表示することができます。

以下にいくつかご紹介します。

等幅数字

「等幅数字」にチェックを入れると、数字が等幅になります。日付や時刻、容量の表記などに使うと良いでしょう。


刻々と変化する数値は等幅の方が見栄えが良い。

記号類を大文字の縦中央に合わせる

「大文字の字形」は、x-height に合わせられている記号類を大文字に合わせてくれるものです。

上付き文字／下付き文字／a→ɑ

数式や化学式で用いられる小文字を表せます。また、a の右側がまっすぐな ɑ の字形にも対応しています。

NSFont / UIFont で Font Features を利用する

NSFontDescriptor / UIFontDescriptor にはフォント属性を追加適用する API が備わっているので、これを利用します。

例えば、システムフォントに等幅数字の属性を追加するには次のようにします。

macOS/Cocoa
let size: CGFloat = 20.0
let systemFont = NSFont.systemFont(ofSize: size, weight: .regular)
let descriptor = systemFont.fontDescriptor()
let monoDigitDescriptor = descriptor.addingAttributes(
  [
    NSFontDescriptor.AttributeName.featureSettings : [
      [
            NSFontDescriptor.FeatureKey.typeIdentifier : kNumberSpacingType,
            NSFontDescriptor.FeatureKey.selectorIdentifier : kMonospacedNumbersSelector,
      ]
    ]
  ]
)

let monoDigitSystemFont = NSFont(descriptor: monoDigitDescriptor, size: size) ?? font

typeIdentifier, selectorIdentifier のペアごとに一つの配列を用意し、それを必要なだけ格納した配列を NSFontDescriptor.AttributeName.featureSettings をキーとして渡します。

typeIdentifier に対しては規定の属性名を表すキー、 selectorIdentifier に対しては規定のセレクタを渡します。これについては About Apple Advanced Typography Fonts - Font Feature Registry もしくは ATSUI の Font Features に関するガイドがとても役立つでしょう。これらは AAT (Apple Advanced Typography) として TrueType の独自拡張として用意されたテーブルです。旧 Mac OS の QuickDraw GX の後継機能として開発され、Carbon でも利用された ATSUI (Apple Type Service for Unicode Imaging) に組み込まれました。AAT に関するリファレンスは現在の CoreText (SFNTLayoutTypes.h) にもあるので、ATSUI のガイドにあるキー名や効果はほぼ変わっていません。また、これらのドキュメントには実際の効果が画像付きで紹介されているので、とても有用だと思います。

SFNTLayoutTypes.h に記載されているキーが全て有効というわけではなく、フォントに備わっているもののみが効果があります。ヒラギノなら SF では利用できなかった日本語に関する属性が利用できます。先ほど紹介した TextEdit.app で効果を試す方法でなら、そのフォントが備える属性をタイポグラフィパネルに一覧することができます。


タイポグラフィパネル

ここにある代替スタイルセットは kStylisticAlternativesType です。フォントにはグリフの異なる字形を代替するためのスタイルがあらかじめ用意されていて、好きに組み合わせて利用することができます。そのスタイル名は One, Two, Three といった具合にただの連番にしかなっていないため、一つひとつ手探りで効果を確認する必要がありました。
（スタイル名を取得する方法がまだわかっていません。おそらくは TrueType や OpenType の API を操作する必要があるのかもしれません。）

スタイル名 効果 セレクタ名
Straight-sided six and nine 直線の6, 9にする kStylisticAltOneOnSelector
Open four 開いた4にする kStylisticAltTwoOnSelector
Vertically centered colon コロン : を中央寄せにする kStylisticAltThreeOnSelector
High legibility 見やすくする。直線の6, 9、開いた4、斜線の0、ハネ付きの l など kStylisticAltSixOnSelector
One storey a a を右側がまっすぐな ɑ にする kStylisticAltSevenOnSelector

数字に囲まれたコロンを中央配置にする機能は、コンテクスト代替と呼ばれるものに組み込まれています。タイプのキーは kContextualAlternatesType です。これはデフォルトで有効なので、もしも無効化したいなら明示する必要があります。

スタイル名 効果 セレクタ名
（なし） 「数字に囲まれたコロンを中央配置にする」を無効化する kContextualAlternatesOffSelector

OpenType では ss01 〜 ss20 といった具合に同等の仕組みが利用できるようです。Adobe の記事 CSS での OpenType 機能の構文 に書かれている「デザインのセット」のことです。

参考資料

Report article

Help us understand the problem. What is going on with this item?


Feedback

We don't reply to any feedback.
If you need help with Qiita, please send a support request from here.