网页设计文字排版.docx

说到排版，这是个大学问。网站上每一个元素都能影响浏览，排版设计的好坏绝对能考验一个设计师的基本功底，而短短的一篇文章并不能将排版介绍清楚，本文就先主要分享网站主题部分文字的排版，后期我们还会在不同系列文章中根据重点地穿插介绍排版技巧。

文字的排版需要考虑文字辨识度和页面易读性，本文就从最佳易读性规范和CRAP设计四原则的角度与大家分享怎样在网页中做出精彩的文字排版。

先想想，你觉得好的文字排版是什么样的？

在我们看来，好排版一定有着比较棒的阅读性，文字内容在视觉上是平衡和连贯的，并且有整体的空间感。

布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看，需要设计师考虑字体、字号、行距、间距、背景色与文字颜色对比等。

我们在前面文章中已经重点介绍了字体和字号，以下最佳易读性规范则介绍行距和间距，分享适宜的行宽和行高，帮助浏览者保持阅读节奏，让读者拥有更好的阅读体验。不单单只是想学习文字排版，还想学习其他的可以加我Q：963101949

一、最佳易读性规范

行宽

我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难；如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。

因此我们可以让内容区的每一行承载合适的字数，来提高易读性。

传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字

体时，建议35—45个文字。比如下图：

间距

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

网页设计中，文字间距一般根据字体大小选1—1.5倍作为行间距，1.5—2倍作为段间距。

比如12号字体，行间距是12px—18px，段落间距则是18px—24px。

另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。

比如简书16号字体，行间距27px/段间距36px=75%。文字字号本身比较大，所以行间距也不需要严格按照1—1.5倍的比例设置，不过行间距和段间距的比例符合75%，看起来很不错，这样的视觉效果让人在阅读时保持一种节奏感，这就是在实际情况中将规范的灵活应用。

行对齐

排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。

不论哪种视觉效果，精美的、正式的、有趣的还是严肃的，一般都可以应用一种明确的对齐来达到目的。

通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐。

文字留白

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

二、CRAP设计四原则在文字排版中的应用

CRAP是四项基本设计原理，包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）,已经被设计师广泛应用。这四个基本原则在网页设计中对文字的排版也非常适用。

对比

我们将对比分为三类，主要是标题与正文的字体与字号对比、文字颜色对比，以及文字颜色与背景颜色的对比。

标题与正文对比

在AnyForWeb网站案例页面中，标题使用18号的微软雅黑，正文使用12号的宋体，两种字体字号的对比让文字内容富有层次，很容易吸引读者眼球。

项目介绍

本项目是知yForWE!b为乐扣乐扣并发的中国区电于商劳同站，该网站向用户匣示了公司产品痉脓号为用户捏供在线交易汀乐抇乐抇是专r1生产丽概念密封容器的韩匡

企业，现今向全世男go多个国家出口产品是出名的世界密封容器企业。

呻浏览该网站

设计牛寺点

知yFor卅eh为乐扣乐扣设计的电商网站采用了淡雅的色系，从视觉上传达了—种干净

者祈的厄觉，吾上去非京舒适o

商品匣示的形式很丰，宫不同商品种类采用Tab标签和点击切换形式展现，在单个商品在设计上采用了卡片式砓计，给用户很杻打视党体验。网站整体布局涓卧可以帮助用户悦速拉到想要信思，活足用户罢求心

文字颜色对比

在伽然官网中，一部分文字采用了与主要文字不同的另一种颜色，这种对比是增加视觉效果的有效途径之一，突出展示了段落的重点。

—个不断进化的伽然

伽然不寻一个固定不变的组织，话时岳刻如然却在进行自找恺化岳一次曲折＂茄舌岳一次机会，毡在促进伽然自找马新，目我进化．而钻—次进化繇让我们变码还加强大扣，聪比明—次进化都让我们迫切适应市场的帮婴，从而获冯—次又一次的成长，进化天片不包，无论子自另的W理业努气，品比还足哀他．

文字颜色与背景颜色对比

这是非常常用的一种排版设计方式，正文文本与背景合适的对比可以提高文字的