网站上每一个元素都能影响浏览,网站设计的效果整体感觉,能够影响多用户的多用户体验,而且目前的网站优化中也在着重的强调——深度浏览,而网站建设中页面设计的好与坏就能给您的网站在深度浏览中有一个好的评价;网站的整体设计效果是有很多细微的点与面结合出来的,WordPress 网站设计觉得排版设计的好坏绝对能考验一个设计师的基本功底,文字的排版需要考虑文字辨识度和页面易读性,本文就从理想易读性规范和 CRAP 设计四原则的角度与大家分享怎样在网页中做出精彩的文字排版。

在我们看来,好排版一定有着比较棒的阅读性,文字内容在视觉上是平衡和连贯的,并且有整体的空间感。布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看,需要设计师考虑字型、字号、行距、间距、背景色与文字颜色对比等。我们在前面文章中已经重点介绍了字型和字号,以下理想易读性规范则介绍行距和间距,分享适宜的行宽和行高,帮助浏览者保持阅读节奏,让读者拥有更好的阅读体验。

一、理想易读性规范

1. 行宽

我们可以想象一下:如果一行文字过长,视线移动距离长,很难让人注意到段落起点和终点,阅读比较困难;如果一行文字过短,眼睛要不停来回扫视,破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数,来提高易读性。传统图书排版每行理想字元数是 55—75,实际在网页上每行字元 75—85 更流行。中文在 14 号字型时,建议 35—45 个文字。

比如下图:

2. 间距

行距是影响易读性非常重要的因素,过宽的行距会会让文字失去延续性,影响阅读;而行距过窄,则容易出现跳行。

网页设计中,文字间距一般根据字型大小选 1—1.5 倍作为行间距,1.5—2 倍作为段间距。比如 12 号字型,行间距是 12px—18px,段落间距则是 18px—24px 。另外,行高/段落之间的空白=0.754 。行间距正好是段落间距的 75% 是非常常见的。比如简书 16 号字型,行间距 27px/段间距 36px=75% 。文字字号本身比较大,所以行间距也不需要严格按照 1—1.5 倍的比例设定,不过行间距和段间距的比例符合 75%,看起来很不错,这样的视觉效果让人在阅读时保持一种节奏感,这就是在实际情况中将规范的灵活应用。

3. 行对齐

排版中很重要的一个规范就是把应该对其的地方对齐,比如每个段落行的位置对齐。不论哪种视觉效果,精美的、正式的、有趣的还是严肃的,一般都可以应用一种明确的对齐来达到目的。通常情况下,建议在页面上只使用一种文字对齐,尽量避免两端对齐。

4. 文字留白

在排版文字时,在版面需要留出空余空间,留白面积从小到大应该遵循的顺序是:字间距、行间距、段间距。此外,在排版内容区之前,需要根据页面实际情况给页面四周留出余白。