这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。
排版表达了层次结构和品牌形象。
目录
字体属性字体分类易读性系统字体
字体属性
字体是字母的集合。虽然每个字母都是唯一的,但字母间有确切的共享形态。字体代表了通过字母集合而形成的共享模式。
当使用排版设计的基本原则时,根据其样式、辨识性和易读性来选择字体是最有效的。
字型部分名称:孔径(Apeture)、升部(Acender)、基线(baseline)、大写字高(Cap Height),降部(descender)、行距(leading)、字间距(letter spacing)、无衬线(sans serif)、衬线(serif)、字干(stem)、笔画(stroke)、X行高(X-height)。
基线
基线是指文本行所停靠的那条看不见的线。在Material Design中,基线是测量文本与元素间垂直距离的重要规范。
基线
4dp网格
字体与4dp网格基线对齐
无论pt/sp的大小,文字基线必须位于4dp网格上。为维持这个网格标准,行高必须是能被4整除的值。
从基线开始测量
规定UI元素与文字的距离以到基线为标准。基线值与软件无关,所以可在任何设计程序中使用,网格也同样如此。在Android和iOS上,代码可以从基线相关的规格转换成内边距。对于web,可以使用Sass或CSS自动计算。
大写字高
大写字高是指从基线开始测量的扁平大写字母(如M或I)的高度。圆形和尖角的大写字母(如S和A),可通过视线调节使这类字母略微高过大写字高,从而达到大小一致的视觉效果。每种字体都有其独特的大写字高。
大写字高
X字高
“X字高”是指小写字母“x”的高度,它可以表示字体中每个字形将会达到的高度或长度。
满足“X字高”的字体在使用小字型时具有更高的可读性,因为每个字母内的空白区域更清晰。
字体小写字母x的高度决定了其“X字高”。
升部与降部
升部存在于部分小写字母中,是超过大写字高或基线的垂直方向笔划。降部是这些字母中垂直向下的笔划。在一些情况下,当行高(基线间的垂直距离)过于紧凑时,笔划间可能会产生冲突。
升部与降部
字重
字重指的是字体笔划的相对粗细。一个字体可以有很多个字重,通常情况是4-6个。
一般字重:
轻普通中等粗体
字体分类
衬线体
衬线是出现在字母笔划始端或末端的小形状或突起。带有衬线的字体称为衬线字体。衬线体可归为以下类型之一:
旧式衬线体类似于墨水书写作品,具有:
笔划粗细对比低笔划中强调斜线小写字母升部上衬线倾斜
过渡衬线体具有:
笔划粗细对比高中等高度的“X字高”笔划中强调垂直线括弧性衬线
Didone或新古典主义衬线体具有:
笔划粗细对比非常高笔划中强调垂直线笔划末端成“球形”
Slab衬线体具有:
笔划粗细区别非常微小的粗衬线细微或没有括弧性衬线
EB Garamond字体,旧式衬线体Libre Baskerville字体,过渡衬线体Libre Bodoni字体,Didone/新古典主义衬线体Bitter,粗衬线体
无衬线体
没有衬线的字体称之为无衬线体,来自于法语单词“sans”,意思是“没有”。 无衬线体可归为以下类型之一:
Grotesque:笔划粗细对比低,纵向或无明显加重Humanist:笔划粗细对比中等,倾斜加重Geometric:笔划粗细对比低,纵向加重和圆形风格
Work Sans, grotesque无衬线体Alegreya Sans, humanist无衬线体Quicksand, geometric无衬线体
Monospace
Monospace字体中所有字符都显示为同样的宽度。
Roboto Mono, monospaceSpace Mono, monospaceVT323, monospace
手写体
手写字体是非常规的,具有自然书写的感觉。这些字体通常在格式中使用H1-H6。它们有以下几种形式:
Black letter: 高度对比、窄、有直线和角度曲线Script:书法风格的重现(相对更正式)Handwriting: 手写风格重现(相对没那么正式)
UbifrajturMaguntia, black letterDancing Script, scriptIndie Flower, handwriting
展览体(Display)
这是多种类型字体的混合,它们仅仅适用于大尺寸的显示。
展览体通常在字体格式中使用H1-H6。
Shrikhand, 展览体Chewy, 展览体Faster One,展览体
易读性
可读性取决于字体中的字符,而易读性是指阅读单词或文本块的容易程度,这会受到字体风格的影响。
字间距
字间距,也称作字距,用于文字中对字母间距离的统一调节。
大型字体(例如标题)可通过缩紧字间距来减小字母间的距离并提高易读性。
缩紧字间距
对于小型字体,更疏松的字间距可以提高易读性,因为增大字母间隙加强了它们的形状对比。全部大写的文字,即使是小型尺寸,也会由于增加字间距而提高易读性。
疏松字间距
表格数字
在表格内或其它数值可能会经常变化的地方使用表格数字(也称作等宽数字),而非比例数字。
表格数字使数值保持视觉对齐,以便更好地浏览。
行宽
正文的行宽通常在40至60个字符之间。而在更宽的区域(例如桌面),行宽能达到120个字符,此时需要将行高从20sp增加到24sp。
对于英语正文来说,理想的行宽是40-60个字符。
短行英文的理想长度是20-40个字符。
行高
行高(也称作行距)控制了文本块中基线之间的空间量。文本的行高与其字号成比例。
字号14,行高20dp字号20,行高28dp
段间距
将段间距保持在行高的0.75倍到1.25倍之间。
字号20sp,行高30dp,段间距28dp
字体对齐
字体对齐决定了文本在其显示空间内的对齐方式。方式有以下三种:
左对齐:文本靠左对齐排列右对齐:文本靠右对齐排列居中:文本与其所在区域的中间对齐排列
左对齐
左对齐文本是左到右语言(如英语)最常用的方式。
正文中使用文本左对齐
右对齐
右对齐文本是右至左语言(如阿拉伯语和希伯来语)最常用的方式。
左至右语言也可使用右对齐文本,但最好用于突出布局中的短版元素(如旁注),不推荐在长文本中使用。
旁注使用右对齐文本
居中
居中文本最适于突出布局中的短版元素(如重要引述),不推荐在长文本中使用。
重要引述使用居中文本对齐。
系统字体
系统字体已预先安装在电脑或设备中。它们通常有广泛的语言支持且不收取开发者许可证费。在APP字体中使用系统默认字体会将平台的一致性与APP的界面和使用感受相互融合。不过,由于它们在设备中随处可见,因此可能不会特别突出。
使用系统字体
原生系统字体应该在大段文本或任何字号低于14sp的文本上使用。
Roboto是Android的默认系统字体。对于Android之外的平台和web产品,请使用对应平台推荐的系统字体。例如,iOS应用程序就应该使用苹果的San Francisco字体。
原文地址:Material Design
译者:招财鱼