苹果旧金山字体的秘密

iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

苹果旧金山字体的秘密

iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

苹果旧金山字体的秘密

苹果旧金山字体的秘密

Helvetica(左),旧金山字体(右)

旧金山字体之前已经用于Apple Watch中,如今则成为苹果全平台的统一字体:Apple Watch、iPhone、iPad和Mac。

苹果旧金山字体的秘密

Apple Watch

从第一台iPhone起,苹果就将Helvetica当作系统字体。而且从10.10 Yosemite开始,Mac OS X系统的字体也从Lucida Grande改为了Helvetica。苹果为何抛弃Helvetica?它是全世界最著名最受欢迎的字体。

小字号Helvetica太纤弱

据说Helvetica不适合小字号使用。当Mac OS X Yosemite系统字体改为Helvetica,许多设计师声称Helvetica并不合适。

苹果旧金山字体的秘密

Helvetica糟糕透了”,Erik Spiekermann说

如果你输入小字号的Helvetica文字,你会发现易读性很低,显得模糊。有些文字交叠在一起,难以辨识。据说苹果设计出旧金山字体正是为了让小号文字在Apple Watch上更易读。

苹果旧金山字体的秘密

小号字母交叠在一起

但如今,小屏幕设备分辨率比印刷品还高,iPhone中的文字并不像Apple Watch那么小。为什么苹果把iOS、Mac OS X的系统字体都改了,而不是只用于Apple Watch?

旧金山字体不仅仅是一款字体

旧金山字体拥有许多高度易读的特征。实际上Apple Watch和iOS/Mac上的旧金山字体并不相同

字体族“SF”用于iOS/Mac,而“SF Compact”用于Apple Watch。在“o”、“e”这类圆形字母上可以看出区别。SF compact的竖线比SF更平坦。

苹果旧金山字体的秘密

苹果旧金山字体的秘密

SF与SF Compact

这点差异使得SF Compact的文字有更大的字距,从而使Apple Watch这样的小设备有较高的易读性。

而且,SF与SF Compact被划分为两套子字体族,分别称作“Text”和“Display”。这就是苹果所谓的“视觉尺寸”。Text字体用于更小的文字,Display字体更大。

苹果旧金山字体的秘密

旧金山字体族

正如我之前提过的,Helvetica这种非自然(或者说无衬线)字体,两个邻近字母会“交叠”在一起,像“a”、“e”、“s”这种字母在小字号时看起来很相似。

苹果旧金山字体的秘密

苹果旧金山字体的秘密

Display与Text字体

用于小号字的旧金山Text字体,被设计成比Display字体有着更大的字距。Text字体的字怀也更大,为了小屏幕的易读性。

旧金山字体是动态的

旧金山字体的一大特点是它动态组织文字。系统会随着字号自动切换Display/Text字体。明确地说,20pt正是这个界限。

苹果旧金山字体的秘密

设计师与开发者不用操心该用哪种字体。比如给UILabel设置系统默认字体,系统就会为你选择合适的文字。

旧金山字体有一点让我印象很深,就是它的冒号(:)的显示方式。一般情况,冒号会刚好放置在基线上,所以放在数字之间时,它并非垂直居中的。而旧金山字体中,会自动将它垂直居中对齐。

苹果旧金山字体的秘密

垂直居中的冒号

旧金山字体是为数字时代而生的字体

如你所见,旧金山字体经过了精心的设计,为了使任何字号、任何设备都易于阅读。

被旧金山字体所替代的Helvetica,1957年诞生于瑞士,那时尚没有电子设备。即使今天,Helvetica也被许多公司作为企业字体广泛运用,毫无疑问,未来它会被当作一款伟大的经典字体使用。

另一方面,旧金山字体是一款现代字体。它会根据环境动态改变文字。这是数字时代的一种“数字原住民”字体。

苹果旧金山字体的秘密

苹果旧金山字体的秘密

苹果旧金山字体的秘密

苹果旧金山字体的秘密

苹果旧金山字体的秘密

→ 字体 —苹果开发者中心

原文链接:https://medium.com/@mach/the-secret-of-san-francisco-fonts-4b5295d9a745

作者信息:Akinori Machino traveling around the world, seeking next challenge

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小伙伴们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

