移动端字体设计五大原则

移动端阅读字体设计五条原则

1.使用差异较小的文字组合

在桌面端我们可能会采用字号差异较大的文字组合，移动端屏幕较小，容纳的文字也较少，同等的字号差异在小屏幕上的感受会被放大。

视距

原因是我们在使用这两种设备时的观看距离不同，桌面端我们的眼睛离屏幕较远，而在移动端则相反，因此我们应该在移动端使用较小的字号反差。

2.段落头尾对齐

小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。

在英文的段落排版中，通常是左侧对齐，而让右侧自然形成起伏边（rag）。对中文排版与阅读习惯而言则相反，段落的头尾对齐尤其重要。

中英文对齐方式

文字的对齐方式，可以用简单的代码实现：

Web App中，使用CSS类中指定justify属性值控制即可，以下为兼容性较佳的方案

.space-betw { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }

3.web设计最小字号12pt

iphone类移动设备不受最小字号限制；其它设备受8px限制；chrome中限制最小12px。

因此，考虑到浏览器兼容性的问题，设计动态文本内容时，最小字号建议使用12px。[2]

测试

4.中文需要比英文更大的行高

因为中文的字面大于英文字面，因此为了保证阅读的舒适性，中文行高需要大于英文行高，以此同理的有日文/韩文等Dense Script types。[5]

参考对象：Material Design;知乎；（因ios人机交互指南并未对非拉丁文字做出指导，排出了参考对象之外）

5.文本对比度最小为4.5：1

文本之间对比度最小为4.5：1 [4]，最佳对比度为7：1

字体规范

guide

参考资料

1.移动端文字与排版设计的六个原则

2.移动端最小字体限制测试

3.W3C无障碍设计准则

4.WACG对比度设计准则

5.Google Design-typegraphy