教你如何在网页中做出精彩的文字排版。
文字排版需要考虑文字识别和页面可读性。本文将从最佳可读性规范和废话设计四大原则的角度，与大家分享如何在网页中做出精彩的文字排版。
先考虑一下。你觉得文字排版好吗？
在我们看来，好的排版一定要有较好的可读性，文字内容在视觉上平衡连贯，具有整体空间感。
布局、内容放置和栏目设计都会影响文本的可读性。从可读性来看，设计师需要考虑字体、字号、行距、间距、背景色和文字颜色对比。
我们在上一篇文章中重点介绍了字体和字体大小，下面的最佳可读性规范介绍了行距和间距，并分享了合适的线宽和高度，帮助读者保持阅读节奏，让读者有更好的阅读体验。
首先，最好的可读性规范
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.将文本留空
文字排版时，需要在版面中留出自由空间，空白空间由小到大的顺序应该是:字距、行距、段落距。另外，在对内容区域进行排版之前，需要根据页面的实际情况，在页面周围留出空白。
二、废话设计四原则在文字排版中的应用
废话是四个基本的设计原则，包括对比、重复、对齐和亲密，这些原则已经被设计师广泛使用。这四个基本原则也非常适合网页设计中的文字排版。
1.对比
我们把对比分为三类，主要是标题和文字的字体和字号对比，文字颜色对比，文字颜色和背景颜色对比。
& gt？标题和正文的比较
在AnyForWeb网站的案例页面，标题是微软YaheiNo。18，正文是宋帝诺。12.两种字体的对比使得文字内容丰富，容易吸引读者的注意力。
& gt？文本颜色对比
在嘎兰官方网站中，一些角色使用了与主要角色不同的颜色。这种对比是增加视觉效果的有效方法之一，突出段落的重点。
& gt？文本颜色和背景颜色之间的对比
这是一种很常见的排版设计方法。文字与背景之间适当的对比可以提高文字的清晰度，产生强烈的视觉效果。
比如埃森哲官网，白底红标题黑文字的对比，以及红底白字对比的应用，清晰的衬托出文字内容，不仅层次感十足，视觉冲击力也很强。
设计师在运用这一原则时需要注意，必须保证文字易读。如果文字太小或太细，颜色对比不够，就会适得其反。例如:
如果设计师不熟悉色彩对比，可以使用色彩对比检测工具(如Check My Colours和Colour Contrast Check)来检测色差和明度差，以保证网页设计的可读性。
重复
设计中的元素可以在整个网页设计中重复使用。对于文字来说，可能是字体、字号、风格的重复，也可能是同类型的图案装饰、文字和图片的整体布局等。重复给用户一个有组织的和一致的体验，可以创造一致性，显得更专业。
比如HeyJuice网站在产品指引中采用“图片+标题+文字”的统一形式。内容不同，但版面统一，画面风格一致。用户一看就知道是属于同一个版块，这样的重复很容易产生连贯均衡的美感。
比如土巴兔装修网络的过程中，标题文字在图片中的位置和形式是一样的，既与图片的背景色形成对比，也是文字风格的重复。
重复原则在网页设计中被广泛应用。单一的重复看似单调，但设计师可以根据不同网站的需求灵活运用。例如，反复修改可以增加创新，为网页设计增添活力。
对齐
在网页设计中，元素不能随意放在页面上，每一项都要和页面内容有一定的联系。对齐是网页设计中必不可少的一部分，它可以帮助设计师做出有吸引力的设计，是优秀网页设计的潜在要求。
对齐的情况很多，我们随意列举两个。
曼秀雷敦网站左对齐:
Darry Ring网站的中心对齐:
左对齐、右对齐使文字看起来更清晰，效果清晰；居中对齐更庄重、正式、稳重。
4.亲密
接近意味着有关联，亲密意味着相关的项目被组织在一起，使它们看起来和谐统一，成为一个整体。
亲密感可以从两点入手:适当留白，视觉强调，突出层次感。
比如下面这种情况，图文结合就是多种元素的结合。
人眼首先被横幅图和里面的文字吸引，然后向下移动到文字描述和链接文字。这些元素的亲密度和对比形成了一种平衡。
以上是本次分享的内容。如上所述，排版的质量考验一个设计师的基本功，平时的功夫是不可或缺的。期待大家设计的精彩排版！
本文地址:/sjiinfo 7282.html。