苹果旧金山字体的秘密

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

相关推荐

  • 用户体验设计流程与文档编制指南

      文档编写有助于产品的概念形成、设计、创造和性能衡量。但是,编写文档的目的不应单单是为了产品维护。毕竟书面上的东西再多也没法跟真正的产品体验相提并论。 正如简约用户体验倡导者Jeff Gothelf在Smashin…

    2014-11-20
  • 蘑菇街App改版设计总结

    新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

    2017-05-12
  • 交互——浅谈“什么是好的社交产品?”

               最近密集参加了几场和社交有关的活动,引发了一些思考。就如同大部分投资人认为的一样,社交领域是一个进入门槛很低的领域,似乎任何人都可以进来试试。其实这句话的背后,有3个深层次的意义: 1. 投社…

    2015-04-05
  • iOS和Android规范解析:提示框(Toast)对比

    在交互设计稿中Toast是其中很常用的一种用户反馈手段,但是作者却发现在iOS中根本没有toast这种部件,那么在设计该如何处理呢?一起来看看作者的解读。Snackbars包含一行与进行的操作直接相关的文案(文案前不可有icon)。它可以包含一个操作。Toast优先适用于系统提示。它也在屏幕下方出现,但是不能被划出屏幕外(而被清除)。潜移默化地将状态改变或者其它类型的反馈放进你的界面中。理想的情况是:用户可以不用进行操作或者被打扰,就能得知重要的信息。
    Unobtrusively integrate status and other types of feedback into your interface.Ideally, users can get important information without taking action or being interrupted.

    2017-05-05
  • 怎样绘制用户体验地图

    内容来自梁宁老师的《产品思维30讲》,这里是第17讲的笔记。怎么画用户体验地图1.完整的用户角色:需要对「第一只羊」有完整地了解。 (「第一只羊」的话题留在下次介绍)2.清晰的目标和预期:清晰描述用户的目标和预期,他为什么来到你的草地上?他要什么?比如,用户买钻孔机,但是他的目标不是拥有钻孔机,而是需要在墙上打个洞。比如吃饭,用户目标是吃饱?还是想要营造气氛?还是想获得一次交流机会?搞清楚用户的目标和预期到底是什么。3.服务触点:用户从...

    2018-04-01
  • 交互设计师的60日计划之第七天

    心情由好转糟,由糟转好的一天。 20150803 每次跟老大过方案都深深的意识到自己的不足上周基本已经敲定的方案等这周老大回来拍板,跟老大一过就是一堆问题。你的交互稿是要怎么看?跳转关系是怎么样的?这个图文混…

    交互专题 2015-08-20
  • 由爱奇艺视频弹幕引发的思考

    弹幕一词最早用于军事领域,指代对某一区域进行密集火力攻击。2006年,日本视频分享网站Niconico首次尝试在视频画面上实时显示用户评论。由于评论在屏幕上快速飘过的形态类似飞行中的子弹,因此它被形象地称为“弹幕”。
    被称为“A站”的AcFun最早在2007年上线,是国内首个推出弹幕视频的网站。与Niconico相似,早期的AcFun同样聚焦动漫和游戏内容。2009年,哔哩哔哩(Bilibili,又被称为“B站”,最初站名为Mikufans)成立,其目标是为用户提供一个稳定的弹幕视频分享站点。

    2017-06-04
  • 90后消费者对广告无感!90后心理研究PPT分享

      大部分企业的中高管人员都是90前出生的一代,很多CEO和传统大企业的高管,很可能还是80前。他们出生和成长的年代,根本没有手机或者互联网,接受的教育以及文化熏陶,和当下最有潜力的消费主力,也就是90后…

    2015-02-02
  • iOS 9人机界面指南(四)UI元素

    文章索引状态栏展示了关于设备及其周围环境的重要信息。默认(深色)内容
     

    2017-05-26
  • 4款视频app交互设计浅析

    作者对腾讯视频、爱奇艺、搜狐视频和芒果TV进行界面的整体对比,希望能给各位带来一些收获和启发。

    2017-05-10