网站设计之字体在页面排版上的完全攻略

我们每天设计都在与字体关系密切。但是我们一直没深入细致在乎他们的存有。我们没较好地采用过他们，甚至误用他们。这一切是因为我们不介绍他们。字体做为排印的关键元素之一;在设计里也就是最深奥的一门学问之一。本文中，就与大家去一起深入探讨一下这门深奥的学问。

字体的类型

英文字体(Typeface)，分成几种小类，这就是在采用英文字体的时候必须晓得的基本知识：

一、衬线体(Serif)

衬线(serif)就是笔画边缘的装饰部分。右图中红色标示的地方就是衬线。

衬线设计的初衷就是为了更确切地标明笔触的末端，提升识别率为，提升写作速度。另外，采用衬线字体可以使人感觉更加的正统。所以我们常用的英文书籍，特别就是论文、小说，很多都就是采用衬线球状体顺利完成正文的。

网页设计中常用的衬线间有Times New Roman和Georgia。右图左边就是12px的Times New Roman字体，右边就是12px的Georgia。

在中文里，我们采用的宋体就是对应的衬线字体。

二、非衬线体/FZL线体(Sans-serif)

字体如果不拎衬线的话，那么就称作非衬线体或者FZL线体。右图就不为衬线体。

网页设计中常用的非衬线体相对就比较多了。存有Arial、Verdana、Tahoma、Helivetica、Calibri等。右图从左到右依次就是Arial、Verdana、Tahoma:

值得注意的就是，虽然在书籍中，衬线字体被广为地应用领域，但是在互联网上，衬线字体很少被采用。由于电脑屏幕分辨率与书籍不具可比性，所以正文10～12px的 衬线字体在电脑屏幕上就是很难辨识的。右图就是没Cleartype时，10px的Verdana和10px的Times New Roman的对照。大家可以辨认出，左侧的Verdana可以被较好的识别。右侧的Times New Roman辨识相当困难。

三、等阔字体(Monospace)

等阔字体事实上只针对西文字体。因为英文字母的宽度各不相同。比如i就要比m较窄很多。编程时表明代码，如果字母左右阔那么排印将很难看看。我们在DOS命令行中，可以看见采用的就是等阔字体。

编程建议的等阔字体存有如下建议：

1、所有字符等阔;

2、简约、准确、规范的字符形体;

3、积极支持ASCII码点为128以上的拓展字符集;

4、空白字符(ASCII: 0×20)与其他字符等阔;

5、“1”、“l”和“i”等三个字符不易区分;

6、“0”、“o”和“O”等三个字符不易区分;

7、双引号、单引号的前后部分不易区分，最出色就是镜像等距的;

8、准确的标点符号外形，尤其就是大括符令、圆括符和方括符。

常用的等阔字体存有Courier，Courier New

四、手写体(Calligraphy)

顾名思义，手写体就是手写风格的字体。有时我们也叫做它书法字体。中文的书法字体大多都比较死板。个人更所推荐采用日文的书法字体。日文书法字体跟加妩媚，更人性。但时采用日文书法字体缺点就是大都都就是简体中文，另外很多汉字可以缺乏。

五、符号体(Symbol)

Windows里最知名的符号体就是Webdings(回忆起以前还在Windows 95的时候蛮惯用的……)。下面就是Webdings字体的几个：字体的样式

常用的字体的样式分成：正常Normal、斜体字Bold、斜体Italic。

直观来说，斜体字就是字体可以更加白，更加“细”。斜体就是将字轴微微弯曲。他们都就是用作在篇幅内特别强调某段文字上。

在讲到斜体字的时候，我们很难M18x至CSS里的font-weight(字重)属性。我们晓得font-weight(字重)属性值除了我们平时采用的 normal，bold外，除了bolder,lighter,100~900等属性。那么这个100～900的值就是什么呢?事实上，100～900并没有 存有单位。杰出的字体可以对相同的字重提供更多相同的设计。如果字体事先内置了相同等级的厚薄程度的设计，那么这几个数值将分别对应每个等级。比如Zurich字 体，就涵盖了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六个字体。这样一来，Zurich Light对应的就是100、200、300三个数值，Zurich Regular对应的就是400也就是“正常 normal”，Zurich Medium对应的就是500，Zurich Bold也就是“斜体字 bold”对应的就是600、700，Zurich Black对应800，最后，Zurich UltraBlack对应的就是900。

对于中文斜体，通常在网络上就是不采用的。因为中文笔画多样，采用了斜体将难以辨认。

单位

我们的Web设计中可以使用一些单位：

1、点(pt、point)

72 points = 1 inch，1英寸就是72点。另外，1皮卡(pica)=12 points

2、像素(pixel、px)

像素就是电脑屏幕上的一个最轻的图像单元，通俗地说道就是屏幕上最轻的一个点。

3、DPI、PPI

DPI 全称就是Dots Per Inch，点每英寸，PPI全称就是Pixel Per Inch。他们就是解析度(Resolution)的单位。也就是说，1inch的长度上要精心安排多少个点(像素)。握个例子，通常的，我们的显示器大概就是 72ppi，也就是1英寸的长度上，存有72个点(像素)。dpi/ppi越高，解析度就越高，也就是说，颗粒越大，图像越柔和。一般来说，照片的解析度在 240dpi～300dpi之间，所以为什么照片看上去，必须比屏幕上看上去必须精细得多。杂志印刷用133或150dpi，高品质书籍使用350-400dpi，因为大多数印刷精致的书籍印刷时用175至200dpi。所以为什么同样物理大小的文字，在书上看看，Obrero在屏幕上看要准确得多。也就是我们前面提及的，英文书籍印刷，为什么可以大胆得采用Sans-serif字体。

