留意你的\"短线\"与“破折号”:文字排版的礼节

标签: 破折号 文字 排版 | 发表时间:2011-08-18 18:40 | 作者:allanex major
出处:http://www.yeeyan.org

原作者:
来源Mind Your En And Em Dashes: Typographic Etiquette - Smashing Magazine
译者allanex

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

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

设置文本内容

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

段落前缩进还是空行?

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

Paragraphs in Mind Your En And Em Dashes: Typographic Etiquette

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

  

段间空行

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

  

Ragged-right in Mind Your En And Em Dashes: Typographic Etiquette

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

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

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

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

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

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

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

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

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

One-space in Mind Your En And Em Dashes: Typographic Etiquette

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

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

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

合理使用横线(破折号)

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

Dashes in Mind Your En And Em Dashes: Typographic Etiquette

连字符

连字符与破折号由于形式上类似,使得在使用的时候经常混淆。某些字体如同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 in Mind Your En And Em Dashes: Typographic Etiquette

Smart Quotes 现实中的情况

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

Smart-quotes-cnn-nyt in Mind Your En And Em Dashes: Typographic Etiquette

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

Smart-quotes-santamaria in Mind Your En And Em Dashes: Typographic Etiquette

度量单位撇号

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

Prime in Mind Your En And Em Dashes: Typographic Etiquette

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

+1 For Proper Math Symbols

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

Math-symbols in Mind Your En And Em Dashes: Typographic Etiquette

  

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

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

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

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

音标符号并不过时

Diacritics in Mind Your En And Em Dashes: Typographic Etiquette

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

字母连写

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

下面你可以看到有关字体中的连字效果。在Adobe Garamond中这种效果要比Helvetica中更为明显。Ligatures in Mind Your En And Em Dashes: Typographic Etiquette

除了“fi”的情况外,还有一些类似的情况会发生在“fl,” “ff,” “ffi” 和 “ffl.”之中。以下你可以看到Apple在这方面的设计使得“ffl”在“iPod shuffle”中显得非常漂亮。

Shuffle-ligature in Mind Your En And Em Dashes: Typographic Etiquette

使用连字技术

当然,每次需要连字的时候输入特定的连字字符是不切实际的。如果你这么做了也有可能在某些字体条件下使得连字无法正常显示。幸运的是,像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/

添加新评论

相关文章:

  Dian Tong Group Companies Official Site Contents

  Pengtao Yu 设计的泡茶器——“下午茶时间”

  设计建筑和景观界面

  设计在创新中所起的作用

  Janet Echelman:重视想象力

相关 [破折号 文字 排版] 推荐:

留意你的\"短线\"与“破折号”:文字排版的礼节

- major - 译言-每日精品译文推荐
来源Mind Your En And Em Dashes: Typographic Etiquette - Smashing Magazine. 从文字排版上便可以很容易区分设计师是否是一个新手或是老岛. 一个经验丰富的设计师能在看设计的时候察觉创作者是否懂得如何排版. 排版设计绝对不是设计师内部的谈资,而是几千年以来从语言书写中得来的一种累积,排版使得信息的沟通更高效和优雅.

Matt Cutts 再次解释 URL 地址中破折号和下划线的区别

- Tomyail - 谷奥——探寻谷歌的奥秘
今天Matt Cutts视频再次开讲,话题虽然是老生常谈但一直是SEO界的热点:URL地址里破折号和下划线的区别. 之前在2007年8月的时候,Google表示过说他们会把URL地址中的破折号和下划线分割开来的单词都作为独立的单词看待,但在之后一周又补充说他们还在修改算法,在算法修改好之前,破折号两侧的单词会被当作独立的单词看待,而下划线两侧的单词则会被连接成一个词看待.

排版六原则

- 沈裔 - 所有文章 - UCD大社区
几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题. 他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集. 我看了新书的样章,觉得很不错,有些内容很值得分享. 良好的设计如何使得一个平庸的文档脱胎换骨. 下面是一张大学生的求职简历,再普通不过了,想要引起招聘经理的注意,恐怕很难. 秋叶老师对它进行了简单的排版,还是一张表格,还是黑白配色,没有使用任何图形元素,效果却完全不一样了.

文字雲

- Sopp - 網絡暴民 Jacky's Blog
看到這個 HTML5 文字雲:文章詞彙分析機 ,便餵以本站之 Feed,並拍照留念.

WEB设计中的排版

- - 互联网的那点事
首先谈一下“Metro”——由微软公司开发内部名称为“ typography-based design language”(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌. 生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计. 现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥、庞杂无序,简洁之风深入人心——减少元素,以显现本质.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

闲侃中文字体

- Yuheng Kuang - 比目鱼博客
1.在平面设计中,“字体”是一项重要的基本功. White 在《平面设计原理》一书中写道:“组成 typography(排印)这个词的词根是 typo (文字)和 graphy (绘画),因此,它的字面意思就是用文字绘画. ” 2.英文字体数量繁多,让人眼花缭乱. 相比之下中文字体的数量非常有限. 原因很容易理解:英文字母少,汉字字数多.

最最幸福的文字

- Gary - A Geek's Page
去新疆之前路过成都的时候,杜姑娘推荐我看一下这本书. 上火车之前,正好在成都的一家书店买到了它. 过多的评价用不着,我只想说一句,这本书是我读过的最最幸福的文字. 一个在阿勒泰的角落里生活的裁缝,怎么能写出这么幸福这么朴实得打动人心的文字呢. :-) 这让我想起了《万物有灵且美》这本书,作者是一个英国的乡村兽医,同样是不怎么起眼的职业,他们写出的文字一点儿都不华丽,可就是这种朴实、乐观、幸福,足以打动每一个读者.

日本颜文字大全

- fyits0 - JPbeta 多元化日本文化资讯站
日本网民普遍对日式颜文字的发明充满自豪感,认为这是日本文化的一个优越性. 颜文字虽不是起源于日本,但无疑是日本人把颜文字发展得出神入化,早已远超颜文字发源地美国的水平. 不少日本人认为颜文字文化不应称为“ascii art”(A代表美国),而该称为“jis art”(J代表日本). 今天偶尔在一网站见到非常全的日本颜文字,特转来跟大家分享,以便在论坛发帖时IB.