Typography网页排版的注意事项(一)

Posted by vino on October 2, 2013 under 设计, 译文 | Be the First to Comment

视觉冲击和页面布局

好的排版靠的是一种字体和另一种字体的对比,并且要把这种对比放在文字段落和留白区域中,才能更好的整体上去把握这种对比。没有什么比强烈的对比和个性的形式更抓读者的眼球的了。你需要把这些特性精心的设计到你的页面里。如果你什么都用粗体,那么所有的都没有重点,结果反而是看起来你在对着你的读者大吼大叫。

(相信没人这么啥,老外写文章习惯把所有读者当初学者,极易入门,此可见一斑。这是我以后如果写教程,一定要注意的。)

如果你每个页面塞满密密麻麻的内容,读者在他们脑海看见的就是一堵灰灰的墙,他们会本能的排斥这种缺乏视觉冲击(visual contrast 视觉对比)的排版。仅仅是让这些字体都变得更大一点,根本没有任何用处。即使粗体变细体非常快,如果一切都是粗体,那么显示出来的效果也就没了粗体。(全是粗体,也就没有了对比)

保守使用主要的html标题。对过多的粗体HTML标题的一个替代方案就是在HTML里使用italic,bold这些HTML标签来控制HTML样式,而不增加字的大小。然而,你要明白,用这些标签来控制你网页的排版,存在一些不利因素。因为HTML里的标题标签(H1 H2等等)是用来识别你文中的标题和副标题的,如果你在网景浏览器里使用了FONTSIZE标签和使用像BOLD这样的样式化,网景(NETSCAPE)浏览器自动索引它,文本解析程序很花时间来处理你的网页。
(第一次翻译,翻译得模模糊糊啊,大意是说,在网页设计的时候,在HTML代码里标题尽量避免直接用fontsize ,blod这样的标签来定义网页的显示,而应该用CSS单独样式表,标题应该用H1,H2这样的标签来显示,而不是用FONT SIZE ,BOLD这些来处理,这样会增加某些浏览器的处理时间和显示网页的时间)
对于不是新手,应该知道这个哈,因为H1 H2这些,不仅仅是告知浏览器是标题,也告诉搜索引擎的蜘蛛这是标题,方便引擎索引保存你的网页,易于被搜索。

视觉逻辑与结构逻辑

最初的HTML标准建立者是一些物理学家,他们想要一个标准,可以最少的标记语言达到显示信息的逻辑结构来分享文件。因为他们很少有兴趣在文件的视觉呈现这方面。没有精确的排版和页面布局在当时也是可行的。在单纯的注重HTML文档内容的结构逻辑情况下,这些最初的WEB开发者忽略了复杂的平面设计和排版的视觉逻辑。

负责编撰HTML语言的标准组织应对众多平面设计师的抱怨,比如heading tags即标题标记 H1 H2 H3 显示过于笨重,即过大的标题和副标题。通过样式表和新的字体控制标记未来的版本很快允许你去特别定义每个标题的大小,因此,在不放弃使用HTML (H1 H2 H3 H4 …)标题标记的大量的优点,你可以设计出更复杂的排版。

(哎,我不知道这个是什么时候的老黄历了,现在都CSS3了,早可以这样定义了。)

字体和易读性
Type and legibility
我们一般是从字词的整体形状上去识别内容,而不是先把一个单词分解成一个一个字母然后在组合这样去识别单词的内容。

(所以,有的观点也认为,认字和认词是将一个单词图形化整体来认识。所以,有观点认为快速阅读,就不一定要每个字母都设计得很简单,设计成无称线体,其实有称线的字体只要涉及合理也可以让人快速阅读。这个争论在我个人观点还没有认同的一方。都持怀疑态度。但从整体上去识别单词,或字词的含义,我觉得是认同的。)

比如word_shapes

这样是一个一个单词 整体去记忆和识别。

要避免标题全是大写字母,这样很难阅读,因为单词都是由单调的方形,几乎没有特殊的形状抓住读者的视线。

lowercase_vs_uppercase

 

(小写标题 和大写标题的区别 见上图)

易识别易读主要靠的是单词的句子的上半部

关于易读性,你选择小写和大写会有很戏剧性的效果。一般,使用DOWN STYLE(标题副标题的第一个单词首字母大写)这样,更容易识别,因为我们阅读的时候主要扫视单词的上部。

legibility_top

注意你看,阅读同样一句话只看它的下半部有难读啊,几乎认不得。
legibility_bottom

如果你让你标题的每个单词的字母都大写,这样反而会干扰读者视线扫视单词的形状,影响阅读。
initial_caps

 

 

 

References

原文出处:webdesignhelper
Bringhurst, R. 1992. The elements of typographic style. Washington: Hartley and Marks.

Be inspired by this beautiful typography design from Linzie Hunter.
Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books.

Spiekermann, E., and E. M. Ginger. 1993. Stop stealing sheep & find out how type works. Mountain View, CA: Adobe Press.

typoGRAPHIC A concise, elegant essay on typography and letterforms from razorfish/bluedot.

Add A Comment