dpi和ppi之间实质上没差别。真的必须找到差别，那么唯一的差别也许是dpi常常用作叙述扫描仪和打印机，而ppi常常叙述屏幕的分辨率。

4、ex、x-height

常在CSS中采用。1ex = 小写字母x的高度。

5、em

常在CSS中采用。当然，em可不是则表示小写字母m的高度(事实上，小写字母m通常和小写字母x的高度就是一样的)。1em = 字体的大小的100%。就是一个倍数单位。

间距

1、行距(Line-height、Leading)

说道至行距(行间距、Line-height、Leading)，我们必须先必须自学一个术语叫作基线(baseline)。还回忆起我们刚学英语的时候写下字母用 的那个线格簿子吗?那根最细的横线就是我们说道的基线。基线就是大部分字母所“挤”在的，字体的上升部之上的直线。大部分字体，大写字母总是紧扣基线，并在 基线之上。中文的字体和英文的大写字母情况一样。右图红色的线就是基线。

那么，行距就是指两个相连的行之间，基线的距离。行间距的单位常常采用em，也就是根据字体大小去定义行距。在浏览器中，预设的行距并没一个准则。极具 W3C提供更多的建议，它指出预设的行距必须在1.0em至1.2em之间。事实上，在预设行距的时候，排印上有个原则，就是行及与行之间的空隙一定必须大于单词与单词之间的空隙， 否则的话，阅读者在写作的时候难“以太网”，导致写作困难。充裕的行距可以分隔每行文字，使眼睛难区分上一行或之下一行。近几年Web上对于正文的排在 版，大多讨厌1.5em的行距，尤其就是中文网站。也就是如果采用了12px的字体大小，那么设计师常常讨厌18px的行距。1.5em的确就是一个较好的经 验值。事实上，中文的论文的规范也就是采用1.5em的行距。

2、字间距(Letter-spacing、Tracking)

字间距就是指一组字母之间相互间隔的距离。字间距影响了一行或者一个段落的文字的密度。

3、字距调整(Kerning)

字距调整就是一种因视觉须要而搞的技术处置。直观说道，在两个特定的字符八角楼的时候，你可以为它们单独选定与众不同的字间距。比如说当一个大写A后面追随一个小写 v的时候，两个字符间就可以发生视觉上的更大的间距(实际上字间距就是一样的)，这就是普通的字符间距所无法化解的。如果增加它们的间距，那么其他的字母就可以连 成一团。这时候就须要字距调整去处置了。右图就是一个应用领域了字距调整的例子：

段落

1、行长(Measure)

行长就是指一段文字的宽度。如下图：

存有两个易读性问题与行长有关：

行长越短，须要的越大的行距。行距太小，读者写作下划线时难以太网。行距太小，读者写作行时会感觉到文字不已连续。

正文中，每行40~70个字母为宜。

2、对齐(Alignment)

段落的对齐基本存有四种：左对齐(flush left)、右对齐(flush right)、母葛氏对齐(centered)和两端对齐(justified)。

左对齐就是指设置文本内容，调整文字的水平间距，并使段落或者文章中的文字沿水平方向向左对齐的一种对齐方式。左对齐并使文章左侧文字具备整齐的边缘。同时文字的右边就可以不整齐。所以英文对左对齐也叫作ragged right，意指外形参差不齐的右边。右对齐也类同。

母葛氏对齐就是指设置文本内容，调整文字的水平间距，并使段落或者文章中的文字沿水平方向向中间分散对齐的一种对齐方式。母葛氏对齐并使文章两侧文字整齐地向中间分散，并使整个段落或整篇文章都整齐的

两端对齐就是指设置文本内容两端，调整文字/单词的水平间距，并使其均匀分布在左右页边距之间。两端对齐并使两侧文字具备整齐的边缘。

采用两端对齐之后，两侧的对齐线会很明确，文本块的“慢”的感觉也可以很显著。但是，在英文排印中，当行长很短的时候，采用两端对齐可能会M215某些行词间距过长，某些行词间距过短，这样参差不齐的词间距可以感觉十分杂乱，就像是一件到处都就是补丁的衣服。

3、易读性

易读性叙述的就是排版文本写作时的随心所欲和宽敞程度。实际上，平时的设计的最为显然的目的也是此。除上文中描述的一些原则外，我另外选录了一些小小的易读性原则，与大家互动：

一份设计上至多采用三种字体的大小。

一份设计上至多采用三种字体。

必须确保一定的对比度，但又不容存有过度的对照。阳文(白底黑字)比阴文(黑底白字)必须更容易写作。在#fff的背景上，采用#333的文字必须比#000的文字看上去难受。

必须特别注意文字所在的背景。背景必须单一。防止背景噪声。

“太少即为就是多” 用最少的元素回去表达最少的信息。

使你的链接看上去像一个链接。

本文由深圳网站设计公司卓越迈创公布，转发请注意文章原文！