Design System Application - Chapter 3 字号 Font Size

本篇只针对 结构性文字（UI 构成的文字部分及段落等）进行说明，装饰性文字（Banner 等）及 指标板数值 等特殊形态的文字部分不需遵循字号设定，但是涉及到 结构性 的部分，建议遵循网格系统，这样有助于进行响应适配。

结构性文字分为 Web 端 及 移动端 两部分，字号设置差别较小，所以进行统一说明。

字号的命名与实际使用是存在偏差的，这源于在不同终端及不同情况下的差异性，实际使用需要视情况而定，但多数情况下，我们都是遵循命名进行使用的，它更利于体现结构上的层次。

本篇主要针对字号（font-size）设置进行说明，实际应用时需要搭配字重（font-weight）。

我们的设计系统字号范围从 10px 到 36px，基于 网格系统 的转化，则倍率关系是 @2.5x 到 @9x，其中 10px 字号只出现在 移动端。

无论 Web 端 还是 移动端，基础字号 都是 14px（@3.5x），当然如果不受限于版幅，甚至一些个性化的产品，我们甚至建议以 16px（@4x）作为基础字号。

而 Web 端 由于浏览器的自身设置（浏览器在不调整字体设置的情况下，默认显示最小字号是 12px，在样式中即使设置了更小的字号，也会被放大到 12px），在通常情况下（有时可能涉及到特殊需求，我们会使用 Transform 的方式去处理小于 12px 的字号），最小字号为 12px（@3x）。

在小于 14px（@3.5x）时，我们的字号设置阶梯是 1px，11px（@2.75x）时，行高（Line Height）设置与 12px（@3x）保持一致。

Design System Application - Chapter 3 字号 Font Size相关推荐

Design System Application - Chapter 1 网格系统 Grid System
网格系统(Grid System)是本设计系统的基本规则,它是我用来解决浏览器适配问题并使界面整体表现的规范的非常有效的方法.另外需要指明,没有完美的方法,这就像前端中没有完美的可以解决所有问题并 ...
android设置应用字体大小,在Android应用程序改变的TextView的字体大小从原始设置更改字体大小(Font size...
我想在我的应用程序指定我自己的文字大小,但我有这样一个问题. 当我在设备设置中更改字体大小,我的应用程序的字体大小TextView也会改变. Answer 1: 其实,设置字体大小只影响大小sp . ...
html字号的范围,font size大小
font size="+1"里面的数值是什么意思 font size="+1" font size="+2" font size=" ...
学习Head First Design Pattern——翻译Chapter 2：The Observer Pattern
学习Head First Design Pattern--翻译Chapter 2:The Observer Pattern Page 37 图片〉〉嗨Jerry,模式组讨论已经推迟到星期六的晚上了, ...
【EDA】Electric VLSI Design System(芯片设计软件): 介绍
http://savannah.gnu.org/projects/electric 清华大学镜像站点下载地址:https://mirrors.tuna.tsinghua.edu.cn/gnu/elec ...
什么是 Design System
因为研究 Design System,无意中发现了这本「Design Systems」.本来只是期望着看看别人的思路和想法,粗略的看了几个章节才发现自己错了.这本似乎并不太火的书可以说是目前市面上对整 ...
成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin
成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin ...
Microsoft Fluent Design System
转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluen ...
sketch里的ios控件_使用Sketch建立Design System
一. 有关Design System 之前的文章<使用Adobe XD建立Design System>中介绍了什么是Design System,它有什么用,在设计的哪个阶段使用以及如何用A ...

Design System Application - Chapter 3 字号 Font Size

Design System Application - Chapter 3 字号 Font Size相关推荐

最新文章

热门文章