移动端阅读字体设计五条原则
在桌面端我们可能会采用字号差异较大的文字组合,移动端屏幕较小,容纳的文字也较少,同等的字号差异在小屏幕上的感受会被放大。
原因是我们在使用这两种设备时的观看距离不同,桌面端我们的眼睛离屏幕较远,而在移动端则相反,因此我们应该在移动端使用较小的字号反差。
小屏幕上,一些桌面端无关大雅的间距不等问题会变得突出。
在英文的段落排版中,通常是左侧对齐,而让右侧自然形成起伏边(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; }
iphone类移动设备不受最小字号限制;其它设备受8px限制;chrome中限制最小12px。
因此,考虑到浏览器兼容性的问题,设计动态文本内容时,最小字号建议使用12px。[2]
因为中文的字面大于英文字面,因此为了保证阅读的舒适性,中文行高需要大于英文行高,以此同理的有日文/韩文等Dense Script types。[5]
参考对象:Material Design;知乎;(因ios人机交互指南并未对非拉丁文字做出指导,排出了参考对象之外)
文本之间对比度最小为4.5:1 [4],最佳对比度为7:1