苹果旧金山字体的秘密

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

相关推荐

  • 产品设计之行为学研究,四步打造影响力超高的产品!

    我们每天都感叹“改变”有多难——落空的新年计划、从未使用的健身卡、东西少吃点、存款留多点,可惜都止步在了yy。

    2016-08-29
  • 眼球追踪到底是肿么回事?和VR有啥子不"正当"关系!

    虫虫是科技虫,更是虫博士,今天,好为人师的虫博士给伙伴们普及一下,眼球追踪到底是肿么回事?和VR有啥子不"正当"关系! 名词:眼球追踪 是一项用途颇广的科学应用技术,广泛运用于实验心理学、应用心理学、工程…

    2016-04-11
  • 使用 Sketch 搭建动态布局

    如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很…

    2017-12-28
  • 别让这10个设计误区毁了你的APP

    色彩:鲜艳的色彩更抓眼球,适宜于可点击的元素使用
    空间:在关键元素周围留下足够的空间,让用户更容易发现,也更容易操作
    排版:使用简单干净的字体(尽量使用笔画粗细统一的字体),并且挑选适合屏幕的字体,确保整体可读性。

    告知用户他们所处的位置,或者显示当前状态(比如光标悬停色彩改变等)
    当某个动作执行的时候,应当给出相应反应(比如提交表单完成之后给予成功提交的提示)
    告诉用户发生了什么,以及接下来将会发生什么(比如加载中的进度条)

    2017-05-21
  • 应用中的游戏化设计

    作者:_Ammy   游戏借着其互动性、反馈性、挑战性、快速成长性等特点,拥有着让玩家长期专注于其中的神奇力量。而若将游戏的这些特点引入到一般的产品设计上,也可能会产生意想不到的效果,这就是游戏化。游戏化的…

    交互专题 2017-08-07
  • 案例分析|通过配色吸引用户注意力的四点技巧

    色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能给用户带来完全不同情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的设计更出彩。

    2017-05-01
  • 【酒店设计】关注用户体验的酒店设计永不过时

    位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极致的设计感。一楼的moriki餐厅...

    2018-04-07
  • 5个实用配图技巧,为产品带来优质体验

    图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。

    2017-05-12
  • 如何应对交互设计中的技术实现问题

    数十万互联网从业者的共同关注!作者: 山晓,作者授权早读课转载。公众号:LEX设计生(ID:Lex-design)编辑:Dva技术实现是交互设计的last but not the least环节,甚至有时应该是设计优先考虑的问题,毕竟…

    2017-08-02
  • 百度金融用户体验中心负责人 曲佳:设计师求职七宗罪

    继上个周五 19:00 腾讯互娱游戏平台部设计总监陈维的第一节课《如何通关 UI 设计师的游戏副本》后,昨晚百度金融用户体验中心负责人曲佳联合团队的设计经理孔敏,给知群的用户们带来了「七大公司设计师面试官授课合集」的第二节课《设计师求职七宗罪》,在分享的最后环节,也给出了目前百度金融尚未对外大规模公开的招聘信息(最近有跳槽意向的设计师们抓紧时间上车)。曲佳:百度金融设计架构师,百度金融用户体验中心-百度 FDC ( Baidu Fina...

    2018-04-04