<p class="zw">印刷颜色不是指文本的颜色，而是页面上的文本块的密度。选择合适的密度不仅对设计外观很重要，同时对可读性也很重要，尤其是在响应式Web设计中，它特别有用。</p> <p class="zw">有多种因素会影响印刷颜色：字体、字母间的间隔（在CSS中，我们称之为字母间距<code>letter-spacing</code>，在其他设计领域称为tracking），以及文本行之间的空间（在样式表里，我们称之为行高<code>line-height</code>，但在其他领域是指一些非常相似的行距)。</p> <p class="zw">下面看看这三种因素在小屏幕上的截图。</p> <p class="图"><img alt="0607.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/36.jpg"></p> <p class="zw">仔细观察这个例子，你应该能看到中间的图会显得比较暗，即使它使用了与其他设备一样的尺寸和颜色。因为我们选择了某种字体，这种字体使设计看起来更黑。</p> <p class="zw">再次使用这个例子，为了让印刷颜色变得更加明亮，我增加了行高<code>line-height</code>。这样就直接影响了排版的外观。</p> <p class="zw">这就是告诉我们，设置响应式断点的时候，需要密切关注行高<code>line-height</code>是如何影响排版颜色和可读性的，这和我们关注的字号一样重要。</p> <p class="图"><img alt="0608.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/37.jpg"></p> <h3 class="sigil_not_in_toc" id="nav_point_82">调整行高</h3> <p class="zw">根据经验，当文本的宽度变长时，我们应该增加行高<code>line-height</code>，如在不同尺寸的设备上显示，或者在相同设备的竖屏和横屏旋转。然而，通常设计师只对<code>body</code>元素设置一次行高<code>line-height</code>，而忽略调整屏幕宽度和文本长度增加的情况。我们应该不断调整行高<code>line-height</code>，在响应式断点和活字校样时就开始，在更宽的列和更大的屏幕上，增加文本的行高<code>line-height</code>。</p> <p class="图"><img alt="0609.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/38.jpg"></p> <p class="图题">我将跨响应式断点调整行高的过程称为比例优先（proportional leading）。我在2010年7月时第一次提出了这个概念。</p> <h3 class="sigil_not_in_toc" id="nav_point_83">检查字体加粗</h3> <p class="zw">随着时间的推移，高分辨率Retina屏幕变得越来越大，从iPhone 4，到iPad，然后是MacBook，最后到iMac。可是，不是每个人都那么幸运地拥有一块高分辨率显示屏。因此，设计师和开发者必须考虑在低分辨率或高分辨下，网页如何渲染。</p> <p class="zw">活字较样再次成为检查字体跨屏幕分辨率的一种好方式。选择并使用一款时髦的细字体之后，必须确保它以低分辨率或高分辨率渲染时都能很好地呈现。</p> <p class="图"><img alt="0610.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/39.jpg"></p> <p class="图题">当以低分辨率渲染较细的文字时（左），我们可以通过给同一款字体加粗来修正它（右）。</p>
