从 SF 字体深入学习字体和排版概念

从 SF 字体深入学习字体和排版概念

由 SF 字体引出字体的一些术语和排版上的一些概念,介绍了 SF 字体在排版上提供的新功能。

San Francisco Fonts

  • SF Pro Text、SF Pro Display:iOS、macOS、tvOS(WWDC 2017 开始启用)
  • SF UI Text、SF UI Display:iOS、macOS、tvOS;
  • SF Compact Text、SF Compact Display:watchOS;
  • SF Mono(一种等宽字体,New in WWDC 2016):Code in Xcode、Terminal、Swift Playgrounds。BC65E41A-C90D-47C7-9C78-9A699C4EEE2F
    • SF 与 SF Mono7AF3BC06-7011-460D-9E7C-C47B7C7695E9
    • 等宽字体(Monospaced):不同字符有着相同的宽度0451C080-D67D-47A2-9EF4-B2451566026B

术语 Terminology

  • Text:文本,如「App」;
  • Character:字符,文本的抽象单位,可以由一个代码代表,如字母「A」;
  • Glyph:字形,如字母「A」的这个形状,人们看到这个就知道这是字母「A」,而不是其他字母;
  • Feature:功能,通常在字体文件中,字形与字符是一一对应的,但有时候有特殊,如「6」这个字符在一个字体中有两种「字形」,你可以选择其中的一种(Optional);输入两个字母,这两个字母自动连笔,形成了一个新的字形(Automatic),这都是 Feature;Font Automatic Feature
  • Font:字体(文件);
  • Style:样式,如「粗体」、「斜体」、「粗斜体」、「紧缩」;
  • Typeface:字型,样式背后的设计理念,如将字母「A」变换成各种不同的形状,但其终究还是字母「A」;
  • Typography:排版,使用字型来设置文本并给语言编码。
94B33019-6DE5-49B8-954A-C48D7A3CD680
  • Text 的关心对象:Writers,Editors;
  • Character 的关心对象:Unicode;
  • Glyph、Feature、Font、Style、Typeface 的关心对象:Type Designers,Font Manufacturers;
  • Typography 的关心对象:Typographers = You(App Developer/Designer)。

概念 Conceps

30AF7D16-B07D-4AC3-A2DC-1EF3168295E8
  • 内嵌于字体中(Embedded in the Font)
    • Spacing:空间,一个字符所占的位置,内置在字体中无法改变;
    • Kerning:字偶距,某两个字母间的距离,一般设置在字体内部,无法改变。0053A8A4-21BE-4D83-9C0D-E621D0464CE6
  • 可调整的(Adjustable)
    • Tracking:字符间距,字间距,所有字符整体调整,正值、零值、负值;4616025D-2E31-4C2D-ADAA-1FF14908BAD0
    • Leading:行距,两行的 baseline 的距离称为行距,descenders-理解为字符延伸到 baseline 下面的那部分,如小写字母 q;ascenders-理解为字符延伸到 baseline 上面的那部分,如小写字母 h。F2282DF8-6974-46A8-957E-D34D0B85F8CD
  • 参考链接:What’s the Difference Between Leading, Kerning and Tracking?
  • 影响排版的一些因素
    • 易读性(Legibility)
    • 尺寸(Scale)
    • 布局(Layout)
    • 密集度(Density)
    • 质感(Voice)

工具 Tools

  • System Font:使用系统字体只需确定字体大小和字重:UIFont.systemFont(ofSize: 34, weight: UIFontWeightBlack),每种字体大小都有预设好的字间距 tracking,开启「粗体文本」后,系统中会自动进行粗体文本转换。
  • Dynamic Type:应用在 iOS 和 watchOS,在「设置」→「显示与亮度」→「文字大小」中,「辅助功能」中还可开启「更大字体」。使用 Text Styles APIs:UIFont.preferredFont(forTextStyle:),动态类型功能会自动支持。
  • Custom Fonts:由于多为开发上的一些实际操作,暂不展开,具体步骤如下,
    1. Pick or bundle a font
    2. Lookup table for the Content Size Categories
    3. Override traitCollectionDidChange
    4. Update your fonts and paragraph style
    5. Relayout
  • Font Selection:如果你决定要使用自定义字体,那么你需要考虑:
    1. Easier sticking with one typeface at a time 从一次使用一个字型开始更容易
    2. Understanding design intention helps in usage 深度理解这些字型的设计目的
    3. Consider defaults and knobs you can turn 考虑你可以改变的那些样式,如字间距、行间距

