@Wenzel_Hu 在这篇文章中，我们精选了一些网站例子来带你体验一场引人深思的网页设计之旅。当然了，这些网站都有些棒呆了的的交互性设计，然而，它们的字体选择、排版风格和间隔的使用风格才是我们选它们作为本文中的例子的原因。在排版的过程中，考虑排字和网格结构也是很重要的。

　　为什么网格结构和排字对于排版至关重要

　　排字和网格结构是读者和文字之间进行有效交互的关键性因素。在Thinking with Type(想想字体!)一文中，Ellen Lupton详尽地解释了用网格工作的益处，她特别强调了网格的便利性，网格在整合文字和图片之中的作用，以及如何用网格组织一个复杂的层次结构。

　　字体、字号和一行文字的尺寸之间有着不可分割的联系。当一个网站的外观在不同的设备上看起来并不相同时，优秀的设计师们需要将阅览者需要阅读的量控制在吸引人和可消化的范围内，小心翼翼地维持浏览者的兴趣。然而，失去浏览者的兴趣是随时有可能发生的。 比如——出于不同的原因——一长串的细小字体可能就是阅读的灾难，同时，挤在一小行的大号字体同样会带来困扰。

　　在下面一个情形中，不停地换行可能会淹没了标点符号，使得读者不得不回过头来再去看那行小字。在以上两种情形下，超长或者超短的一串文字都有可能使得读者对它们失去兴趣。

　　这两张图片很好地解释了将特别细小的字体运用于很长一串文字或极短一串文字的不妥之处——既不方便阅读，也不吸引阅览者。(Bright Pink设计)

　　重要程度不同的段落需要不同层次的强调来引导浏览者浏览网站，并在期间保持他们的注意力。在相对同样重要的段落之间使用同样的板式就是种很赏心悦目的引导方式，不连续是会带来困扰的。

　　当同样重要的段落文字分成多纵列时，突然毫无理由地改变段落的横向宽度就会带来混淆。(Bright Pink设计)

　　网格结构

　　在这个部分，我们挑选的网站将向你展示网格是如何有效地进行排版、吸引访问者、使内容可读及构造和支持网页的层次结构的。

　　SILKTRICKY

　　Silktricky的网格结构由六个纵向的方格组成，将信息拆成有吸引力的几个部分。标题所采用的排版方式一致：Bookman Light Italic字体较轻的色调与Futura Condensed Bold的厚重的视觉冲击形成了鲜明对比。

　　这些字体很好地互为补充，创造了在大小，字形，纹理，厚重上的强烈变化。这种对比促使着你想要看更多信息，将你的注意力吸引到方格中的描述性的无衬线文本上。

　　当你点击按钮时，文本会扩展成数个段落并延伸两列，刚刚好使得你目光停留在文本上的同时也不会超出网格的范围。这个拓展出的段落文字创造了另一种排版方式和色调，有效的与标题做对比，展现了一种视觉效果的可喜变化。

　　PERCUSSION LAB

　　Percussion Lab(打击乐实验室?)同样有效地利用了网格。灵活地使用了四个方格来展示四位投稿艺术家的详细资料，并且都包含了有关日期、艺术家、类型的细节信息，很好地融入了层级结构中。标题部分延伸到两个方格的宽度并展示了音轨列表和有用的细节信息。

　　灵活地使用了四个纵向方格得字体，衬线和无衬线的混合，厚重程度等特性的改变强调了层级结构。版式的细节和方格结构使得浏览者产生并保持兴趣。

　　THE NEW ART GALLERY WALSALL

　　英国The New Art Gallery Walsall的网站使用了无衬线的字体使得网页看起来整洁清楚，有吸引力，但是，字体大小的变化和网格恰如其分的运用使得这个网站使人印象深刻。文本主体内容在左边竖排下来，而其他的元素，比如超链接，占据了右边部分。

　　整洁的字体的使用和大胆的留白反映了这个美术馆本身的构造，其内的收藏品和它本身的美感都使得艺术显得那么的可近可亲。