5.网页设计时改善您网站的版式。

字体艺术是一个棘手的话题，因为它包含了许多元素。虽然可以将其视为设计的一个分支，但可以花一生来精通其所有方面。这里不是提供完整印刷参考的地方，因此我们将讨论范围限制在短期内。

与印刷字体相比，Web印刷字体存在缺陷。最大的区别在于，由于其动态特性，我们缺乏对Web类型外观的完全控制。显然，动态渲染有其优势，但是Web设计人员至少在目前还无法控制结果。用户计算机上字体的缺失，浏览器和平台呈现方式的差异以及CSS的一般支持不足，使Web排版成为一项艰巨的任务，即使这并不令人沮丧。但是，尽管我们可能要等待CSS 3才能实现Web排版的全部功能，但我们现在有办法使其变得有趣，更重要的是，漂亮。

字体栈

有几种相当简单的方法可以明显改善您网站的版式，我们将在此处介绍其中三种。其中之一是字体栈。

字体栈只是基本的CSS。它们使您可以定义字体的呈现顺序。确切地说，我们在这里所说的是字体，而不是字体。有关此内容的完整摘要，请参阅Jon Tan的Typeface！= Font。

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }。上面的属性将为正文提供“Helvetica Neue”的字体。但是，这要求用户的计算机已安装该特定字体。如今，Mac电脑已预装了Helvetica（Neue），但大多数Windows计算机却没有。

字体堆栈的优点在于您可以定义“后备”，这意味着每当缺少定义的字体时，浏览器便会直接查找下一行。当然，这意味着每个人的外观设计都不尽相同，因此我们又失去了一些控制权。但是对于那些不想求助于其他解决方案（例如图像替换）的人，这是目前纯CSS提供的最佳功能。

Wilson Miner使用了我们上面引用的字体栈。Helvetica Neue是Helvetica的改进。虽然Arial几乎安装在每台计算机上（至少在Windows和Mac计算机上），因此是Web的流行选择，但大多数设计人员都喜欢Helvetica而不是Arial。这样，您将两全其美：Helvetica（拥有者）和Arial（以防Helvetica不可用）。

为标题使用了另一个有趣的字体栈：

body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }

只有相对少量的访问者会在Baskerville中看到标头，但这不是问题。它使设计更具特色，同时又不会伤害任何没有它的人。同样，字体栈并不是一个完美的解决方案，但它们确实为您提供了优势。

衡量与领先

度量是线的长度，而领先是线的高度（或垂直间距）。在CSS中，可以通过定义包含框的宽度（例如，段落元素）来控制度量。两者都会影响可读性。如果行太短或太长，用户将无法阅读内容。人们经常用流畅的布局看到这个问题。每行40至80个字符似乎很理想。

可以通过定义line-heightCSS属性来增加（或减少，如果真的需要）行距。通常，将线条高度设置为1.5可以很好地适用于段落。这意味着，当文本的大小为12点时，行的高度变为18点（12×1.5），这为文本提供了喘息的空间。

悬挂行情和项目符号

提高可读性的第三种方法是使用引号和项目符号。不要将项目符号列表和引号的文本保留默认对齐方式，而是将其与页面上其余文本水平对齐。

在最新的《Max Voltar》重新设计中使用了项目符号：

我们添加了红线以强调所有文本如何水平对齐。只需将padding-left项目符号列表的CSS属性设置为0，就可以实现相同的结果。

另一方面，提取悬挂式并不是那么简单。多数设计者都使用背景图片来引号，然后进行相应的对齐：

此处的悬挂引号不会干扰文本的流动。这个细节不经常涉及，但值得投资。

不适用的打印规则

印刷和网络不一样。这似乎很明显，但是很多人都将它们视为相同。打印是固定的，Web是动态的。完全控制Web设计对所有人的外观是不可能的。