细节 Details

  • Arrows 箭头(New in WWDC 2016):各个方向的箭头是内置于 SF 字体中的,并且同样有不同的自重,可在交互中用于指向。从 SF 字体深入学习字体和排版概念
  • High-Legibility Alternates 高易读性替换(New in WWDC 2016):对于一串字符串,如果用户不易辨别字符串中的字母到底是什么,可以使用开启这个功能,系统自动把不易辨别的字母转换为不会有歧义的字母。但这个功能不要轻易开启,会破坏文本整体的一致性。E598CEAF-F8AA-4263-BE8F-6AE726388D1B在代码中启用的示例如下:
let pointSize: CGFloat = 60.0
let systemFontDesc = UIFont.systemFont(ofSize: pointSize, weight: UIFontWeightLight).fontDescriptor()

let highLegibilityFontDesc = systemFontDesc.addingAttributes(

  [

    UIFontDescriptorFeatureSettingsAttribute:

      [

        [

          UIFontFeatureTypeIdentifierKey: kStylisticAlternativesType,

          UIFontFeatureSelectorIdentifierKey: kStylisticAltSixOnSelector,

        ],

      ]

  ]

)

label.font = UIFont(descriptor: highLegibilityFontDesc, size: pointSize)
  • Small Caps 小型大写字母:大写字母的缩小版,几乎与小写字母对齐。两个例子如下图。当觉着大写字母与周围的小写字母相比过大而显得不协调,如果仅仅调整字体大小,那会改变字符串的密集度或者说字间距,故可以开启「Small Caps」功能,保证密集度和笔画厚度,使排版美观。10C7242A-570D-4AF0-980C-94171E30D6B1在 Apple TV 上使用的一个实例:1BB0A3BB-6DC5-4A8D-BA48-08825A863171具体使用上分为以下几种类型,可以用一种,也可以用多种:
    • Small Caps from Uppercase(把大写字母转换为小型大写字母):对于一个字符串,1.全是大写,适合此功能;2.大小写混合,不适合此功能;3.全是小写,这样使用有点别扭,但也还 OK。FA47AC14-09B1-4920-9854-1060555FC0
    • Small Caps from Lowercase(把小写字母转换为小型大写字母):字符串的上述三种情况都还适合。735C71DC-DA4B-4946-828E-06A578BFB51B
    • 上述两种类型在代码中启用的方法示意如下:
let pointSize: CGFloat = 60.0
let systemFontDesc = UIFont.systemFont(ofSize: pointSize, weight: UIFontWeightLight).fontDescriptor()

let smallCapsFontDesc = systemFontDesc.addingAttributes(

  [

    UIFontDescriptorFeatureSettingsAttribute:

    [

      [

        UIFontFeatureTypeIdentifierKey: kLowerCaseType,

        UIFontFeatureSelectorIdentifierKey: kLowerCaseSmallCapsSelector,

      ],

      [

        UIFontFeatureTypeIdentifierKey: kUpperCaseType,

        UIFontFeatureSelectorIdentifierKey: kUpperCaseSmallCapsSelector,

      ],

    ]

  ]

)

label.font = UIFont(descriptor: smallCapsFontDesc, size: pointSize)
  • Small Caps Numbers and Punctuation
    1621C0AD-EADF-4D1C-92F7-A7C848B4B522

发表评论

Item added to cart.
0 items - ¥0.00