留意你的”短线”与“破折号”:文字排版的规则

从文字排版上便可以很容易区分设计师是否是一个新手或是老岛。一个经验丰富的设计师能在看设计的时候察觉创作者是否懂得如何排版。排版设计绝对不是设计师内部的谈资，而是几千年以来从语言书写中得来的一种累积，排版使得信息的沟通更高效和优雅。

而在互联网上进行排版设计时我们需要考虑到一些全新的挑战和限制。下文中的一些规则将会帮助你更清晰的使用文字排版。

设置文本内容

优秀的排版设计用于保证信息的传达，而有关信息传达的基于在于文本主体的内容－简明的文字块。以下是几个常用的方式寿命你让你的文字块变得更清晰明了。

段落前缩进还是空行？

在一段文字的结束和另一段开始前，你可以使用首行缩进，或是插入一个新行。但是不能同时使用这二种方式。

首行缩进
首行缩进的时候应该缩进1em（em是指一个当前字体的大小，如果文字大小是12px，那么1em=12px，这是一种相对单位）。文章或篇章首段不允许缩进，在一个新篇章(Section)开始时，是不允许首行缩进的，因为这段文字将会是这一页或这一篇章的第一段。

段间空行

二段之间的一个 1em的空行（如同在输入时按Return键二次）用于表明段落关系其实是多多有余，0.8 em的距离将会更加合适

将文字设置成左对齐使得文字更利地阅读。因为浏览器所提供的排版控制比较有限，等距调整文字会让文字块之间有太多的间隙。

左对齐 (右侧不齐)
当文件左对齐时，每一行都会很自然的换行，同时造成右侧产生不对齐的效果。这样能够更好的进行阅读因为眼睛根据每一行的长度不一而区别一行的结束。另外一些研究也表明读者更喜欢左对齐的阅读方式。在左对齐的情况下，不应该再使用断字处理，如果再断字就违背了右侧不齐的初衷。

避免等距文字调整
等距调整让每一行的横向长度一致。而正是因为每一行的长度相同，使得字母的间距以及单词之间的间距变得奇怪。这使得文本丧失了整齐的肌理感。

高级的桌面排版程序（如Adobe InDesign）有一些非常成熟排版系统来做等距调整，使得在做等距调整时，不会产生过大的间隙。它使用了一组处理程序用来综合计划字母间距，词间距，断字和字符缩放（非常细微的调整某些字母的宽度）来保证调整后的文字依然有很强的肌理感。

由于CSS中没有断字处理。除了一些Javascript库(JavaScript libraries that handle hyphenation)进行断字处理，以及CSS 3的text-justify属性之外，浏览器并没有非常好的系统来保证文字在等距调整后的渲染显示。这使得在网络上的文字等距造成很多大的间隙，并不利于阅读。

当使用最佳的行阅读长度为(50-80字符，或8-15个单词)的情况下，如果使用等距调整的话，几乎总能产生过多的间隙问题。在网络上应避免使用等距调整。

每句中断后一个空格，而非二个

很少有人讨论在句末后应该放置一个或是二个空格的问题。

从维多利亚时期这个传统一直保留至今。之所有有这个传统是从打字机发明之时。因为早期的打字员使用Monospaced字体（即二个字母间的距离永远是一样的），因此打字员使用2个空格用来增大句与句之间差别。而现在计算机和字体已经做到了按比例的字母间距（即字母间的距离由字型决定，并非完全一致），这样的一个传统看来已经过时，使得文本间有太多的间距感。

一个空格足够区分二个句子，同时还能保证文本块的连续性。

如果大家还怀疑这个结论的话，考虑如下的情况：一个新句子的开头，已经由一个句号，一个空格以及一个大写字母明示。再加入一个空格使得在阅读时在二句之间挖了一个大洞一样，中断了读者的阅读。

打字员也许希望继续使用二个空格，但排版设计者应该不再使用。

合理使用横线（破折号）

大多数字体都拥有二种不同的横线破折号：en横线(–, –,相当于小写的“n”的宽度) 以及一个em横线（—, —,宽度相当于小写的“m”）。不要与hyphen连字符(-)混淆。

连字符

连字符与破折号由于形式上类似，使得在使用的时候经常混淆。某些字体如同Adobe Garamond Pro特意让连字符保留着传统的样式。这种连字符看上去像是不轻易的手写体；有时候你还会发现使用连字符代替减号；不管怎样，在大部分字体是都保留着较长的字符样式用于表示连字符。

尽管连字符看上去很像破折号或减号，但他还是一个符点符号而非数字符号。他应该使用于字母断行连接时。在网络上并不需要有过多的担忧，因为在浏览器中并有标准的连字控制功能。因此连字符常常用于特殊的组合（如“fine-tuned”），或是电话号码之间以及其它一些少有的场合（更多细节可见Wikipedia）。

短破折(En)与长破折(Em)

在 The Elements of Typographic Style一书（这是一本非官方的现代排版设计宝典）中。Robert Bringhurst推荐使用en左右加上二个空格。这在视觉上将不会像em一样引来很大的中断感。而在《芝加哥样式手册》（The Chicago Manual of Style）中则推荐使用em破折。为什么要与芝加哥样式手册相违背呢？理由是样式手册中考虑的更多的是关于标点符号的用法，而不是文字排版。短破折左右向空格的效果与不加空格的长破折的效果一致，但是从排版的角度上说是一种轻微的中断。当我在写书时我与我的编辑有关于这个问题的很大的争议。

