内部教程！超详细的支付宝设计规范之线上字体篇

一、字体设计的价值

文是图像记忆衍生，们为了简明地表事情、物品、物等情景画，而演变出简明记载。文作为图片衍生，也是品形象要元素。而体则是文信息在表，不体不仅能影响排版，更会极大反应品性格。如说图形和色是品皮肤和血，那体则是品内在骨骼。

1. 信息呈现

文是信息最接最晰表，而体则接决定了文信息能否正确、准确地传，不晰、难以辨认体会极大地削弱文表。

2. 情感表

文本质上也是图形，而体则是这图形在形。体能在文所表信息被理解前，最接情感冲击。

3. 个性塑造

不体应着不个性，比如圆润体代表和蔼可亲，而泼墨书法体传了狂放不羁，正确体选择才能更好地配合其他元素来塑造品性格。

二、字体的选用

体是影响品形象基本元素，有使用合适体去搭配品图形，才能让品形象体效最大化。

此，在字体选择上，最键的就是根据由牌特性推导来的键词来到字体的基本原则，最终我们确定了个基本原则，即：端庄匀称、笔画严谨、清晰可读、格现代。

根据字体的原则，符合上特点的可字体有：微软雅黑、思源黑体、华为黑体、苹方、方正兰亭黑、FF DIN 和 Helvetica Neue。这些字体都是相对见，而且容易获取版权的现代格的字体。

三、中文字体的选用

1. 字体的对比

思源冬青斜的笔画末端会变化，苹方、微软黑、兰亭黑都严格的横平竖直，但线条的宽度区别。微软黑粗，小字阅读会较吃力。方兰亭黑从微软黑派衍出，显著的变化其字面字身比下调到常的92%，缩减5%的宽度让字形修，宽的字距让文面宽松易读。这些改变让兰亭黑得以好应其他应用场合。

2. 方正兰亭黑的优势

方正「兰亭黑」是国内一套为屏幕设计，并由此衍生出的家族系列字。兰亭黑的设计弥补现有黑的不，它追求字的整形式美，强文字设计的审美和文化。结构严谨、讲究，禁得住仔细推敲琢磨，更注重字的「形象」；黑白节均匀，重心一致，排列整齐；笔划精良，条刚柔相济，富有弹。阅读舒适流畅，有鲜明的时代感。

支付宝作互联网金融公司，致力于打造「专业、信任，简单」的形象。目主流的无衬线中文字体中，方兰亭黑端匀称、设严谨、易识别、文字线条粗细均衡，且了应激烈的竞争不断化，这样字体设符合这一形象。

四、英文和数字字体的选用

FF Din 和 Helvetica Neue 比

FF Din DIN 是德国标准协会，Deutsches Institut für Normung 首母缩写。起自德国铁路体，Albert-Jan Pool 于1995年设计发民用体。衬线体，易用耐看，形开放，代表了德国设计。是设计师最爱几类体。

Helvetica 是瑞士设计师马克斯．米耶丁设计的现代主义风字，中，无衬。字末端严持横平竖直，严谨、守，没有任何的修饰，适合不同分辨率的显示器。而 Helvetica Neue 则是原来字的升级版，拥有更的字重，更易不同场合的应用。

DIN 的字形比瘦长，很适合显示比长的数字，但是小字号的情况下识别度低。Helvetica Neue 的字形则相对偏胖，笔画更清晰，而且小字号的情况下读也很高。 考虑到支付宝为一款民使用的、偏金融和支付属的 APP，我们选择中的、读高的 Helvetica Neue 为英文和数字的品牌字。

综上所述，我们确定以方正兰亭黑为整个支付宝品牌的中文字，适用所有下文字信息的表达和部分上内容的展示。同时确定以Helvetica Neue为支付宝品牌的英文和数字字，适用所有上下英文和数字的展示。

五、线上字体规范

1. 线上字体的

虽然根据支付宝的牌特性我们确认来方正兰亭黑作为牌字体，但是在线上环境（移端如 iOS 和卓系统）中，字体的使会强烈受到系统的限制。

此规定，在 iOS 系统，文体使用苹，英文体使用 San Francisco；在安卓系统，文体使用思黑体，英文使用 Roboto；与此时，数采用 Helvetica Neue 这跨平台体。

2. 字号规范

字号的原

在界设计，文号大小决定了信息层和权。齐而又层分明不号大小排列会让体设计变更加晰有序。

不同的操系统有自己特有的 UI 规，但是在整上，不管是 iOS 还是安卓系统采用以2的倍数的栅系统。在移动端，不管是 UI 的尺寸还是间距，应该为4的倍数。因此，我们规定在移动端，字号也是以2为基进单位，将字号大小从最小的20pt以4的倍数延续到40px。

同时针对一些特殊的金额数字的展示，特别以16作制单规了从64px到112px的规范字。

字的使用

根据定下的字号，将支付 app 内部的息为7个层，其中最高的为重要金额、数字的显示，其字号间为64~112px（在2x图计模式下），最低为辅助说息，其字号为20px。体的建议使用方式如图：

△ *  星号部的字号仅限于定的使用

参考案例：

六、行高规范

1. 行高的原理

参考 w3c，眼睛到屏幕的距离25cm，目通用的法，文的基本行高通常字的1.2倍左右，中文因字符密实且高度一致，文的伸部（ascender）下延部（descender）创造行间空隙，所以一般行高需，根据阅读人群划分（儿童、轻人、老人），可达到 1.5 至 2 倍甚至。

2. 行高的规范

结合前面推导的字号和行高原理，对目前规范的每一个字上相应的行高，不管是在设计时还是进行开现，必须遵从一规范。

七、字重规范

1. 字重的规则

字重是指字体笔画的粗细，一般在字体族名后面注明的「Thin」「Light」「Regular」「Book」「Bold」「Black」「Heavy」等都是字重名称。由于在一种字体可在标题、落甚至海报，单一的字重可并会很好的适应这些场景，于是衍生了同一个字体的同字重。

在移动端页设计，为了简化选择，统体效，此指定在不系统或体，限制设计使用。即：在苹选择「纤细」作为轻，「粗」为；思黑体选择「细体」为轻，「黑体」作为；Helvetica Neue选择「Thin」为轻，「Bold」为。

2. 字重的使

同一个字体的同字重传达同的信息权重和情绪。细的字体给人细腻、轻快的感觉，而粗体则给人着重和严肃的认知。因此适合的场景使合适的字重非重要。