Material Design Understanding typography 排版指南

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

排版表达了层次结构和品牌形象。

目录

字体属性字体分类易读性系统字体

字体属性

字体是字母的集合。虽然每个字母都是唯一的,但字母间有确切的共享形态。字体代表了通过字母集合而形成的共享模式。

当使用排版设计的基本原则时,根据其样式、辨识性和易读性来选择字体是最有效的。

munvs2wksba.png插图

字型部分名称:孔径(Apeture)、升部(Acender)、基线(baseline)、大写字高(Cap Height),降部(descender)、行距(leading)、字间距(letter spacing)、无衬线(sans serif)、衬线(serif)、字干(stem)、笔画(stroke)、X行高(X-height)。

基线

基线是指文本行所停靠的那条看不见的线。在Material Design中,基线是测量文本与元素间垂直距离的重要规范。

pdzjo3odrt0.png插图(1)

基线

4dp网格

字体与4dp网格基线对齐

x4bytjfhwz0.png插图(2)

无论pt/sp的大小,文字基线必须位于4dp网格上。为维持这个网格标准,行高必须是能被4整除的值。

从基线开始测量

规定UI元素与文字的距离以到基线为标准。基线值与软件无关,所以可在任何设计程序中使用,网格也同样如此。在Android和iOS上,代码可以从基线相关的规格转换成内边距。对于web,可以使用Sass或CSS自动计算。

bi0tnucgu55.png插图(3)

大写字高

大写字高是指从基线开始测量的扁平大写字母(如M或I)的高度。圆形和尖角的大写字母(如S和A),可通过视线调节使这类字母略微高过大写字高,从而达到大小一致的视觉效果。每种字体都有其独特的大写字高。

xmxmibvke20.png插图(4)

大写字高

X字高

“X字高”是指小写字母“x”的高度,它可以表示字体中每个字形将会达到的高度或长度。

满足“X字高”的字体在使用小字型时具有更高的可读性,因为每个字母内的空白区域更清晰。

lilw0mot4td.png插图(5)

字体小写字母x的高度决定了其“X字高”。

升部与降部

升部存在于部分小写字母中,是超过大写字高或基线的垂直方向笔划。降部是这些字母中垂直向下的笔划。在一些情况下,当行高(基线间的垂直距离)过于紧凑时,笔划间可能会产生冲突。

30mnzbsv30f.png插图(6)

升部与降部

字重

字重指的是字体笔划的相对粗细。一个字体可以有很多个字重,通常情况是4-6个。

rrnfy30cy0i.png插图(7)

一般字重:

轻普通中等粗体

字体分类

衬线体

衬线是出现在字母笔划始端或末端的小形状或突起。带有衬线的字体称为衬线字体。衬线体可归为以下类型之一:

旧式衬线体类似于墨水书写作品,具有:

笔划粗细对比低笔划中强调斜线小写字母升部上衬线倾斜

过渡衬线体具有:

笔划粗细对比高中等高度的“X字高”笔划中强调垂直线括弧性衬线

Didone或新古典主义衬线体具有:

笔划粗细对比非常高笔划中强调垂直线笔划末端成“球形”

Slab衬线体具有:

笔划粗细区别非常微小的粗衬线细微或没有括弧性衬线

3ozw2etfwnc.png插图(8)

EB Garamond字体,旧式衬线体Libre Baskerville字体,过渡衬线体Libre Bodoni字体,Didone/新古典主义衬线体Bitter,粗衬线体

无衬线体

没有衬线的字体称之为无衬线体,来自于法语单词“sans”,意思是“没有”。 无衬线体可归为以下类型之一:

Grotesque:笔划粗细对比低,纵向或无明显加重Humanist:笔划粗细对比中等,倾斜加重Geometric:笔划粗细对比低,纵向加重和圆形风格

5kaucgvtxxi.png插图(9)

Work Sans, grotesque无衬线体Alegreya Sans, humanist无衬线体Quicksand, geometric无衬线体

Monospace

Monospace字体中所有字符都显示为同样的宽度。

