Material Design The type system 字体系统

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

利用文字排版可以尽可能清晰有效地展示你的设计和内容。

目录

字体格式格式应用

字体格式

材料设计字体格式包含一系列可支持产品及其内容需求的对比样式。

字体格式由字体系统所支持的13种样式组成。它包含可重复使用的文本类别,每个类别都有倾向的应用场景和含义。

Material Design The type system 字体系统插图

Material Design字体格式。(字距与Sketch兼容)

字体大小单位

以下单位用于表示Android、iOS和web的字体大小。

平台AndroidiOSWeb字号单位spptrem转换率1.01.00.0625

转换示例

AndroidiOSWeb10sp10sp0.625rem12sp12sp0.75rem24sp24pt1.5rem60sp60pt3.75rem

Web浏览器基于根元素大小计算REM(根em大小)。现代Web浏览器的默认值是16px,因此转换方式为SP_SIZE/16=rem*。

*SP=1/16rem=0.0625rem

字距单位

以下单位用于UI中的字距。

平台AndroidiOSWeb字距单位emptrem转换率(Sketch字距/sp字号)= 字距1.0(Sketch字距/px字号)= 字距

字距示例

AndroidiOSWeb(0.2字距/16sp字号 )= 0.0125 em-0.1 pt(0.2字距/16px字号 )= 0.0125 em

格式应用

字体格式在组件和整体布局中以文本形式出现。字体属性可在字体、字型、大小写、字号和字距上使用自定义值。

Material Design The type system 字体系统插图1

格式类别实际值

标题

在字体格式中,标题跨度范围为1到6。标题是界面中最大的文本,一般用于简短、重要的文本或数字。

对于标题,你可以选择一款富有表现力的字体,比如display(展示)、handwritten(手写)或 script(手迹) 等风格。这些非传统字体的设计具有丰富的细节和特色,有助于吸引眼球。

Material Design The type system 字体系统插图2

标题2使用了display类型字体

Material Design The type system 字体系统插图3

标题3使用了Script类型字体。

衬线和无衬线字体都适用于标题,特别是小字型。

Material Design The type system 字体系统插图4

标题6(H6)使用了无衬线字体。

副标题

副标题普遍小于标题。它们通常用于较短的中等强调文本。衬线和无衬线字体都适用于副标题。

Material Design The type system 字体系统插图5

副标题1使用了无衬线字体

对于副标题,应谨慎使用具有丰富表现力的字体,包括display、handwritten和script风格等。

Material Design The type system 字体系统插图6

Material Design The type system 字体系统插图7

在副标题上应谨慎使用具有表现力的字体。

正文

正文文本的范围是1到2,由于它适用于小字型文本,所以通常用于撰写长篇文字。对应文本中的较长部分,推荐使用衬线或无衬线字体。

Material Design The type system 字体系统插图8

正文1(Body 1)使用了衬线字体

Material Design The type system 字体系统插图9

正文2((Body 2)使用了无衬线字体

不要在正文中使用表现力丰富的字体,包括display、handwritten或 script等。

Material Design The type system 字体系统插图10

Material Design The type system 字体系统插图11

不要在正文中使用表现力丰富的字体。

说明文和上划线

说明文和上划线文本(文本上有条线)是所有字体中最小的。它们被少量地用于图像注释或标题引入。

Material Design The type system 字体系统插图12

说明文本(Caption)使用了衬线字体

Material Design The type system 字体系统插图13

上划线使用了无衬线字体

不要在说明文和上划线文本中使用表现力丰富的字体,包括display、handwritten和script风格等。

Material Design The type system 字体系统插图14

Material Design The type system 字体系统插图11

不要在上划线文本中使用表现力丰富的字体。

按钮

按钮文本是一种操作引导,它使用了不同的类型(如文本、线框和填充按钮等)并应用在选项卡、弹框和卡片中。

按钮文本通常是全大写的无衬线体。

Material Design The type system 字体系统插图15

按钮文本上使用一款全大写的无衬线体

按钮文本可以是首字母大写的无衬线或衬线体。

Material Design The type system 字体系统插图16

Material Design The type system 字体系统插图7

当按钮文本与非交互文本有明显区别时应谨慎使用,例如上图中下边的无衬线字体按钮。

不要在按钮文本中使用表现力丰富的字体,包括display、handwritten和script风格等。

Material Design The type system 字体系统插图17

Material Design The type system 字体系统插图11

不要对按钮文本使用display风格的字体。

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

Material Design Understanding typography 排版指南

2020-10-13 20:05:05

UI设计

关于产品体验日记(上)

2020-10-13 22:04:49

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