排版：原则、方针和常见错误

网站排版的基本概念：

1.清晰度

清晰度受字体设计、屏幕优化和微观版式影响。大写字母会比小写字母更难以扫读，正体字比斜体字更容易识别。正文文本和背景合适的对比会提高清晰度，适宜的行宽和行高也能提高清晰度。

2.可读性

可读性受布局、内容块的摆放和独立栏目的展现影响。
1.行宽（每行文本的长度）：西文45-75个字符为最值得推荐的阅读长度。一般66个字符为最佳。
hhsdfasdfg,jdskdfgasf,doeksjdjfk,sjahsjfkdl,sjahshdjfk,sjdhfkajsh,zmsndx(这一行为66个字母，一个字母占一个字符，汉字占两个字符)
2.行高（一行文本的垂直高度）：行高是两个连续文本之间的距离，或两行文字基线间的距离。

• 一般，行高会设置成字体的1.5倍。
• 行宽越大，行高也应该越高。
• 无衬线字体比衬线字体需要更大的行高。
• 页眉比正文需要更少的行宽。
• 粗字体比细字体需要更大的行高。

3.字间距，即字母或汉字之间的距离，也是文本块的额密度。
letter-spacing

• 可以根据行宽进行调整。
• 字符间距经常用来突出副标题。
• 行宽越长，字间距也需要相应增加。
• 一些衬线字体的字符有时可能会重叠，即所谓的连字，如：AV,ft,co,并检查是否能分辨出vv和w的区别，即使是最小程度的不清晰，也会使文字完全不可读。

4.单词间距：单词之间的间距，可以根据行宽和行高进行调整。
word-spacing

• 行越短，单词间距越小。

3.空白是最好的间隙

空白使正文的连续文本能够呼吸，并帮助读者获取网站传递的信息。
空白页被称作“负空隙”，是构图中元素之间的空隙，或者设计中没有被使用的部分，包括图形、外边距、页面和分栏（宏观空白）之间的空白，以及文本行之间、单词之间和图片标题之间（微观空白）的空白。
空白并不一定是白色的（空白这个词出自印刷领域，白纸即代表了空白。）
空白提供了线索和定位，有助于产生自然的、令人满意的阅读体验。

1.活动空白：
把用户注意力从一个元素引导到另一个元素，组织布局并帮助简历信息结构的空白。

2.非活动空白：
把文本规划成块的空白。

image.png

空白起了主导作用，突出了所展示产品的质量。

4.排版和网格

由一系列垂直和水平的轴线构成的二维结构，用来使内容结构化。
网格可以作为设计师以一种合理的、自觉的、自然的方式组织文本和图片的支架。
会产生韵律、秩序和连贯，经常被设计师用来更好地预见信息将放置在哪里，以及使创意变得理性化。
网格可以使图像元素排版快速而有序地结合。

YUI grids css栅格框架中的一种

能更容易地使用网格开发网站，与此类似的还有Blueprint、Typogridphy(基于960.gs)、YAML和Bootstrap

不是靠直觉来决定设计元素该放置在哪里，网格在一个固定的二维结构中，允许元素精确地定位。
基于网格进行设计时，通常从空白画布或白纸开始，为寻找合适的网格，一般用布局规则和公式（黄金分割、三分法等）来把白纸分成适宜的部分，并且选择内在的、令人满意的页面和分栏比例。

三分法：

• 在摄影三分法中，摄影师需要将场景用两条竖线和两条横线分割，就如同是书写中文的“井”字。这样就可以得到4个交叉点，然后再将需要表现的重点放置在4个交叉点中的一个即可。

• 在网页中，三分法构图是指把画面横分三分，每一分中心都可放置主体形态，这种构图适宜多形态平行焦点的主体。

  
  

黄金分割法：
1.618 : 1 = 1 : 0.618 = 黄金分割比例

黄金分割可能是最常用的网格布局方式，对固定布局（px）、流动布局(%)和弹性布局（em）同样适用。

垂直节奏：
排版中的空隙，一些比例合适的间隔。增加了网页的韵律、体现排版中的和谐。

维持垂直节奏的关键是行高，即两条基线之间的距离。行高设定了整个文本流中的网格，合理的行高有利于顺畅的阅读。
垂直节奏和字体大小有关，使用相对单位em值作为行高，可以维持页面布局中的平衡，而不用管字体的大小、样式和种类。

（挖坑在这里！！！！有关文字排版一个很重要的知识点，可是怎么尝试都跟书上描述的不对啊，得重新单独阅读。）
可以参考：怎样让你的网页有垂直阅读节奏