iawun311qhg.png插图(10)

Roboto Mono, monospaceSpace Mono, monospaceVT323, monospace

手写体

手写字体是非常规的,具有自然书写的感觉。这些字体通常在格式中使用H1-H6。它们有以下几种形式:

Black letter: 高度对比、窄、有直线和角度曲线Script:书法风格的重现(相对更正式)Handwriting: 手写风格重现(相对没那么正式)

d1by5y0qytr.png插图(11)

UbifrajturMaguntia, black letterDancing Script, scriptIndie Flower, handwriting

展览体(Display)

这是多种类型字体的混合,它们仅仅适用于大尺寸的显示。

展览体通常在字体格式中使用H1-H6。

dupcvttdrmm.png插图(12)

Shrikhand, 展览体Chewy, 展览体Faster One,展览体

易读性

可读性取决于字体中的字符,而易读性是指阅读单词或文本块的容易程度,这会受到字体风格的影响。

字间距

字间距,也称作字距,用于文字中对字母间距离的统一调节。

iqhzro25gtj.png插图(13)

大型字体(例如标题)可通过缩紧字间距来减小字母间的距离并提高易读性。

5ezcpieiea2.png插图(14)

缩紧字间距

对于小型字体,更疏松的字间距可以提高易读性,因为增大字母间隙加强了它们的形状对比。全部大写的文字,即使是小型尺寸,也会由于增加字间距而提高易读性。

ebusv5c1ija.png插图(15)

疏松字间距

表格数字

在表格内或其它数值可能会经常变化的地方使用表格数字(也称作等宽数字),而非比例数字。

3fo4jh0jjga.png插图(16)

表格数字使数值保持视觉对齐,以便更好地浏览。

行宽

正文的行宽通常在40至60个字符之间。而在更宽的区域(例如桌面),行宽能达到120个字符,此时需要将行高从20sp增加到24sp。

nabsunwe32e.png插图(17)

对于英语正文来说,理想的行宽是40-60个字符。

2kv2hm54gye.png插图(18)

短行英文的理想长度是20-40个字符。

行高

行高(也称作行距)控制了文本块中基线之间的空间量。文本的行高与其字号成比例。

jp5belodv52.png插图(19)

字号14,行高20dp字号20,行高28dp

段间距

将段间距保持在行高的0.75倍到1.25倍之间。

rrkx0dyjgvc.png插图(20)

字号20sp,行高30dp,段间距28dp

字体对齐

字体对齐决定了文本在其显示空间内的对齐方式。方式有以下三种:

左对齐:文本靠左对齐排列右对齐:文本靠右对齐排列居中:文本与其所在区域的中间对齐排列

左对齐

左对齐文本是左到右语言(如英语)最常用的方式。

q0mmheaocic.png插图(21)

正文中使用文本左对齐

右对齐

右对齐文本是右至左语言(如阿拉伯语和希伯来语)最常用的方式。

左至右语言也可使用右对齐文本,但最好用于突出布局中的短版元素(如旁注),不推荐在长文本中使用。

rykjssihiws.png插图(22)

旁注使用右对齐文本

居中

居中文本最适于突出布局中的短版元素(如重要引述),不推荐在长文本中使用。

zmwwm333q2q.png插图(23)

重要引述使用居中文本对齐。

系统字体

系统字体已预先安装在电脑或设备中。它们通常有广泛的语言支持且不收取开发者许可证费。在APP字体中使用系统默认字体会将平台的一致性与APP的界面和使用感受相互融合。不过,由于它们在设备中随处可见,因此可能不会特别突出。

使用系统字体

原生系统字体应该在大段文本或任何字号低于14sp的文本上使用。

Roboto是Android的默认系统字体。对于Android之外的平台和web产品,请使用对应平台推荐的系统字体。例如,iOS应用程序就应该使用苹果的San Francisco字体。

segyugk3bdw.png插图(24)

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

电话调研没想象中那么深奥

2020-10-13 20:05:04

UI设计

Material Design The type system 字体系统

2020-10-13 20:05:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索