另一种用法是使用二个连字符来表示破折号，这一做法同样来源于打字员时代由于打字时的为了视觉上对文本进行有效的区分。而现今的丰富的字处理技术使得我们无需再这样处理。

同样，短破折（en）用于指示一个数字范围（如”7-10天”），当这样使用时不需要左右加空格。

使用聪明引号（Smart Quotes）

当你在键盘上键入 “号时，你所输入的并非真正意义上的引号（除非你在字处理程序之中进行了自动格式化）。真正的引号我们称之为“Smart quotes 聪明引号,”左右引号必须形成一个开始和结束的意义。如果使用单引号，则是‘’。像WordPress一类的程序有时候会自动转换你的引号到smart quotes或使用其它插件来处理。

Smart Quotes 现实中的情况

CNN使用的是笨引号(dumb quotes)，看上去沉闷不亲和，而The New York Times使用的是smart quotes,看上去整洁成熟：

Smart quotes是如此的生动以至于可以用作装饰使用，例如Jason Santa Maria博客中的这种用法。

度量单位撇号

同样，作为度量单位时使用的撇号，也应该使用smart quotes的形式如下：

很多桌面出版程序有时候会自动（错误的）插入一些不合适的符号使用，这些都可以在程序的设定中修改，但是最好的办法就是从原始的文本编辑器中键入最合适的符号，再copy/paste过来。

合理的数学符号

有时候因为匆忙的缘故，我们常常使用错误的数字符号。例如上面我们提过连字符不是减号(−, −)。另外x并不是乘号（*）(×, ×)

正确的分数表示不光是加分数符号，还会使得字符更加易于识别，使用普通的斜线(1/3)并不如分数符(½)看上去更酷。

当然有时符号并不能够完全满足你的要求，如有时候98¢与106° F描述时，你也许会更倾向于使用“cents”和“degrees”。

表述更多时总是使用省略符

有时当显示更多内容时，大多数情况我们使用三个句号来表示(…)，但很多字体其实已经有了专门的字符(…, …)，这些字符的设计更漂亮，没有过多空格。尽管芝加哥样式手册中推荐你在使用三个句号时还在其中加上空格(. . .)，但是任何一个排版设计人员都知道这看上去使得文本中断得太多。某些排版设计师倾向于使用小一些的空格间距(. . .)。总之尽量不要在句号间使用完整的大空格。

音标符号并不过时

在拉丁语系的排版中还会用到音标符号，Mac OS X下，按往Option同时按e，然的再按任意一个字母，你将获得该字符的升调符号（é）。如果使用Option同时按u, i 和或~你将获得其它音标符号。

字母连写

在早期铅字印刷时代，由于每个字符是一个元素。因此很难让二个字符靠得很近，例如“fi”，由于f的顶部向右伸展过远，同时i顶部的小点使得这二个字母无法继续靠近。但现在大多数字体（尤其是经典字体如Adobe Garamond）拥有连字功能能够将字母的型状进行连接。一些现代字体如Helvetica也拥有连写功能但是效果非常的细微。

下面你可以看到有关字体中的连字效果。在Adobe Garamond中这种效果要比Helvetica中更为明显。除了“fi”的情况外，还有一些类似的情况会发生在“fl,” “ff,” “ffi” 和 “ffl.”之中。以下你可以看到Apple在这方面的设计使得“ffl”在“iPod shuffle”中显得非常漂亮。

使用连字技术

当然，每次需要连字的时候输入特定的连字字符是不切实际的。如果你这么做了也有可能在某些字体条件下使得连字无法正常显示。幸运的是，像Ligature.js这样的jQuery插件能够自动的帮你判断需要连字的地方并进行处理。

但需要注意的是：即使连字字符可用，你也有可能造成用户搜索时的困扰。当前，IE浏览器以及一些基于WebKit的浏览器如Chrome，Safari支持连字字符的搜索功能。而Firefox则不支持。

CSS3的文字连字属性font-variant-ligatures

CSS中所支持的连字属性不会影响HTML中的代码，浏览器将会完全支持搜索功能，但这需要所有的浏览器都开始支持CSS3才能开始使用这一属性。

所以，考虑到这些因素，在内容上使用连字并不是一个最好的选择，而标题或头条显示中也许可以部分应用，也能够让用户感受到更明显一些。

合理使用

显然，继续学习与应用这样一些文字排版的技巧看上去非常乏味。幸运的是，大部分网络上的内容管理系统都有一些插件可以帮助我们，另外一些新的CSS3的属性也能帮助我们提高我们排版上的工作效果。

但是综合所有的情况去考虑设计和制作，性价比问题是首要的。你必须考虑哪些细节你需要实现而不会造成后续的麻烦。哪些是文字排版中最最重要的，然后你再在你的项目中做明智的决定去应用这些。

其它资源

你也许会对下面的一些资源有兴趣:

How to Type
学习如何在电脑上键入这些字符。The Elements of Typographic Style, Robert Bringhurst
Amazon上的一本非官方现代排版设计师的宝典。这本书中拥有许多你可以想象的有用的排版建议。The Elements of Typographic Style Applied to the Web
有关Robert Bringhurst’s 经典图书的针对网络版本。本文根据David的新书Design for Hackers: Reverse-Engineering Beauty中的一个章节写成，本书将在2011年9月发布。

原贴出处：

http://www.smashingmagazine.com/2011/08/15/mind-your-en-and-em-dashes-typographic-etiquette/

翻译：

http://experience10.com/