排版是网页最基本的组成部分。易读性及可读性通常是用户体验必不可少的一部分。如果你知道如何排版，你就可以在用户会话中增加变换和持续时间，并且你的网页对于大众来说会更有价值。
首先，什么是文字？
字母,单词,句子,段落。人们用文字来表达想法。它包含情报和某些特定的信息，并且可以被阅读。如果你想在网上表达想法，那么文字就是必不可少的，这样人们才知道你说了什么。
作为Thinking with type（Ellen Lupton 著）的死忠粉，我必须引用作者所说的一句话：“在排版中，文字是持续排列的，不同于短标题或者标题。”
好的排版可以让用户很容易就找到他们想要的，在他们阅读的时候他们就会感到愉快且有成效，你的想法会最大程度地传递给人们。糟糕的排版会阻挠和干扰用户，让人觉得失望也没有读下去的欲望。
在下文中，我会告诉你一些建议，能让你提高排版水平，也能让你网页的字体更加清晰易读，那就开始吧。
一、字体大小（Font size）
几年前正文字体通常使用10或12px，现在我们用的都是FHD或者UHD显示，所以要扩大字体，使用大的字体可以增加文本内容的易读性。要想使你的内容更清晰易读，最佳字体大小是16到22px。当你为小屏幕设计设计界面的时候，可以将字体大小缩减至14到18px。
这些尺寸的最小值也适应视觉障碍的人阅读（这里指的是戴眼镜的人或者老年人）。
"Optimal body text size is from 16 to 22px to increase legibility of your text content."最能增加易读性的正文字体大小是16到22 px。
别忘了，最理想的字体大小总是取决于你为网页选择的字型。下图中你可以看到字母X的高度（从基线到小写字母顶端）在字体Helvetica Neue 和 Futura之间的区别。
相同字号下Helvetica Neue 和 Futura的对比
二、行间距（Line spacing）
设计网页时，正文主体应该使用1.5倍以上的行高，标题行间距推荐使用约1.1倍或1.2倍
You should use line height at least 1.5 multiple of your body text size.正文主体应该使用1.5倍以上的行高。
这是什么意思呢？实际上，当你的正文主体使用16px大小的字号时，你的行高应该在24px左右（你可以看以下示例）。
如果有时你的段落很短但你想让排版看起来更和谐，你可以增加一点行间距。
1.5倍行高下的文字排版案例
三、行长度（Line length）
在网页上，人们不会阅读大块的文字，浏览较长的行列会让人觉得很困难而且很不舒服。我想提醒一件很重要的事，就是人们不会定在一个地方一直阅读较长的文字，而是会短而快速地浏览（也称为跳阅）——法国眼科医生 Louis Émile Javal 发现的。
People don’t move continuously along a line of text while reading, but make short, rapid movements intermingled with short stops.人们不会定在一个地方一直阅读较长的文字，而是会短而快速地浏览
所以行的长度应该是有限的，最佳选择是每行60到80字符，能给人最好的阅读体验。当你设计一个界面时，你要让行长度适配屏幕大小。在手机上你应该选择每行30到40个字符。
一行超过80字符也会给阅读障碍的人带来巨大困扰。
不同行长的视觉感受对比
四、对比（Contrast）
从实用性的角度来说，对比是十分重要的，但也会影响易读性。
文本之间对比如果不鲜明，就会让人们阅读和使用网页变得十分困难（不仅是那些阅读障碍的人）。
现在的趋势是灰色字体加白色背景。但如果用户看内容时并不舒服的话这也没什么卵用。如果对比不明显的话，人们浏览的时候速度会变慢，他们无法抓取任何关键词，并且会错过重要信息，没办法看到连接也很难发现菜单栏——即使是用移动设备走在阳光下。
Content vs background contrast should be guided with 4.5:1 rule.内容与背景对比的规则是4.5：1
从可访问性角度出发,内容与背景对比度按照4.5:1的规则也可以让任何视觉障碍、低视力和色盲用户正确阅读屏幕上的内容。但达到最佳的对比往往十分复杂，不只需要一种颜色。例如患有色盲的用户很难看到超文本链接，所以你应该打上下划线(也能很好地解决人们注意不到的问题)。
Contrast isn't only about colors, people with visual impairments can have problem to find hypertext links when they aren't underlined.对比不只是颜色对比，如果超文本链接没有下划线的话，视力障碍的人会很难发现。
五、纵向分布（Vertical）
人们在网页中不会阅读大块的文字，他们只是浏览大致内容,寻找重要信息。纵向分布让一切变得简单。为了让用户更舒适地浏览，我们使用纵向分布保持哥元素和模块(标题、段落、标题或图片)的一致。我们也使用纵向分布来引导用户快速找到重要的图片,给使用网站的人更多的轻松和积极的体验
但是如何运用纵向分布呢？
你可能已经听说过基线——在印刷设计中基线无形地影响着字符的位置。我们也使用这个词在网页设计中,但略有不同。网页设计中基线是由文字主体的行高(同时也是CSS属性)决定的。
当你定义基线和创建自己的基线网格,最基本的一点是根据你的正文文字大小(<p>)和行高（css中的行高属性）来规划接下来的一切。
在下图中你可以看到,我使用16 px的字体大小和24 px行高,这意味着以24 px为基线(为了更好设置所有的字体的位置,我曾经把这个数除以2,3或4以供选择)。基于这个定义,所有空格(包括边界、填充或边框)必须可以被6xp整除。为了使段落和标题看起来一致，我决定以数字6的倍数创建空间,最后我使用24或36 px。我的字体大小、行高也是6px的倍数。
纵向分布在设计中起到的作用
总结
排版是网页设计的重要组成部分，也是你文本是否清晰可读易理解的决定性因素。如果用户在阅读和浏览你的网站时感觉良好他们会更加认可你网站的价值。
- 本文翻译来自Medium，
- 感谢 Patrik Michalicka 原文链接
网友评论