教大家如何在网页中做出精彩的文字排版

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

文字的排版需要考虑文字辨识度和页面易读性，本文就从最佳易读性规范和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.文字留白

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

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

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

1.对比

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

 标题与正文对比

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

 文字颜色对比

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

 文字颜色与背景颜色对比

这是非常常用的一种排版设计方式，正文文本与背景合适的对比可以提高文字的清晰度，产生强烈的视觉效果。

比如在埃森哲官网中，白色背景、红色标题、黑色正文的对比，以及红色背景与白色文字对比的应用，将文字内容清晰衬托出来，既有丰满的层次感，同时有具有很强的视觉冲击力。

设计师在使用这一原则时需要注意，必须确保文字是容易看清的，如果文字过小或过于纤细、色彩对比度不够，会适得其反，举个例子：

设计师如果对色彩的对比度还不够熟悉时，可以通过颜色对比检测工具（如Check My Colours、Colour Contrast Check）检测色差和亮度差，确保网页设计的易读性。

2.重复

设计中的元素可以在整个网页设计中重复出现，对文字来说，可能字体、字号、样式的重复，也可能是同一种类型的图案装饰、文字与图片整体布局方式等。重复给用户一种有组织、一致性的体验，可以创造连贯性，显得更专业。

比如HeyJuice网站在产品准则部分采用了统一的“图片+标题+正文”形式。内容不同，而布局方式统一，图片风格一致。用户一眼看过去，就能知道这是属于同一个版块的内容，这样的重复很容易有一种连贯、平衡美感。

比如土巴兔装修网的流程，标题文字在图片同样的位置、采用同样形式，既与图片背景颜色形成对比，又是文字样式的重复。

重复原则在网页设计上应用非常广泛，单一的重复可能会显得单调，设计师却可以根据不同网站的需求灵活使用，比如有变化的重复能增加创新，给网页设计增加活力。

3.对齐

在网页设计中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分，它可以帮助设计师做出吸引人的设计，是优秀网页设计的潜在要求。

对齐的案例就非常多了，我们随意列举两个。

曼秀雷敦网站的左对齐：

Darry Ring网站的居中对齐：

左对齐和右对齐是文本看起来更清晰、效果分明；居中对齐显得更庄重、正式、稳重。

4.亲密性

位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。

亲密性可以从两点入手：适当留白、以视觉重点突出层次感。

比如以下案例中图文搭配，这是多个元素在一起的组合排版。

人眼首先被Banner图和里面文字吸引，然后再向下移动到文字描述及链接文字，这些元素的亲密性与对比形成一种平衡。

以上就是本次分享的内容啦。如前文所言，排版的好坏考验一个设计师的基本功底，平时的功夫可是必不可少的哟，我们期待大家设计的精彩排版！

本文地址：

网页设计中文字处理技巧有哪些？

1、留意行距离

行距离是指两行文字之间的距离。当行距离太窄时，文字会显得拥挤，阅览时需要花时间去分辩。而行距离太宽时，阅览的连贯性就会遭到扰。一般情况下，两行文字之间的距离不会跳过两个字的高度，适中的行距离在阅览中会有一种轻松、舒适的感觉。

2、留意行宽

在文字过多的情况下，通常规划者会进行分栏，这样就可以防止阅览过程中眼睛不停地来回环视产生的错行现象，从而提高阅览速度和改善阅览感受。

3、留意行宽留意行对齐

无论是活泼的、新潮的、严厉的仍是文艺风格的网页规划，都有一种很明确的对齐方法，这样才干完成一个网页的规范性

通常情况下，主张在页面上只使用一种文本对齐方法，且尽量防止两端对齐。

4、留意文字数量

随着科技的开展，人们的阅览习气也发生着变化，现代人更喜欢看图而非文字，网页中很多的文字只会让人厌烦，规划过程中，应尽或许地防止使用很多文字。若要防止阅览的压迫感，可采用图文结合的方法，为访客营造一种轻松、舒适的阅览环境。

网页字体设计设置有哪些技巧

在设计网页时，文字是网页中数量最多、使用最广泛的一种页面元素，我们必须要高度重视网页中字体设计，灵活设计字体的类型、样式、大小和颜色，才能使整个网页中的字体富于变化，给人们以美的享受。字体涉及各行各业，在设计领域的应用范围很广泛，除了我们常见的平面设计外，网页设计对字体的要求也是有一定的规范可言的，其主要的元素主要有三点。下面时间财富威客网就对网页字体设计的元素做主要介绍。

1、字体的大小设置

网页中字体大小不要乱设置，最好以系统默认为宜，一般是12PT，现在网络上最流行的小中文字体大小为9pt。

CSS2规范根据长度、水平和垂直尺寸来定义字体。这个长度为一个数值，前面可能带一个可选的加( )或减(-)标记符。另外，该数值后可能有一个可选的单位标识符。另外，CSS2规范定义了两个单位类型：绝对单位和相对单位。绝对值指定单位，而相对单位指定一个与另一个值成比例的值。下面的列表列出了相对单位标识符：

em：元素字体的高度。它与使用该字体的元素的字体大小属性计算值相等。当它出现在字体大小属性值本身中时，会出现异常，这时它指母元素的字体大小。