垂直节奏，适当的对正文本（带有连字号且不带河流）和多列布局只是Web上几乎（几乎）不可能的一些打印功能。因此，我们对CSS 3充满了期待。但是，CSS 3可能不是一个全面的解决方案，而要完全利用它，可能还要再过几年。我们现在只需要接受这些差异即可：不要将Web视为印刷版的在线版本；而是充分利用网络的内在潜力。

关于图像替换的一句话

图像替换（用图像替换字体的技术）呢？我们已经讨论过字体栈，但是它们不劣于图像替换吗？好吧，这取决于您认为更重要的事情：能够显示所需的确切字体还是具有动态，可访问且对SEO友好的内容？某些图像替换技术已经相当先进，但仍不如纯文本灵活。图像替换很适合标题和摘录，但它并不是正文的解决方案。

6.通过在元素周围添加空白使元素脱颖而出。

白色空间，或负空间，有做什么是不存在。像小节和前导一样，空白为文本提供了喘息的空间和空间的宁静。您可以通过在元素周围添加空白来使它们脱颖而出。例如，复制不应显得局促。为确保可读性，请确保段落具有足够的填充。

香水广告因使用空白空间而闻名。以及衬线字体，效果很好。

例

上面的截图是网站Shift（px）。设计在很大程度上依赖于版式和空白。空白可能会占据页面的大约50％。空白是最简单的方法之一，也是创建视觉上令人愉悦和可读的网页设计的最有效方法。

空白为设计增加了很多层次。不要害怕留下一些漏洞，甚至是大漏洞。经验不足的设计师很想在每个小角落摆一些东西。设计是关于传达信息。因此，设计元素应支持此消息，而不是增加噪音。

大量空白的另一个很好的例子：

令人满意的设计并不需要太多。有些人可能将“极简主义者”与“简单主义者”混为一谈。但是，要实现这样一种风格既不简单也不容易（即使不一定对图形或插图很满意）。

7.网页设计中连接所有元件。

“连接”在这里是一个虚构的术语。这里的连接是指具有统一性和一致性的Web设计。这两个属性证明了设计（以及设计者）的专业性。它们是非常广泛的属性。设计在颜色使用，字体范围，图标等方面应保持一致。设计看起来不错，但仍然会出现不一致的情况。

当设计不一致时，其统一性可能会丢失给用户。整体与一致性略有不同。统一是指设计中的不同元素如何相互作用和融合在一起。例如，颜色和图形是否匹配？一切都有助于一个统一的信息吗？另一方面，在设计的页面之间可以找到一致性。

一致性也许是两者中更重要的。没有一致性，很难有一个好的设计。但是，不一致可能看起来有点“草率”，但可能不会使设计变得“糟糕”。

在本文讨论的七个原则中，连接是最重要的。连接与所有元素的组合方式有关：平衡，网格，颜色，图形，类型和空白。它是将所有东西粘合在一起的胶水。没有这种胶水，设计就会崩溃。您可能拥有漂亮的字体和精妙而精心挑选的调色板，但是如果图形太糟糕或根本不匹配，或者如果所有内容都被塞满了，那么设计就会变差。

这是设计中最难的部分。这不是容易被教导或必须被教导的东西。需要一点自然的能力和经验。但这就是事实，它会使设计看起来非常好。

例

WebDesigner Wall是因为它可爱的图形，但这也是连接的一个很好的例子。当您仔细查看一般的图形和样式时，所有内容都带有手绘水彩外观：文章的图像，水彩的背景图像，手绘的涂鸦和图标，民意测验的样式等等上。对细节的关注使该设计出类拔萃。

结论

好的Web设计不限于这里讨论的七个关键原则。可访问性，可读性和可用性等方面也发挥了作用。

这就是为什么网页设计如此困难的原因。借助众多内容管理系统，博客工具和主题，可以轻松进行设计，尤其是在今天。但是真正掌握Web设计的所有方面都需要时间，而老实说，这是人才。能够制作漂亮的设计只是一个方面，但很重要。