本文原创发布于人人都是产品经理,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32004/

(0)
CatherineCatherine
上一篇 2017-06-03 14:29
下一篇 2017-06-03 16:42

相关推荐

  • 各国货币简称及符号

      欧元,英镑,澳元,人民币,马来西亚币,印尼,新加坡币,新西兰,越南,韩币,泰铢,菲律宾,日元,美金等等货币的简称与符号,标准符号。 中国 人民币:元 Renminbi Yuan RMB¥ CNY 1CNY=10 jao (角)1 j…

    交互设计WiKi 2015-09-15
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 30个笑死人的设计【UXRen译#168】

    作者:ARMIN ZAHIROVIC   |  翻译:楠木,校审:天蛙   乔布斯曾经说过:设计不仅是看上去如何,感觉如何,而是用起来如何。 一般来说,我们喜欢展示伟大的设计,但其实从糟糕的设计中也可以学到很多。我们不认为St…

    交互专题 2017-08-07
  • 抛砖引玉——VR应用UI设计心得

    “2016是VR元年”,这一观点早已在计算机互联网行业中流行开来,与VR相关的各种分析研究也是层出不穷,包括盈利模式、发展预测、平台构建等。而随着Google Cardboard等技术逐渐普及,VR使用成本也在不断降低。因此在未来,VR技术对于日常生活的影响,也将变得非常令人期待。目前很多VR应用不在以PC端为主要载体,而是将平台选定为保有量大、技术成熟的手机作为硬件平台。而UI作为应用中一个重要组成部分,其对于用户体验和产品推广的重要性可想而知。笔者想借此机会简单分享一下个人对于VR应用UI设计的心得和体会。(注:笔者在下文中所指的VR模式指用户已经带上VR体验设备,双眼通过分屏已经进入沉浸式体验情况)

    2017-05-28
  • 你家的产品是不是什么都做?那他该不该做交互设计?

    在BAT这样的大公司中,很多产品经理是不会去做交互设计的,因为分工很细,有专门的交互设计师来负责交互。而另一种普遍的现象,在很多中小公司,是没有交互设计师这样的岗位的,交互设计工作是由产品经理来代为执行…

    2015-07-14
  • 涨姿势 | 这份交互设计纲领,已被我内定!

    最近一个月的电影市场完全被《头号玩家》支配,身边清一色的“自来水”,那票房蹭蹭涨,眼瞅着都十好几亿了!所以斯芬克趁此良机跟大家说说交互这门自带特效的技术!往期内容一览:服装设计出国学?看这一篇就够了!(点击此处查看详情)学平面设计前,给你一份须知!(点击此处查看详情)怎样做准备,才能当上室内设计玩家?(点击此处查看详情)交互设计适合你吗?我们往往会觉得,交互设计不就是做个网站、搞个APP么,最多再玩玩特效啥的……其实咧,交互可不仅仅存在...

    2018-04-27
  • 说句心里话,这5种常见的设计模式还是挺闹心的

    本文所提到的这5种设计模式确实有其恼人的一面,但是它们同样存在特定的优势。在许多设计项目中,在特定的需求之下,它们也可能是最佳的解决方案。另一方面,学会根据实际的状况来寻求优化的方案,也是设计师应当做到的事情。

    2017-04-28
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • 设计高效好用表单的10个技巧

    让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题,而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在,那么可以按照字母顺序来排布。
    以直觉的顺序组织选项。比如选项为日期的时候,按照周一周二周三这样的顺序来排布,而非乱序。
    时刻反思从用户那里获得的信息是否必要,如何使用。这样做是为了消除不必要的选项,提升完成率。

    一旦用户点击输入框,标签会消失,用户容易忘记谈需要输入的内容以及形式
    当用户看到输入框中有内容填充的时候,会误解为这个字段已经被填写而无需输入了

    2017-05-21
  • 异步交互设计漫谈:单机在这里“抄袭”了网游

      “玩家交互”作为游戏中“网络元素”的核心体现已经获得了游戏制作者与游戏玩家的普遍重视。在网络游戏中,如何让玩家获得更加自由、更加全面的交互体验成为了一款网络游戏的重要课题;而在传统意义上的单机游戏里…

    2017-08-02