ex(x-高度：CSS2规范将它描述为小写字母x的高度。

px(像素)：它与背景或屏幕的分辨率有关。根据显示器分辨率输出不同像素，由于用户的喜好不同，显示器的分辨率可能会有很大差异。

2、字体的使用

网页字体的使用一般选择宋体等比较常用的字体。不要出现生僻字体，防止用户因没安装对应字体造成显示错误。在网页中Arial就是一种字体的名称，默认的浏览器定义的标准字体是中文宋体和英文times new Roma字体。如果你没有设置任何字体，网页将以这两种标准字体显示。同时，这两种字体设计也可以在任何操作系统和浏览器里正确显示。

windows另外自带了40多种英文字体和5种中文字体。这些字体，你也可以在网页里自由使用和设置。凡是使用windows操作系统的浏览器都可以正确显示这些字体，但在其它操作系统里，如unix则不能完全正确显示。网页字体的样式一共有四种：正常体(regular)、斜体(Italic)、粗体(Bold)、粗斜体(Bold Italic)。

3、特殊字体或艺术字体的设置

如果你需要用一种特殊的字体来体现你的风格，那么特殊字体或艺术字体最好以图片的方式置入网页。需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。

在网页里，字体的定义语句是：显示文字其中Arial就是一种字体的名称。 如果需要用一种特殊的字体来体现风格，那么如何让大家可以真正看到设计页面呢？解决的办法是使用图片。将需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。时间财富威客网汇聚了百万专业的艺术字体设计、创意字体设计、书法字体设计等威客设计师，只要您在网站发布任务需求，就能够吸引百万专业威客给您最好的服务。

为广大企业、商家、个人，提供平面设计、装修设计、建筑设计、起名改名、策划文案、网站建设、营销推广等服务。若您有类似需要，请点击立即发布项目

另，上也有着各式各样的任务，无论您是拥有技能的专业人士，还是技术小白。都能在上找到您能参与的项目。点击进入悬赏大厅

无论你有什么疑难杂症，威客们都能一一为您解决，点击进入：问答平台。

网页设计字体设计规范

网页设计需要将图片和文字相结合，达到融合的境界，当然文字的设计也是有一定的规范的，下面是关于网页设计字体设计规范，欢迎参考！

网页设计常用字号

最好用偶数字号

1、Header导航文字12号或14号;

2、Menu导航文字14—18号;

3、Sidebar文字12号或14号，

4、一级菜单使用14号、二级菜单使用12号

或一级菜单使用12号加粗、二级菜单使用12号

5、Footer 文字12号或14号

6、正文：大标题文字24—32号;标题文字16或18号;正文文字12号或14号

7、标题文字字号，18px，20px，24px，28px，32px， 尽可能使用双数

8、按钮文字：比如登录、注册页面按钮或其他按钮，文字14—16号，可根据实际情况调整大小或加粗。

9、同一层级的字号搭配应该保持一致。比如，同一层级的版块中标题文字和内容文字大小的一致性

在苹果官网中，产品展示文字以64号和32号搭配，文字内容简短有力，可读性强，同时非常具有视觉冲击力，突出显示了品牌特征。

字体排版规范

一、最佳易读性规范

1.行宽

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

2.行高

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

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

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

3.行对齐

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

4.文字留白

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

5、CRAP原则(carp)

对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密性(Proximity)

字体选择

字体：中文：宋体，微软雅黑，方正系列(无状态)

字号：网页中正文/导航字号在12px-18px之间

英文可以偏小一些 10px-16px

再小识别性就不是特别好了

中规中矩，经典通用

中易宋体

Win最常见的'字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。

微软雅黑

大段的微软雅黑字体排列略显厚重，如果是在网页上长时间浏览，会让人的眼睛产生不适。相比而言，衬线字体装饰性强，具有易读性，所以宋体更适合知乎网站这种大段文字网站

微软雅黑给人的感受包括平和、干净、简单、平静、专业

华文细黑

Mac下的默认中文。

英文

Helvetica:

被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。

Arial:

Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常

Lucida Family:

Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。

Verdana:

专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。

Tahoma:

也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。

Verdana：

是一套无衬线字体，由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现，因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。

Georgia:

基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。

有些偏艺术类的网站的大字会使用lobster。更艺术的网站就搜索free font，或者font freebie吧

Trebuchet、Georgia、Times New Roman、Arial、Lucida等字体在26px或更大像素时效果是比较好的，非常适合作为正文的标题。

网页banner字体

网页banner的字体选用方法是要根据banner的主题，去挑选字体，因为字体本身也是有性格的

第一类，稳定型(协调，齐全，稳定，高质)

微软雅黑、冬青黑体、宋体、华文细黑、方正正中黑、方正兰亭系列

第二类，刚硬，锐利，清晰，强烈

造字工坊力黑体、造字工坊版黑体、造字工坊劲黑体、锐字逼格锐线体简、张海山锐线体、华康俪金黑、蒙纳超刚黑体

(更适用大气，热烈，权威，声明等主题)

第三类，轻松，手写，可爱，童趣，亲切

方正经黑、华康海报、汉仪小麦、方正稚艺、新蒂下午茶、汉仪歪歪体、新蒂小丸子

(适用于，游戏娱乐活动海报，h5广告页面，儿童/女性主题)

第四类，灵动，清新，秀雅，精致，古韵

方正清刻本悦宋简体、方正宋刻本秀楷体、方正宋刻本、秀楷体、汉仪全唐诗、简康熙字典体、祥南行书体、造字工房、刻宋

(适用于复古，典雅，传统，品质，灵动等主题)