<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Type is Beautiful &#187; 排版</title>
	<atom:link href="http://www.typeisbeautiful.com/category/layout/feed" rel="self" type="application/rss+xml" />
	<link>http://www.typeisbeautiful.com</link>
	<description>Write about typography in Chinese</description>
	<lastBuildDate>Sun, 22 Jan 2012 04:13:36 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>TIB 发布 ReverseTick（玲珑）倒排模版</title>
		<link>http://www.typeisbeautiful.com/2011/04/3535</link>
		<comments>http://www.typeisbeautiful.com/2011/04/3535#comments</comments>
		<pubDate>Thu, 31 Mar 2011 23:48:16 +0000</pubDate>
		<dc:creator>Rex Chen</dc:creator>
				<category><![CDATA[亚洲]]></category>
		<category><![CDATA[公共设计]]></category>
		<category><![CDATA[排版]]></category>
		<category><![CDATA[站点新闻]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=3535</guid>
		<description><![CDATA[
ReverseTick（玲珑）倒排模版实现效果。请参见测试页面（不支持 IE）
敬告：本文发布于2011年4月1日。
Type is Beautiful 今天开始发布 ReverseTick（玲珑）倒排模版，并发起提倡中文倒排的潮流。该模版今天开始进入测试（请参见测试页面，不支持 IE），如果反应良好我们将在一周后发布测试版下载，供 WordPress 用户使用。
何为倒排
“倒排”顾名思义，就是将现代中文排版顺序完全颠倒。阅读从文章底部开始，从右向左横排阅读，到顶端结束。
为什么提倡倒排
从右到左阅读是汉语的传统阅读形式，符合中文阅读的传统阅读逻辑。因此这一排版和阅读方式首先就继承了早期中文的阅读习惯，这在一个白话文被各种政治因素严重影响的年代 1，尤具文化和民族意义。
第二，根据普林斯顿大学2010年由 Connor Diemand-Yauman 等人研究 2 3 证明，阅读文字的困难有助于更有效地学习。研究显示，同样的文字使用不常见的排版、难读的字体，会令阅读者花费更大的精力阅读该段文字，进而文字内容会对人留下更加深刻的印象。本着对字体之美的高度尊敬，我们认为混用 Comic Sans 和 Bodoni 是非常不可取的行为。我们认为一定有更优雅的解决方案。答案就是：国学。经过对中国古籍雕版和近代横排的研究，我们发现，将文字倒排能够在不影响阅读和尊重文字的情况下，最大化的改变读者的阅读习惯，进而最大化的完成内容输出的效率。
此外，我们前文《讨论：长文的数字排版与阅读》提到妨碍网络上阅读长文的主要原因在于浏览器文字缺乏进度指示（progress register），因此让读者无法获得满足感。使用倒排要求一开始就得滚动到页面下方，能够使读者就一开始就了解到文章长度，阅读中不断接近顶端，读者的成就感油生，更加鼓励读者完成阅读。
最后，从我们的测试中发现，倒排文字由于与大部分文字排版相逆，可以改变颈椎的工作习惯，改善颈椎酸痛。在触摸屏设备阅读时，手指的重复动作也会颠倒，改善手部的运动神经。

关于 ReverseTick（玲珑）
ReverseTick（玲珑）模版由 Type is Beautiful 主导，Metaphox 开发，顾问梁海。一开始作为 WordPress 模版。随后将开源，供大家进行继续开发和使用。
我们受到民国年代报章杂志启发，尤其是近期重新由哥伦比亚大学扫描的1930年代女性杂志《玲珑》的大胆设计影响，决定将模版的中文名起名为“玲珑”。模版英文名 ReverseTick 与我们之前发布的竖版模版 VerTick 符合。
我们的计划
我们在今天发布 ReverseTick（玲珑）模版的测试页面，请大家前往进行测试阅读（不支持 IE）。如果开发顺利，我们将进一步在下周发放第一版的测试下载。在我们的站点，我们将逐步在全站推行 ReverseTick（玲珑）模版，从我们开始改变大家阅读习惯，提高大家的阅读效率。
我们希望大家能够对该排版方式和插件产生兴趣、加深理解。希望能够有越来越多的网站可以使用倒排的方式，提高国人的阅读效率和学习兴趣，为中华民族的和平崛起做自己的一份努力。
参考

李春阳，《白话文运动的危机》，中国艺术研究院 ^
Making things hard to read &#8216;can boost learning&#8217;, BBC News ^

Connor Diemand-Yauma, et al. Fortune favors the Bold [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.typeisbeautiful.com/reversetick" target="_blank"><img src="http://www.typeisbeautiful.com/wp-content/uploads/2011/04/reversetick.jpg" alt="" title="reversetick" width="600" height="352" class="alignnone size-full wp-image-3594" /></a>
<div class="grey">ReverseTick（玲珑）倒排模版实现效果。<a href="http://www.typeisbeautiful.com/reversetick">请参见测试页面</a>（不支持 IE）</div>
<div class="credits">敬告：本文发布于2011年<strong>4月1日</strong>。</div>
<p>Type is Beautiful 今天开始发布 ReverseTick（玲珑）倒排模版，并发起提倡中文倒排的潮流。该模版今天开始进入测试（<a href="http://www.typeisbeautiful.com/reversetick">请参见测试页面</a>，不支持 IE），如果反应良好我们将在一周后发布测试版下载，供 WordPress 用户使用。</p>
<h3>何为倒排</h3>
<p>“倒排”顾名思义，就是将现代中文排版顺序完全颠倒。阅读从文章底部开始，从右向左横排阅读，到顶端结束。</p>
<h3>为什么提倡倒排</h3>
<p>从右到左阅读是汉语的传统阅读形式，符合中文阅读的传统阅读逻辑。因此这一排版和阅读方式首先就继承了早期中文的阅读习惯，这在一个白话文被各种政治因素严重影响的年代 <sup><a href="#footnote_1" id="footnote_1_link">1</a></sup>，尤具文化和民族意义。</p>
<p>第二，根据普林斯顿大学2010年由 Connor Diemand-Yauman 等人研究 <sup><a href="#footnote_2" id="footnote_2_link">2</a></sup> <sup><a href="#footnote_3" id="footnote_3_link">3</a></sup> 证明，阅读文字的困难有助于更有效地学习。研究显示，同样的文字使用不常见的排版、难读的字体，会令阅读者花费更大的精力阅读该段文字，进而文字内容会对人留下更加深刻的印象。本着对字体之美的高度尊敬，我们认为混用 Comic Sans 和 Bodoni 是非常不可取的行为。我们认为一定有更优雅的解决方案。答案就是：国学。经过对中国古籍雕版和近代横排的研究，我们发现，将文字倒排能够在不影响阅读和尊重文字的情况下，最大化的改变读者的阅读习惯，进而最大化的完成内容输出的效率。</p>
<p>此外，我们前文《<a href="http://www.typeisbeautiful.com/2011/01/3094">讨论：长文的数字排版与阅读</a>》提到妨碍网络上阅读长文的主要原因在于浏览器文字缺乏进度指示（progress register），因此让读者无法获得满足感。使用倒排要求一开始就得滚动到页面下方，能够使读者就一开始就了解到文章长度，阅读中不断接近顶端，读者的成就感油生，更加鼓励读者完成阅读。</p>
<p>最后，从我们的测试中发现，倒排文字由于与大部分文字排版相逆，可以改变颈椎的工作习惯，改善颈椎酸痛。在触摸屏设备阅读时，手指的重复动作也会颠倒，改善手部的运动神经。<br />
<span id="more-3535"></span></p>
<h3>关于 ReverseTick（玲珑）</h3>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2011/03/reversetick_logo.jpg" alt="" title="reversetick_logo" width="200" height="85" class="alignleft size-full wp-image-3577" />ReverseTick（玲珑）模版由 Type is Beautiful 主导，Metaphox 开发，顾问梁海。一开始作为 WordPress 模版。随后将开源，供大家进行继续开发和使用。</p>
<p>我们受到民国年代报章杂志启发，尤其是近期重新由哥伦比亚大学扫描的1930年代女性杂志《<a href="http://wwwapp.cc.columbia.edu/ldpd/linglong/saxon?source=ling_mets/ling1932_047_mets.xml&#038;style=styles/ling_xsl_5_1.xsl&#038;clear-stylesheet-cache=yes">玲珑</a>》的大胆设计影响，决定将模版的中文名起名为“玲珑”。模版英文名 ReverseTick 与我们之前发布的<a href="http://www.typeisbeautiful.com/2010/05/2340">竖版模版 VerTick</a> 符合。</p>
<h3>我们的计划</h3>
<p>我们在今天发布 ReverseTick（玲珑）模版的测试页面，请大家前往<a href="http://www.typeisbeautiful.com/reversetick">进行测试阅读</a>（不支持 IE）。如果开发顺利，我们将进一步在下周发放第一版的测试下载。在我们的站点，我们将逐步在全站推行 ReverseTick（玲珑）模版，从我们开始改变大家阅读习惯，提高大家的阅读效率。</p>
<p>我们希望大家能够对该排版方式和插件产生兴趣、加深理解。希望能够有越来越多的网站可以使用倒排的方式，提高国人的阅读效率和学习兴趣，为中华民族的和平崛起做自己的一份努力。</p>
<h4>参考</h4>
<ol>
<li id="footnote_1">李春阳，《<a href="http://blog.sina.com.cn/s/blog_66f964810100i2um.html">白话文运动的危机</a>》，中国艺术研究院 <a href="#footnote_1_link">^</a></li>
<li id="footnote_2"><a href="http://www.bbc.co.uk/news/world-11573666">Making things hard to read &#8216;can boost learning&#8217;</a>, BBC News <a href="#footnote_2_link">^</a></li>
<li id="footnote_3">
Connor Diemand-Yauma, et al. <a href="http://web.princeton.edu/sites/opplab/papers/Diemand-Yauman_Oppenheimer_2010.pdf">Fortune favors the Bold (and the Italicized): Effects of disﬂuency<br />
on educational outcomes</a>, Princeton University <a href="#footnote_3_link">^</a></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2011/04/3535/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>讨论：长文的数字排版与阅读</title>
		<link>http://www.typeisbeautiful.com/2011/01/3094</link>
		<comments>http://www.typeisbeautiful.com/2011/01/3094#comments</comments>
		<pubDate>Sat, 08 Jan 2011 23:59:53 +0000</pubDate>
		<dc:creator>Shi Yuan</dc:creator>
				<category><![CDATA[报刊书籍]]></category>
		<category><![CDATA[排版]]></category>
		<category><![CDATA[数字化]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=3094</guid>
		<description><![CDATA[
文章冗长，设计尴尬，怎么办？
长文的排版与设计是我们一直以来的困惑。我们在设计这个网站新版本的时候也遇到这样的问题。我们把讨论时的问题提出来，论点由三位作者提出，也希望大家能够参考和讨论。以下的讨论是我们最近一些想法的汇总，可能漏掉了一些重点或有失偏颇，还请大家指正。
我们说的是长文
具有相当篇幅、以纯文字为主的内容之宏观排版和交互设计是我们讨论的重心，短文和多媒体交互则不在讨论范围。凡字体、字距、行距等排印细节，我们也基本不去涉及。
长文阅读的问题
人缺乏耐性，冗长的文章如果没有经过任何排版处理，会让读者瞬间失去阅读的兴趣，若非读不可则不啻苦行。所以通过改进长文的结构和排版来提高阅读性乃至“诱读性”，是一件十分必要的事情。要吸引读者阅读完长文，必须符合读者的阅读心理：

应避免内容的长度令读者感觉到压力
要让读者对阅读的进展和目标有明确的了解
要给读者不断提供暂停的机会和阅读成就的满足感
要使多次阅读和检索变得容易


人的耐心缺乏在数字阅读时尤其显著，数字阅读的环境纷繁，分心点很多，要让读者读完文章更是艰难（见老猫的文章）。这也是 Kindle 这样的设备和 Readability 这样的插件受欢迎的原因之一。
电子环境下给长文排版，我们目前有如下选择：

纵向滚动式。如大部分网页，单栏文字，纵向滚动条，偶尔分页。
横向滚动式。如近期在 iPad 上许多传统媒体推出的应用。一般有多栏文字，横向滑动分页。
电子书式。如 iBooks，GoodReader 等应用。单栏或多栏文字，以分页作为基本结构，甚至专门做出分页特效。

支离长文
把长文从语义结构上支离成短文，是最为基本的分离，也能够达到吸引读者阅读的目的。首先，分离使得长文看起来由若干短文构成，不再可怕；第二，分离出的短文明确了阅读进度和目标；第三，每结束一段短文，读者都有机会进行休息并获得满足感；第四，短文的标题、段落等排版形式在某种程度上是长文的”锚点“，使得多次阅读更加容易。结构和语义的支离最常见的办法就是分段、分章节和分篇。这些很大程度是作者和编辑的工作，设计师所能够掌控的部分更多在于如何将这些被支离的短文进一步按照物理条件的限制进行再分解。对于传统印刷，物理的限制就是纸张的大小。而对于网络排版，物理限制则是阅读设备的尺寸、解析度、更新速度、色彩数量、乃至存储能力等等。

古代卷轴
分页
对于单栏的书籍而言，分页本身就是一种文字支离。在人类历史的很长一段时期里，无论中西，文字都写在卷轴（scroll）上，只是卷动的方向不一样。阅读这样的长卷在现代人看来是无法承受的。分页的出现真正解救了人们对于长文的阅读，也是自廉价纸张问世以来牢固统治现代人的阅读核心习惯。分页本身提供了最好的进度指示，这一点从页数和页面累计厚度都可以得出。另一方面，卷轴的一气呵成令读者无法消化，分页带来的暂停和书签让多次阅读成为了可能。
单栏还是多栏：中文和西文
西文设计师们在排版上支离长文最有用的发明莫过于多栏设计。多栏设计神奇地将一篇长文分成若干个栏，每栏设计7－10个单词，这使得读者能够轻易地阅读较长的文字，甚至帮助读者在阅读前就能够通过横向扫视，捕获有趣的片段，从中间阅读。多栏设计另一个好处是它能最大程度的节省空间，固定空间内多栏设计的容纳量要大于单栏设计。这两个特点，阅读习惯和成本，使得多栏设计成为杂志和报纸的最爱。
然而多栏设计仍然不适用于过长的文章。多栏设计本身将长文过度支离，不适用于小说等结构紧密的题材（见我们前文）。大报、文学刊物上几千字的文章已经大概是多栏设计的极限。另外，多栏设计到了近代也被大量应用在中文语境，中文杂志和报纸也深深热爱这一个设计。但它是否真正适合我们的阅读习惯，还有待考量，尽管我们的阅读习惯很可能已经被它改变。
此外值得一提的是，中文古籍大量使用的”双行夹注“手段，在一行正文间小字排列两行注释文字，也是一种在版式上按照语义进行内容分割的手法。
进度记录：我们为什么喜欢读印刷书籍
数字阅读的载体已经存在一阵子了。巨大的单色阴极射线管屏幕标志着电子阅读的石器时代，读者几乎只有科研人员。而今天，液晶屏幕和电子墨水已经将在不是纸张的媒介上阅读这一体验带给了普通大众。不过，在这样的载体上，最能吸引读者的仍然是杂志和报纸等以短篇文字为主的内容。长篇书籍的阅读仍然难以在正当途径被广泛接受。撇开对书籍本身的依恋，如封面、质感、气味、重量等，我们为什么喜欢读印刷书籍？印刷书籍最重要的一点，也是数字阅读始终无法达到的，是进度记录。这里的进度记录并非简单的书签功能。印刷书籍通过页面、段落、章节、页数和书签，构成了千年来人们习惯的阅读进度记录。读者可以通过书籍厚度就知道进度，通过扫视页面就知道之前阅读的部分，每次翻看书籍，进度记录都固定没有变化。这些记录在心理上提高了读者的安全感、成就感和方便度，这种从童年延续下来的阅读习惯使得读者们对于什么是“适当地阅读”有了既有的标准。

传统书籍固定的、人们习惯的进度记录的方法。
我们再来看看主要的数字阅读方式在进度记录的表现：

纵向滚动式。几乎不存在进度记录，由于窗口可以随意变化，滚动条长度和位置也随之变化，读者完全无法对自己的进度有确实的感觉。继而无法获得进度的满足感，也无法方便地多次阅读。
横向滚动式。与纵向滚动式一样，读者无法获得准确的进度感。但多栏设计本身提供了另一种进度指示，在这一点上优于纵向滚动式。
电子书式。进度记录表现相对最好，有翻页，通常有书签功能，即使多数不好用。有的电子书提供虚拟的厚度提示。

数字长文：扔掉滚动，继承分页？
电子阅读载体上给长文排版的设计目标于是变得显而易见：加强进度记录。

苹果和 Adobe 试图改善滚动（scrolling），添加进度记录。
滚动本身就是一个有趣的问题。滚动的现实依据（scroll）来源于卷轴（scrolls），一个我们早已抛弃的阅读方式，但却成为数字时代关键的交互动作之一。然而滚动对于长文是痛苦的。无论是手机、iPad 还是网页，滚动的随意性使阅读变得不稳定，读者要小心翼翼的滚动到合适的位置，滚动完毕也丢掉了之前阅读文字的位置感，多次阅读更是要大肆滚动寻找以前的位置。iPhone 的电话本在右边加入一列字母索引，就是为了补偿大量信息情况下滚动的低效。尽管许多改善的滚动条设计的确存在，比如 Acrobat Reader 的进度展示，但要改善长文阅读，从根本上摈弃滚动，似乎是一条更值得尝试的路。
有人说数字时代的“翻页”是一个明显过时的模拟（page turning metaphor）。这一点在很多网页上尤其说明问题——读者要被迫点击一个微小的页码链接来翻页，十分恼人。在电子书时代，尽管翻页的有效区域不再难寻找，但偶尔三维式的虚拟翻页动画还是显得滑稽和臃冗。即便如此，分页本身的种种好处并没有就此失去。那么分页本身（即下一大段固定内容在一个交互动作后出现）在我们找到更好的方法之前，也许还应该存活一段时间。

苹果 iBooks 模拟厚度变化
电子书的厚度显示，尽管看起来也是一个没有必要的过时继承，但仍然给以读者习惯的进度显示方法。在没有更好的设计出现之前（“当前页码/总页码”？），厚度显示仍然能够辅助很多读者的阅读。
另外，根据数字阅读的习惯，长文设计更加要注意保护读者的注意力，广告、栏目信息、相关文章、评论等内容如果非必要，都应尽量避免影响阅读。尽管这与现在提倡的数字阅读社会化相抵触。
网页怎么办
我们前面提到的一些改善措施，比如改善方式后的分页、厚度展示，都适用于电子书。加上电子书本身的结构类似书籍，使得电子书成为长文阅读的一个默认优选。
那么网页怎么办？仍然有大量的长文内容，包括大量有价值的媒体内容，都仍然基于网页。然而网页基于滚动条，基于变化，基于平衡存在的大量信息，这些都与阅读长文的习惯格格不入。面临越来越适合长文阅读的电子书和手持设备的到来，网页的位置越来越尴尬。到底是不是长文与网页根本不合，长文需要抛弃网页，只拥抱篇幅较短的信息；还是网页需要有更革命性的设计，来赶上电子书对长文的交互特性？大家怎么看？
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2011/01/nybooks.jpg" alt="" title="nybooks" width="600" height="382" class="alignnone size-full wp-image-3153" />
<div class="grey">文章冗长，设计尴尬，怎么办？</div>
<p>长文的排版与设计是我们一直以来的困惑。我们在设计这个网站新版本的时候也遇到这样的问题。我们把讨论时的问题提出来，论点由三位作者提出，也希望大家能够参考和讨论。以下的讨论是我们最近一些想法的汇总，可能漏掉了一些重点或有失偏颇，还请大家指正。</p>
<h3>我们说的是长文</h3>
<p>具有相当篇幅、以纯文字为主的内容之宏观排版和交互设计是我们讨论的重心，短文和多媒体交互则不在讨论范围。凡字体、字距、行距等排印细节，我们也基本不去涉及。</p>
<h3>长文阅读的问题</h3>
<p>人缺乏耐性，冗长的文章如果没有经过任何排版处理，会让读者瞬间失去阅读的兴趣，若非读不可则不啻苦行。所以通过改进长文的结构和排版来提高阅读性乃至“诱读性”，是一件十分必要的事情。要吸引读者阅读完长文，必须符合读者的阅读心理：</p>
<ol>
<li>应避免内容的长度令读者感觉到压力</li>
<li>要让读者对阅读的进展和目标有明确的了解</li>
<li>要给读者不断提供暂停的机会和阅读成就的满足感</li>
<li>要使多次阅读和检索变得容易</li>
</ol>
<p><span id="more-3094"></span><br />
人的耐心缺乏在数字阅读时尤其显著，数字阅读的环境纷繁，分心点很多，要让读者读完文章更是艰难（见<a href="http://www.contnt.net/2010/12/online-reading-mode.html">老猫的文章</a>）。这也是 Kindle 这样的设备和 Readability 这样的插件受欢迎的原因之一。</p>
<p>电子环境下给长文排版，我们目前有如下选择：</p>
<ul>
<li>纵向滚动式。如大部分网页，单栏文字，纵向滚动条，偶尔分页。</li>
<li>横向滚动式。如近期在 iPad 上许多传统媒体推出的应用。一般有多栏文字，横向滑动分页。</li>
<li>电子书式。如 iBooks，GoodReader 等应用。单栏或多栏文字，以分页作为基本结构，甚至专门做出分页特效。</li>
</ul>
<h3>支离长文</h3>
<p>把长文从语义结构上支离成短文，是最为基本的分离，也能够达到吸引读者阅读的目的。首先，分离使得长文看起来由若干短文构成，不再可怕；第二，分离出的短文明确了阅读进度和目标；第三，每结束一段短文，读者都有机会进行休息并获得满足感；第四，短文的标题、段落等排版形式在某种程度上是长文的”锚点“，使得多次阅读更加容易。结构和语义的支离最常见的办法就是分段、分章节和分篇。这些很大程度是作者和编辑的工作，设计师所能够掌控的部分更多在于如何将这些被支离的短文进一步按照物理条件的限制进行再分解。对于传统印刷，物理的限制就是纸张的大小。而对于网络排版，物理限制则是阅读设备的尺寸、解析度、更新速度、色彩数量、乃至存储能力等等。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2011/01/scroll.jpeg" alt="" title="scroll" width="600" height="428" class="alignnone size-full wp-image-3149" />
<div class="grey">古代卷轴</div>
<h4>分页</h4>
<p>对于单栏的书籍而言，分页本身就是一种文字支离。在人类历史的很长一段时期里，无论中西，文字都写在卷轴（scroll）上，只是卷动的方向不一样。阅读这样的长卷在现代人看来是无法承受的。分页的出现真正解救了人们对于长文的阅读，也是自廉价纸张问世以来牢固统治现代人的阅读核心习惯。分页本身提供了最好的进度指示，这一点从页数和页面累计厚度都可以得出。另一方面，卷轴的一气呵成令读者无法消化，分页带来的暂停和书签让多次阅读成为了可能。</p>
<h4>单栏还是多栏：中文和西文</h4>
<p>西文设计师们在排版上支离长文最有用的发明莫过于多栏设计。多栏设计神奇地将一篇长文分成若干个栏，每栏设计7－10个单词，这使得读者能够轻易地阅读较长的文字，甚至帮助读者在阅读前就能够通过横向扫视，捕获有趣的片段，从中间阅读。多栏设计另一个好处是它能最大程度的节省空间，固定空间内多栏设计的容纳量要大于单栏设计。这两个特点，阅读习惯和成本，使得多栏设计成为杂志和报纸的最爱。</p>
<p>然而多栏设计仍然不适用于过长的文章。多栏设计本身将长文过度支离，不适用于小说等结构紧密的题材（见我们<a href="http://www.typeisbeautiful.com/2010/05/2537">前文</a>）。大报、文学刊物上几千字的文章已经大概是多栏设计的极限。另外，多栏设计到了近代也被大量应用在中文语境，中文杂志和报纸也深深热爱这一个设计。但它是否真正适合我们的阅读习惯，还有待考量，尽管我们的阅读习惯很可能已经被它改变。</p>
<p>此外值得一提的是，中文古籍大量使用的”双行夹注“手段，在一行正文间小字排列两行注释文字，也是一种在版式上按照语义进行内容分割的手法。</p>
<h3>进度记录：我们为什么喜欢读印刷书籍</h3>
<p>数字阅读的载体已经存在一阵子了。巨大的单色阴极射线管屏幕标志着电子阅读的石器时代，读者几乎只有科研人员。而今天，液晶屏幕和电子墨水已经将在不是纸张的媒介上阅读这一体验带给了普通大众。不过，在这样的载体上，最能吸引读者的仍然是杂志和报纸等以短篇文字为主的内容。长篇书籍的阅读仍然难以在正当途径被广泛接受。撇开对书籍本身的依恋，如封面、质感、气味、重量等，我们为什么喜欢读印刷书籍？印刷书籍最重要的一点，也是数字阅读始终无法达到的，是进度记录。这里的进度记录并非简单的书签功能。印刷书籍通过页面、段落、章节、页数和书签，构成了千年来人们习惯的阅读进度记录。读者可以通过书籍厚度就知道进度，通过扫视页面就知道之前阅读的部分，每次翻看书籍，进度记录都固定没有变化。这些记录在心理上提高了读者的安全感、成就感和方便度，这种从童年延续下来的阅读习惯使得读者们对于什么是“适当地阅读”有了既有的标准。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2011/01/en_tr.jpg" alt="" title="en_tr" width="500" height="334" class="alignnone size-full wp-image-3150" />
<div class="grey">传统书籍固定的、人们习惯的进度记录的方法。</div>
<p>我们再来看看主要的数字阅读方式在进度记录的表现：</p>
<ul>
<li>纵向滚动式。几乎不存在进度记录，由于窗口可以随意变化，滚动条长度和位置也随之变化，读者完全无法对自己的进度有确实的感觉。继而无法获得进度的满足感，也无法方便地多次阅读。</li>
<li>横向滚动式。与纵向滚动式一样，读者无法获得准确的进度感。但多栏设计本身提供了另一种进度指示，在这一点上优于纵向滚动式。</li>
<li>电子书式。进度记录表现相对最好，有翻页，通常有书签功能，即使多数不好用。有的电子书提供虚拟的厚度提示。</li>
</ul>
<h3>数字长文：扔掉滚动，继承分页？</h3>
<p>电子阅读载体上给长文排版的设计目标于是变得显而易见：加强进度记录。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2011/01/scroll_impro.jpg" alt="" title="scroll_impro" width="500" height="375" class="alignnone size-full wp-image-3147" />
<div class="grey">苹果和 Adobe 试图改善滚动（scrolling），添加进度记录。</div>
<p>滚动本身就是一个有趣的问题。滚动的现实依据（scroll）来源于卷轴（scrolls），一个我们早已抛弃的阅读方式，但却成为数字时代关键的交互动作之一。然而滚动对于长文是痛苦的。无论是手机、iPad 还是网页，滚动的随意性使阅读变得不稳定，读者要小心翼翼的滚动到合适的位置，滚动完毕也丢掉了之前阅读文字的位置感，多次阅读更是要大肆滚动寻找以前的位置。iPhone 的电话本在右边加入一列字母索引，就是为了补偿大量信息情况下滚动的低效。尽管许多改善的滚动条设计的确存在，比如 Acrobat Reader 的进度展示，但要改善长文阅读，从根本上摈弃滚动，似乎是一条更值得尝试的路。</p>
<p>有人说数字时代的“翻页”是一个明显过时的模拟（page turning metaphor）。这一点在很多网页上尤其说明问题——读者要被迫点击一个微小的页码链接来翻页，十分恼人。在电子书时代，尽管翻页的有效区域不再难寻找，但偶尔三维式的虚拟翻页动画还是显得滑稽和臃冗。即便如此，分页本身的种种好处并没有就此失去。那么分页本身（即下一大段固定内容在一个交互动作后出现）在我们找到更好的方法之前，也许还应该存活一段时间。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2011/01/ibooks.jpg" alt="" title="ibooks" width="500" height="372" class="alignnone size-full wp-image-3148" />
<div class="grey">苹果 iBooks 模拟厚度变化</div>
<p>电子书的厚度显示，尽管看起来也是一个没有必要的过时继承，但仍然给以读者习惯的进度显示方法。在没有更好的设计出现之前（“当前页码/总页码”？），厚度显示仍然能够辅助很多读者的阅读。</p>
<p>另外，根据数字阅读的习惯，长文设计更加要注意保护读者的注意力，广告、栏目信息、相关文章、评论等内容如果非必要，都应尽量避免影响阅读。尽管这与现在提倡的数字阅读社会化相抵触。</p>
<h3>网页怎么办</h3>
<p>我们前面提到的一些改善措施，比如改善方式后的分页、厚度展示，都适用于电子书。加上电子书本身的结构类似书籍，使得电子书成为长文阅读的一个默认优选。</p>
<p>那么网页怎么办？仍然有大量的长文内容，包括大量有价值的媒体内容，都仍然基于网页。然而网页基于滚动条，基于变化，基于平衡存在的大量信息，这些都与阅读长文的习惯格格不入。面临越来越适合长文阅读的电子书和手持设备的到来，网页的位置越来越尴尬。到底是不是长文与网页根本不合，长文需要抛弃网页，只拥抱篇幅较短的信息；还是网页需要有更革命性的设计，来赶上电子书对长文的交互特性？大家怎么看？</p>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2011/01/3094/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>出版的希望：Flipboard？</title>
		<link>http://www.typeisbeautiful.com/2010/07/2772</link>
		<comments>http://www.typeisbeautiful.com/2010/07/2772#comments</comments>
		<pubDate>Thu, 22 Jul 2010 12:23:14 +0000</pubDate>
		<dc:creator>Rex Chen</dc:creator>
				<category><![CDATA[展示]]></category>
		<category><![CDATA[报刊书籍]]></category>
		<category><![CDATA[排版]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=2772</guid>
		<description><![CDATA[
我们的 Twitter 账户在 Flipboard 上的显示效果
Flipboard 在最近两天迅速成为全球最热门的 iPad 应用，一经发布服务器就达到瓶颈，同时受到用户和评论界的多方赞誉，可谓非常成功。Flipboard 的核心功能是从 Twitter 和 Facebook 等抽取内容信息，以简单有效的设计呈现给用户。因此中国内地的用户不翻墙是无法使用的。
Flipboard 可以将用户自己的 Facebook 和 Twitter 用户连接起来，这样用户可以看到朋友分享的内容。与此同时，用户也可以自己添加 Twitter 源，从拥有 Twitter 账户的媒体和 blog 那里获取信息。Flipboard 的内容呈现特点有二：一是它自动从 tweet 和推荐中获取链接的内容并生成长度适中的摘要，使得 Twitter 的一百四十字符限制所导致的信息量不足问题得以缓解；二是它应用了成熟的网格系统和字体设计，从而清晰高效地呈现这些内容。此外，Flipboard 放弃了仿真的翻页效果，而是采用了简单的“半页翻转”（flip）效果，也就避免了《连线》杂志那样在平面上移动页面而产生的导航盲目感。
评论界盛赞 Flipboard 对于出版业界的启示。在一片传统媒体推出电子书般的 iPad 应用的时候，Flipboard 让我们看到了真正面向未来的阅读应用软件应该具有的样子。它拥抱社会化的媒体，重新将内容选择交回给用户，放弃了模拟平面出版物的老路，真正成为了新时代出版业的杀手极应用。比起同类的新闻聚合器如 Pulse，Flipboard 较强的交互和平面设计无疑更胜一筹。
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/07/fb_tib.png" alt="" title="fb_tib" width="600" height="450" class="alignleft size-full wp-image-2771" />
<div class="grey">我们的 Twitter 账户在 Flipboard 上的显示效果</div>
<p><a href="http://www.flipboard.com/">Flipboard</a> 在最近两天迅速成为全球最热门的 iPad 应用，一经发布服务器就达到瓶颈，同时受到用户和评论界的多方赞誉，可谓非常成功。Flipboard 的<a href="http://www.youtube.com/watch?v=v2vpvEDS00o">核心功能</a>是从 Twitter 和 Facebook 等抽取内容信息，以简单有效的设计呈现给用户。因此中国内地的用户不翻墙是无法使用的。</p>
<p>Flipboard 可以将用户自己的 Facebook 和 Twitter 用户连接起来，这样用户可以看到朋友分享的内容。与此同时，用户也可以自己添加 Twitter 源，从拥有 Twitter 账户的媒体和 blog 那里获取信息。Flipboard 的内容呈现特点有二：一是它自动从 tweet 和推荐中获取链接的内容并生成长度适中的摘要，使得 Twitter 的一百四十字符限制所导致的信息量不足问题得以缓解；二是它应用了成熟的网格系统和字体设计，从而清晰高效地呈现这些内容。此外，Flipboard 放弃了仿真的翻页效果，而是采用了简单的“半页翻转”（flip）效果，也就避免了《连线》杂志那样在平面上移动页面而产生的导航盲目感。</p>
<p>评论界盛赞 Flipboard 对于出版业界的启示。在一片传统媒体推出电子书般的 iPad 应用的时候，Flipboard 让我们看到了真正面向未来的阅读应用软件应该具有的样子。它拥抱社会化的媒体，重新将内容选择交回给用户，放弃了模拟平面出版物的老路，真正成为了新时代出版业的杀手极应用。比起同类的新闻聚合器如 <a href="http://itunes.apple.com/gb/app/pulse-news-reader/id371088673?mt=8">Pulse</a>，Flipboard 较强的交互和平面设计无疑更胜一筹。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2010/07/2772/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>争论 iPad（上）：行宽与阅读</title>
		<link>http://www.typeisbeautiful.com/2010/05/2537</link>
		<comments>http://www.typeisbeautiful.com/2010/05/2537#comments</comments>
		<pubDate>Mon, 31 May 2010 15:01:00 +0000</pubDate>
		<dc:creator>Rex Chen</dc:creator>
				<category><![CDATA[报刊书籍]]></category>
		<category><![CDATA[排版]]></category>
		<category><![CDATA[数字化]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=2537</guid>
		<description><![CDATA[
《连线》app 的一页多栏设计
一切起因于《连线》（Wired）杂志的 iPad 版的推出。该 app 的推出马上得到了赞誉，被 Adobe 称为“杂志的未来”（当然也由于这次制作是和 InDesign CS5 紧密合作推出的）。然而 Information Architects（iA）发文《iPad 上的〈连线〉是纸老虎》抨击《连线》app 的设计缺陷。其中最引争论的一点是关于 iPad 多栏设计的缺陷。在 iA 看来，iPad 的屏幕尺寸和交互属性决定了它不应该使用传统报纸一样的多栏设计。理由如下：

多栏设计硬性分割了正文，凌乱地将文字塞满了本来就很小的 iPad 屏幕。
多栏设计迫使设计师使用小字号，和加多断行，使阅读路径变得曲折困难。
将长文断成一个个缺乏联系的文字块，这种设计增加了整个导航和交互的复杂性（究竟应上下滚动（scroll）还是左右滑动（swipe））
多栏设计需要更多的连字符（hyphen）；如果左右对齐，每栏的文字内被迫出现众多空档，如果左对齐，右边会出现难看的文字不齐
多栏设计让设计师经常按印刷品的思考方式想问题，每一页的页高也变成是固定的



《纽约时报》app 的一页多栏设计。Image: iA@Flickr
iA 对多栏设计批评并不局限于《连线》app 的设计，众多报纸的 app，包括《纽约时报》（New York Times），都面临这一问题：“每栏只有3－5个单词，仅为了‘看起来很像报纸’？”。这样的设计从上图来看，由于缺乏有效的左右对齐，导致每一行的换行点都不一样，而这一需要频繁换行的行距使得这样的跳跃阅读显得十分累人。
传统的字体排印理论（Bringhurst、Müller-Brockmann 等）说，对于正文来说，每行的单词7—12个（50—70个字母）左右阅读起来会比较舒服，不会太长到读起来太累，也不至太短而阅读不顺畅。多栏设计的报纸通常会有较短的行宽，每行大约4—8个单词。这一设计最主要的原因是多栏设计节省空间（因为整栏设计空行的空间成本要远远大于多栏），同时由于报纸的快速阅读的属性，这样的设计也不影响大多篇幅较短的新闻报道的阅读。而篇幅较长的评论则会被这一频繁的换行而影响阅读，这也是为什么很多报纸（如《卫报》（The Guardian））的评论版会有更宽的行宽，以适合与“浏览”相对的长篇内容和与之匹配的阅读习惯。
《纽约时报》的网站和 app 的艺术总监 Khoi Vinh 为《纽约时报》app 的设计而辩护称，每行3—5个单词的设计非常普遍，很阅读起来也很容易，应该说除了缺乏连字符和有效的左右对齐，整体还是比较成功的。
iA 回复称报纸使用多栏设计无非是两个原因：一、节省空间；二、印刷品设计对连字符和字符对齐的控制很高，可以使小行宽的文字也不会有大的字缝和阅读障碍。而 iPad 首先没有节省空间的概念，因为垂直方向的空间几乎是无限的，第二，iPad 的设计在文字控制上远达不到一般印刷品的设计。而且这样的设计完全没有充分利用上下滚动（scroll）的交互动作，而过于依赖左右滑动（swipe），与更换文章混淆，进一步将导航复杂化。

《纽约时报》app 同样文章加大行宽的试验，我们尽量使用了原版的字体等设置。
我们制作了一个使用两栏的《纽约时报》同样的文章，每行单词从3—5增加到5—9，字符量增加到45左右。尽管设计上没有任何推敲，文字的对齐也用了机器硬性对齐，但可以明显感觉到新闻故事的阅读性显著增强。之前不断关于换行位置的下意识担心明显改善，阅读核心明显从换行变成了阅读，阅读节奏也可以有所下降。因此 iA 对于行宽与在 iPad 上使用多栏设计的批评是有道理的。

《金融时报》app 只有两栏，每栏相当宽。Image: Foxmachia
有意思的是，其他媒体的 iPad app 设计都使用了比《纽约时报》更宽的行宽。包括《金融时报》（Financial Times）、《华尔街日报》（Wall Street Journal）和《今日美国》（USA Today）等，似乎在 [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/wired_ipad.jpg" alt="" title="wired_ipad" width="500" height="383" class="alignleft size-full wp-image-2544" />
<div class="grey">《连线》app 的一页多栏设计</div>
<p>一切起因于《连线》（Wired）杂志的 iPad 版的推出。该 app 的推出马上得到了赞誉，被 Adobe 称为“<a href="http://blogs.adobe.com/digitalpublishing/2010/05/introducing_wired_magazine_on_ipad.html">杂志的未来</a>”（当然也由于这次制作是和 InDesign CS5 紧密合作推出的）。然而 Information Architects（iA）发文《<a href="http://informationarchitects.jp/wired-on-ipad-just-like-a-paper-tiger/">iPad 上的〈连线〉是纸老虎</a>》抨击《连线》app 的设计缺陷。其中最引争论的一点是关于 iPad 多栏设计的缺陷。在 iA 看来，iPad 的屏幕尺寸和交互属性决定了它不应该使用传统报纸一样的多栏设计。理由如下：</p>
<ol>
<li>多栏设计硬性分割了正文，凌乱地将文字塞满了本来就很小的 iPad 屏幕。</li>
<li>多栏设计迫使设计师使用小字号，和加多断行，使阅读路径变得曲折困难。</li>
<li>将长文断成一个个缺乏联系的文字块，这种设计增加了整个导航和交互的复杂性（究竟应上下滚动（scroll）还是左右滑动（swipe））</li>
<li>多栏设计需要更多的连字符（hyphen）；如果左右对齐，每栏的文字内被迫出现众多空档，如果左对齐，右边会出现难看的文字不齐</li>
<li>多栏设计让设计师经常按印刷品的思考方式想问题，每一页的页高也变成是固定的</li>
</ol>
<p><span id="more-2537"></span><br />
<img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/nyt_ipad.png" alt="" title="nyt_ipad" width="500" height="667" class="alignleft size-full wp-image-2548" />
<div class="grey">《纽约时报》app 的一页多栏设计。Image: iA@Flickr</div>
<p>iA 对多栏设计批评并不局限于《连线》app 的设计，众多报纸的 app，包括《纽约时报》（New York Times），都面临这一问题：“每栏只有3－5个单词，仅为了‘看起来很像报纸’？”。这样的设计从上图来看，由于缺乏有效的左右对齐，导致每一行的换行点都不一样，而这一需要频繁换行的行距使得这样的跳跃阅读显得十分累人。</p>
<p>传统的字体排印理论（Bringhurst、Müller-Brockmann 等）说，对于正文来说，每行的单词7—12个（50—70个字母）左右阅读起来会比较舒服，不会太长到读起来太累，也不至太短而阅读不顺畅。多栏设计的报纸通常会有较短的行宽，每行大约4—8个单词。这一设计最主要的原因是多栏设计节省空间（因为整栏设计空行的空间成本要远远大于多栏），同时由于报纸的快速阅读的属性，这样的设计也不影响大多篇幅较短的新闻报道的阅读。而篇幅较长的评论则会被这一频繁的换行而影响阅读，这也是为什么很多报纸（如《卫报》（The Guardian））的评论版会有更宽的行宽，以适合与“浏览”相对的长篇内容和与之匹配的阅读习惯。</p>
<p>《纽约时报》的网站和 app 的艺术总监 <a href="http://www.subtraction.com/">Khoi Vinh</a> 为《纽约时报》app 的设计而<a href="http://www.flickr.com/photos/formforce/4647760506/#comment72157624041881993">辩护</a>称，每行3—5个单词的设计非常普遍，很阅读起来也很容易，应该说除了缺乏连字符和有效的左右对齐，整体还是比较成功的。</p>
<p>iA 回复称报纸使用多栏设计无非是两个原因：一、节省空间；二、印刷品设计对连字符和字符对齐的控制很高，可以使小行宽的文字也不会有大的字缝和阅读障碍。而 iPad 首先没有节省空间的概念，因为垂直方向的空间几乎是无限的，第二，iPad 的设计在文字控制上远达不到一般印刷品的设计。而且这样的设计完全没有充分利用上下滚动（scroll）的交互动作，而过于依赖左右滑动（swipe），与更换文章混淆，进一步将导航复杂化。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/nyt_mimic.jpg" alt="" title="nyt_mimic" width="500" height="667" class="alignleft size-full wp-image-2558" />
<div class="grey">《纽约时报》app 同样文章加大行宽的试验，我们尽量使用了原版的字体等设置。</div>
<p>我们制作了一个使用两栏的《纽约时报》同样的文章，每行单词从3—5增加到5—9，字符量增加到45左右。尽管设计上没有任何推敲，文字的对齐也用了机器硬性对齐，但可以明显感觉到新闻故事的阅读性显著增强。之前不断关于换行位置的下意识担心明显改善，阅读核心明显从换行变成了阅读，阅读节奏也可以有所下降。因此 iA 对于行宽与在 iPad 上使用多栏设计的批评是有道理的。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/ft_ipad.png" alt="" title="ft_ipad" width="500" height="667" class="alignleft size-full wp-image-2561" />
<div class="grey">《金融时报》app 只有两栏，每栏相当宽。Image: Foxmachia</div>
<p>有意思的是，其他媒体的 iPad app 设计都使用了比《纽约时报》更宽的行宽。包括《金融时报》（Financial Times）、《华尔街日报》（Wall Street Journal）和《今日美国》（USA Today）等，似乎在 iPad 下使用三栏过窄是这些 app 设计师的共识。另外具体横版的例图也可以看 jjgod <a href="http://blog.jjgod.org/">这篇文章</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2010/05/2537/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>关于文字的可阅读性：新附配图</title>
		<link>http://www.typeisbeautiful.com/2010/05/2510</link>
		<comments>http://www.typeisbeautiful.com/2010/05/2510#comments</comments>
		<pubDate>Fri, 28 May 2010 18:41:34 +0000</pubDate>
		<dc:creator>Hongzhang Fang</dc:creator>
				<category><![CDATA[使用细节]]></category>
		<category><![CDATA[排版]]></category>
		<category><![CDATA[纯说字体]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=2510</guid>
		<description><![CDATA[配图说明：这篇短文言简意赅，涉及到西文字体排印的一些核心内容和问题，对初学者十分有益。所提结论高度提炼，但绝不应奉为圭臬，仍该有充分的讨论空间。配图后希望帮助理解。配图：Rex Chen

大写 i，小写 L 与数字 1：过于简单的字型并不意味着容易识别。
因为看到豆瓣和这里都有关于 legibility 和 readability 的讨论，发觉自己还有一篇旧文也是关于文字的可阅读性，很早前写的，可能有很多的不足，发上来一起讨论。
一个优秀的字体必须具备十分明显的特征，单个字母的形体必须是不可替换性的，而且字母形体之间要有明显的区分，这种唯一性并不要求其形体最为简单的，但是必须是十分的清楚的，字母的形态是很好被识别的。因为有时字体形体的过于简单，反而会使字体之间的区别不是很大，在阅读的时候不容易区分和识别。


字间距过大过小都会影响阅读。
每个字母之间必须有一定合理空间（Kerning），如果字母之间的距离过于狭小，就像两个挨着很近的鸡蛋随时有可能相碰撞的危险，如果字母间距过大，那字母就会失去张力和紧张感，使得文字阅读变得乏味。所以字母之间的距离应该合适，使得在很紧凑的句子和印刷很差的情况下，不会和其他的字母混淆在一起而影响阅读性。针对一般的文本设计来说，字号越小，字母之间的间距就要越大，以使文字易于辨认。相反，如果将字号调大的话，紧致一些的间距以至于字符之间不会那么松垮，而更易阅读。

默认的字间距并非理想，也需要一再调整。
一个优秀的字体，不管是衬线字体或者是无衬线，在字母排列成文章的时候都会形成统一的灰度，即字母的笔画和笔画之间的空间形成一定的灰度。就是我们常说得是黑白分布得当，所有的字母一样，重要的不是设计黑的部分，而是设计白的部分：即字母旁边和中间的空间。这是非常重要的。比如字体中的 I 和小写 L 或者 i 之间距离应该大些，因为两个竖线所形成的空间是最小的，I 和 C 之间的最短距离则应小些，以使得 I 和 L 之间的空间面积和 I 和 C 之间的面积大致相合。V、W、Y 和其他的字母相匹配的时候的距离应该缩的最小，因为这些字母的倾斜笔画所形成的空间比较大，象 Y 和 a 在一起的时候，有可能为负的数值。调整字距以求分布匀称，视觉上和谐，以达到一种视觉的节奏感和平衡感。西文字体设计师对字距关系的斟酌时间可能占整体字体设计内容的1/3左右。这种要求是不允许有个别字母由于笔画的粗细和空间的差别过大而特别的突兀，从而造成视觉上的不协调和冲突，从而影响阅读的流利性。

正文衬线与非衬线，哪个更适合长时间阅读？
衬线体要比无衬线体在多文字的文章中更具阅读性，在无衬线字体中两个相近拥有竖线的笔画所形成的空间容易引起视觉向下移动。大多数欧文字母的笔画是垂直于基准线，衬线会在基准线上形成水平型的笔画，这些衬线笔画可以使得这些字母在基准线上的笔画在视觉上会形成一定的水平导视，可以引导视觉朝着水平方向移动，使得阅读文字的速度加快，有研究机构测试表明，一般来说在同等印刷条件下衬线体在的阅读速度要比无衬线体快五分之一左右，而且因为要考虑衬线笔画的位置，一般来说，衬线字体字母之间的距离要比无衬线字体大，使得被识别性系数提高，这就是为什么在大量文字的新闻报纸，杂志上基本上使用衬线字体。

盖住下部，哪个更好认？
衬线体字母的上端部位的衬线，使得字体本身的特征更加的突出，即使有时字体上部分或者是下部分被挡住，仍然可以被识别。这样就也可以避免一些字体组合的时候由于字体磅数过于小，或者是字体字距被压缩而导致的混淆于一起，比如我们经常可以看到 ri 和 n，rn 和 m 的混淆，而衬线笔画的增加可以有效的避免这种危险。现在很多字体设计都糅合这两种字体的优点进行设计，比如德国铁路新的标准字体。
当然可阅读性还取决于其他的重要因素，比如字体的磅数，单词之间的距离，句子的形式，句子的长度，句子之间的距离，段落之间的关系，还涉及到印刷的质量，字体的色彩，纸张的质量和色彩等众多的其他因素。
参考

Lesetypographie, Hans Peter Willberg, Friedrich Forssmann, 1997, Verlag Hermann   Schmidt.
Spiekermann ueberschrift, Erik Epiekermann, 2004, Verlag Hermann [...]]]></description>
			<content:encoded><![CDATA[<div class="credits">配图说明：这篇短文言简意赅，涉及到西文字体排印的一些核心内容和问题，对初学者十分有益。所提结论高度提炼，但绝不应奉为圭臬，仍该有充分的讨论空间。配图后希望帮助理解。配图：Rex Chen</div>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/legibility_1.jpg" alt="" title="legibility_1" width="500" height="167" class="alignleft size-full wp-image-2512" />
<div class="grey">大写 i，小写 L 与数字 1：过于简单的字型并不意味着容易识别。</div>
<p>因为看到<a href="http://www.douban.com/group/topic/10416279/">豆瓣</a>和这里都有关于 legibility 和 readability 的<a href="http://www.typeisbeautiful.com/2010/03/2190">讨论</a>，发觉自己还有一篇旧文也是关于文字的可阅读性，很早前写的，可能有很多的不足，发上来一起讨论。</p>
<p>一个优秀的字体必须具备十分明显的特征，单个字母的形体必须是不可替换性的，而且字母形体之间要有明显的区分，这种唯一性并不要求其形体最为简单的，但是必须是十分的清楚的，字母的形态是很好被识别的。因为有时字体形体的过于简单，反而会使字体之间的区别不是很大，在阅读的时候不容易区分和识别。<br />
<span id="more-2510"></span><br />
<img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/legibility_2.jpg" alt="" title="legibility_2" width="500" height="192" class="alignleft size-full wp-image-2513" />
<div class="grey">字间距过大过小都会影响阅读。</div>
<p>每个字母之间必须有一定合理空间（Kerning），如果字母之间的距离过于狭小，就像两个挨着很近的鸡蛋随时有可能相碰撞的危险，如果字母间距过大，那字母就会失去张力和紧张感，使得文字阅读变得乏味。所以字母之间的距离应该合适，使得在很紧凑的句子和印刷很差的情况下，不会和其他的字母混淆在一起而影响阅读性。针对一般的文本设计来说，字号越小，字母之间的间距就要越大，以使文字易于辨认。相反，如果将字号调大的话，紧致一些的间距以至于字符之间不会那么松垮，而更易阅读。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/legibility_3.jpg" alt="" title="legibility_3" width="500" height="223" class="alignleft size-full wp-image-2514" />
<div class="grey">默认的字间距并非理想，也需要一再调整。</div>
<p>一个优秀的字体，不管是衬线字体或者是无衬线，在字母排列成文章的时候都会形成统一的灰度，即字母的笔画和笔画之间的空间形成一定的灰度。就是我们常说得是黑白分布得当，所有的字母一样，重要的不是设计黑的部分，而是设计白的部分：即字母旁边和中间的空间。这是非常重要的。比如字体中的 I 和小写 L 或者 i 之间距离应该大些，因为两个竖线所形成的空间是最小的，I 和 C 之间的最短距离则应小些，以使得 I 和 L 之间的空间面积和 I 和 C 之间的面积大致相合。V、W、Y 和其他的字母相匹配的时候的距离应该缩的最小，因为这些字母的倾斜笔画所形成的空间比较大，象 Y 和 a 在一起的时候，有可能为负的数值。调整字距以求分布匀称，视觉上和谐，以达到一种视觉的节奏感和平衡感。西文字体设计师对字距关系的斟酌时间可能占整体字体设计内容的1/3左右。这种要求是不允许有个别字母由于笔画的粗细和空间的差别过大而特别的突兀，从而造成视觉上的不协调和冲突，从而影响阅读的流利性。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/legibility_4.jpg" alt="" title="legibility_4" width="500" height="269" class="alignleft size-full wp-image-2515" />
<div class="grey">正文衬线与非衬线，哪个更适合长时间阅读？</div>
<p>衬线体要比无衬线体在多文字的文章中更具阅读性，在无衬线字体中两个相近拥有竖线的笔画所形成的空间容易引起视觉向下移动。大多数欧文字母的笔画是垂直于基准线，衬线会在基准线上形成水平型的笔画，这些衬线笔画可以使得这些字母在基准线上的笔画在视觉上会形成一定的水平导视，可以引导视觉朝着水平方向移动，使得阅读文字的速度加快，有研究机构测试表明，一般来说在同等印刷条件下衬线体在的阅读速度要比无衬线体快五分之一左右，而且因为要考虑衬线笔画的位置，一般来说，衬线字体字母之间的距离要比无衬线字体大，使得被识别性系数提高，这就是为什么在大量文字的新闻报纸，杂志上基本上使用衬线字体。</p>
<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/legibility_5.jpg" alt="" title="legibility_5" width="500" height="246" class="alignleft size-full wp-image-2521" />
<div class="grey">盖住下部，哪个更好认？</div>
<p>衬线体字母的上端部位的衬线，使得字体本身的特征更加的突出，即使有时字体上部分或者是下部分被挡住，仍然可以被识别。这样就也可以避免一些字体组合的时候由于字体磅数过于小，或者是字体字距被压缩而导致的混淆于一起，比如我们经常可以看到 ri 和 n，rn 和 m 的混淆，而衬线笔画的增加可以有效的避免这种危险。现在很多字体设计都糅合这两种字体的优点进行设计，比如德国铁路新的标准字体。</p>
<p>当然可阅读性还取决于其他的重要因素，比如字体的磅数，单词之间的距离，句子的形式，句子的长度，句子之间的距离，段落之间的关系，还涉及到印刷的质量，字体的色彩，纸张的质量和色彩等众多的其他因素。</p>
<h3>参考</h3>
<ul>
<li>Lesetypographie, Hans Peter Willberg, Friedrich Forssmann, 1997, Verlag Hermann   Schmidt.</li>
<li>Spiekermann ueberschrift, Erik Epiekermann, 2004, Verlag Hermann Schmidt.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2010/05/2510/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>《泰晤士报》：报纸网站的未来？</title>
		<link>http://www.typeisbeautiful.com/2010/05/2480</link>
		<comments>http://www.typeisbeautiful.com/2010/05/2480#comments</comments>
		<pubDate>Tue, 25 May 2010 12:52:29 +0000</pubDate>
		<dc:creator>Rex Chen</dc:creator>
				<category><![CDATA[展示]]></category>
		<category><![CDATA[报刊书籍]]></category>
		<category><![CDATA[排版]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=2480</guid>
		<description><![CDATA[
《泰晤士报》新网站首页
英国《泰晤士报》（The Times）网站今天改版，推出新设计的网站，大刀阔斧地改变了网站的风格和路线。作为报纸拥有者默多克（Murdoch）的新政策，新的网站面向群体从没有付费的公众变为有针对性的付费用户。因此整个网站设计更加趋向于报纸的电子版，包括报头、大幅题图、减少的首页信息，以及更加低调和去商业化的栏目设计。


《泰晤士报》旧网站首页
新网站域名“thetimes.co.uk”将代替旧网站域名“timesonline.co.uk”，也表明《泰晤士报》放弃了 TimesOnline 这一在线品牌。网站设计使用了灵活的网格系统（grid），有至少超过四种宽度的基本格。网站主字体使用了新闻网站首选的 Georgia，而没有用与《泰晤士报》自己血脉相连的 Times New Roman；附属字体是 Arial。新的设计风格明显低调沉稳，大量信息的减少也使网站简洁厚实，没有其他新闻网站的信息堆砌。当然新网站也非没有问题，无论是标题还是正文，行距（leading）都值得再推敲；另外过于多样化的网格系统有些凌乱，对阅读的影响还是未知数。

《泰晤士报》新网站首页子菜单
这次的设计的基本点是默多克开始报纸网站收费的内容模式。新网站着力于提供收费用户独一无二的新闻资源，而非一个像 Google News 一样庞大的新闻聚合体。因此新网站的内容将大幅减少，相应文章质量和读编关系都会有改善。新网站将于四周后完全代替旧网站。非注册用户此后将无法阅读任何全文，必须注册并缴交费用（1英镑/日，2英镑/周，约合人民币10元/日，20元/周）。作为默多克阻击 Google 等免费新闻的最狠一招，此后《泰晤士报》的在线资源将完全从搜索引擎 Google 等消失。

《泰晤士报》新网站内主题页
此次设计根据默多克的要求，大幅改变了传统新闻网站半社区性质的特点，重新回到报纸的本质。这一潮流也迎合了当今众多媒体 iPad 版的设计风格。无论默多克这一赌在商业上是否走了正确的一步棋，但新的设计清新、注重细节与回归本质，完全可以为当今其他媒体网站所学习。
设计团队：Jon Hill、Simon Heys；Freelance：Jamie Long、Nural Choudhury、Chris Clarke。网站编辑：Tom Whitwell
延伸

《卫报》（Guardian）报道和简评
《Eye》简评

]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-2481" title="thetimes_new" src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/thetimes_new.png" alt="" width="600" height="456" /></p>
<div class="grey">《泰晤士报》新网站首页</div>
<p>英国《泰晤士报》（The Times）网站今天改版，推出<a href="http://www.thetimes.co.uk">新设计的网站</a>，大刀阔斧地改变了网站的风格和路线。作为报纸拥有者默多克（Murdoch）的新政策，新的网站面向群体从没有付费的公众变为有针对性的付费用户。因此整个网站设计更加趋向于报纸的电子版，包括报头、大幅题图、减少的首页信息，以及更加低调和去商业化的栏目设计。<br />
<span id="more-2480"></span><br />
<img class="alignleft size-full wp-image-2488" title="thetimes_old" src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/thetimes_old.png" alt="" width="600" height="391" /></p>
<div class="grey">《泰晤士报》旧网站首页</div>
<p>新网站域名“thetimes.co.uk”将代替旧网站域名“timesonline.co.uk”，也表明《泰晤士报》放弃了 TimesOnline 这一在线品牌。网站设计使用了灵活的网格系统（grid），有至少超过四种宽度的基本格。网站主字体使用了新闻网站首选的 Georgia，而没有用与《泰晤士报》自己血脉相连的 Times New Roman；附属字体是 Arial。新的设计风格明显低调沉稳，大量信息的减少也使网站简洁厚实，没有其他新闻网站的信息堆砌。当然新网站也非没有问题，无论是标题还是正文，行距（leading）都值得再推敲；另外过于多样化的网格系统有些凌乱，对阅读的影响还是未知数。</p>
<p><img class="alignleft size-full wp-image-2483" title="thetimes_new_2" src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/thetimes_new_2.png" alt="" width="600" height="396" /></p>
<div class="grey">《泰晤士报》新网站首页子菜单</div>
<p>这次的设计的基本点是默多克开始报纸网站收费的内容模式。新网站着力于提供收费用户独一无二的新闻资源，而非一个像 Google News 一样庞大的新闻聚合体。因此新网站的内容将大幅减少，相应文章质量和读编关系都会有改善。新网站将于四周后完全代替旧网站。非注册用户此后将无法阅读任何全文，必须注册并缴交费用（1英镑/日，2英镑/周，约合人民币10元/日，20元/周）。作为默多克阻击 Google 等免费新闻的最狠一招，此后《泰晤士报》的在线资源将完全从搜索引擎 Google 等消失。</p>
<p><img class="alignleft size-full wp-image-2484" title="thetimes_new_3" src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/thetimes_new_3.png" alt="" width="600" height="395" /></p>
<div class="grey">《泰晤士报》新网站内主题页</div>
<p>此次设计根据默多克的要求，大幅改变了传统新闻网站半社区性质的特点，重新回到报纸的本质。这一潮流也迎合了当今众多媒体 iPad 版的设计风格。无论默多克这一赌在商业上是否走了正确的一步棋，但新的设计清新、注重细节与回归本质，完全可以为当今其他媒体网站所学习。</p>
<p>设计团队：Jon Hill、Simon Heys；Freelance：Jamie Long、Nural Choudhury、Chris Clarke。网站编辑：Tom Whitwell</p>
<h4>延伸</h4>
<ul>
<li>《卫报》（Guardian）<a href="http://www.guardian.co.uk/media/organgrinder/2010/may/25/thetimes-compact-paper-broadsheet-website">报道和简评</a></li>
<li>《Eye》<a href="http://blog.eyemagazine.com/?p=549">简评</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2010/05/2480/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>发布 VerTick WordPress 直排主题</title>
		<link>http://www.typeisbeautiful.com/2010/05/2340</link>
		<comments>http://www.typeisbeautiful.com/2010/05/2340#comments</comments>
		<pubDate>Sun, 02 May 2010 22:19:58 +0000</pubDate>
		<dc:creator>Rex Chen</dc:creator>
				<category><![CDATA[创意]]></category>
		<category><![CDATA[排版]]></category>
		<category><![CDATA[数字化]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=2340</guid>
		<description><![CDATA[
VerTick 实现效果
我们的网站技术人员 Metaphox 有一天在 Twitter 上看到了 Nehan 这一使用 JavaScript 来实现日文直排（竖排）的工具，就以其为基础做出了一款 Wordpress 主题：VerTick（Demo 演示）。目前这款主题已经基本完工，Metaphox 决定将它发布，以供有兴趣的人使用。同时，关于这款主题的使用细节，我们也对 Metaphox 进行了简单的采访，内文如下。

说一说做直排 Wordpress 主题的动机？或者应该先问你为什么喜欢直排中文？
Metaphox：为什么喜欢直排中文，可能是因为我爸是学古汉语文学的，家里有不少直排的书，小时候看过一些，觉得直排的中文很好看。虽然后来在很长的一段时间里，我都以为只有古书是直排的，对世界上还有不少人仍旧将直排作为日常阅读文本的排版方式这一事实浑然无知。再后来我发现，二十一世纪中国大陆网络文艺青年的圈子里时兴起书写“没被简化的中文”风潮，并且多少都对中文简化颇有微词，却没见到几个人认为直排也应该复辟一回。字的写法几千年来都在慢慢改变，字的排列方向之改变却是剧烈而突然的，反对前者却对后者视而不见，想一想真是件很可笑的事情。
至于制作这个 Wordpress 主题的动机，简要概括就是：闲得蛋疼。至于比较详细的缘由，大概可以回顾到我大学二年级，刚刚开始和 HTML/CSS 彼此折磨的时候。那时 IE 还基本上是唯一的浏览器，而 IE 对直排的支持虽然不算完美，但是至少是可以做到的，我也觉得直排的中文在网页上很漂亮。后来 IE 渐渐被一众新浏览器所颠覆，尽管后来者们有这样那样的优点，不支持直排却始终是个缺憾，我总觉得应该弥补一下，但是要做的事情太多，而且也看不到比较优雅的解决方法，渐渐也就满足于看看直排的纸书，对网页直排失去了希望，直到遇见 nehan。
Nehan 是怎样实现直排的呢？为什么要用 JavaScript 来实现直排？
Metaphox：Nehan（日文“涅磐”，作者为渡辺正紀）实现直排的方式其实相当暴力，简单来说就是在每个字符下面插入一个换行符，然后把字都塞进宽度为一的狭长表格单元里面强迫对齐，再把多个这样的单元逆序排成一个表格，这样就完成了一页直排文本。但是原理说起来简单，做起来实际上是非常复杂的，比如标点符号、图片混排、西文混排、超文本链接的处理等等，还有日文的“振假名”，也就是在汉字的右侧加上小号字体的假名注音这个需求，也要想办法完成。Nehan 比较优秀地完成了这些工作，虽然并不完美——“完美的程序”这种东西，本来就不存在于这个世界——但是绝对已经可以付诸实用了。实际上 Nehan 最主要的应用就是“縦書き文庫”，一个在线阅读的日文书库。
使用 JavaScript 来进行排版的原因，最大的好处是它不会破坏文档本身的语义特性。正确地使用 HTML 可以标记出文档的结构，而这可以帮助机器（比如搜索引擎）来“阅读”文档。JavaScript 对文字的转换是不会影响机器的理解的，因为机器“看”不到被转换之后的文字。做个小小的比较：用假古文这样的工具将一段文本转为直排，然后发布到网络上。对于搜索引擎来说，这段文本毫无意义，因为它已经没有次序了，但是用 Nehan 的话，就没有这个问题。至于使用 JavaScript 会拖慢浏览器这个缺点，相比之下还是可以接受的。
那么，简要介绍一下 VerTick？
Metaphox：事实上 Nehan 是很灵活的工具，可以很简单地放在几乎任何网页上达成直排的效果。但是能够自己动手做这件事终究是需要一定的编程知识的，所以我想如果能简化一下它的使用，也许会方便更多的喜欢直排的人。网络上使用 Wordpress 的人很多，TIB 在用，我也用过，所以做一个整合 Nehan 的 Wordpress 主题，在我看来是个不错的主意。
VerTick 把 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2344" title="vertick" src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/vertick.png" alt="" width="600" height="436" /></p>
<div class="grey">VerTick 实现效果</div>
<p>我们的网站技术人员 Metaphox 有一天在 Twitter 上看到了 <a href="https://code.google.com/p/nehan/">Nehan</a> 这一使用 JavaScript 来实现日文直排（竖排）的工具，就以其为基础做出了一款 Wordpress 主题：<a href="http://vertick.metaphox.name">VerTick</a>（<a href="http://bdf.metaphox.name/">Demo 演示</a>）。目前这款主题已经基本完工，Metaphox 决定将它发布，以供有兴趣的人使用。同时，关于这款主题的使用细节，我们也对 Metaphox 进行了简单的采访，内文如下。<br />
<span id="more-2340"></span></p>
<h4>说一说做直排 Wordpress 主题的动机？或者应该先问你为什么喜欢直排中文？</h4>
<p>Metaphox：为什么喜欢直排中文，可能是因为我爸是学古汉语文学的，家里有不少直排的书，小时候看过一些，觉得直排的中文很好看。虽然后来在很长的一段时间里，我都以为只有古书是直排的，对世界上还有不少人仍旧将直排作为日常阅读文本的排版方式这一事实浑然无知。再后来我发现，二十一世纪中国大陆网络文艺青年的圈子里时兴起书写“没被简化的中文”风潮，并且多少都对中文简化颇有微词，却没见到几个人认为直排也应该复辟一回。字的写法几千年来都在慢慢改变，字的排列方向之改变却是剧烈而突然的，反对前者却对后者视而不见，想一想真是件很可笑的事情。</p>
<p>至于制作这个 Wordpress 主题的动机，简要概括就是：闲得蛋疼。至于比较详细的缘由，大概可以回顾到我大学二年级，刚刚开始和 HTML/CSS 彼此折磨的时候。那时 IE 还基本上是唯一的浏览器，而 IE 对直排的支持虽然不算完美，但是至少是可以做到的，我也觉得直排的中文在网页上很漂亮。后来 IE 渐渐被一众新浏览器所颠覆，尽管后来者们有这样那样的优点，不支持直排却始终是个缺憾，我总觉得应该弥补一下，但是要做的事情太多，而且也看不到比较优雅的解决方法，渐渐也就满足于看看直排的纸书，对网页直排失去了希望，直到遇见 nehan。</p>
<h4>Nehan 是怎样实现直排的呢？为什么要用 JavaScript 来实现直排？</h4>
<p>Metaphox：Nehan（日文“涅磐”，作者为渡辺正紀）实现直排的方式其实相当暴力，简单来说就是在每个字符下面插入一个换行符，然后把字都塞进宽度为一的狭长表格单元里面强迫对齐，再把多个这样的单元逆序排成一个表格，这样就完成了一页直排文本。但是原理说起来简单，做起来实际上是非常复杂的，比如标点符号、图片混排、西文混排、超文本链接的处理等等，还有日文的“振假名”，也就是在汉字的右侧加上小号字体的假名注音这个需求，也要想办法完成。Nehan 比较优秀地完成了这些工作，虽然并不完美——“完美的程序”这种东西，本来就不存在于这个世界——但是绝对已经可以付诸实用了。实际上 Nehan 最主要的应用就是“<a href="http://tategakibunko.mydns.jp/">縦書き文庫</a>”，一个在线阅读的日文书库。</p>
<p>使用 JavaScript 来进行排版的原因，最大的好处是它不会破坏文档本身的语义特性。正确地使用 HTML 可以标记出文档的结构，而这可以帮助机器（比如搜索引擎）来“阅读”文档。JavaScript 对文字的转换是不会影响机器的理解的，因为机器“看”不到被转换之后的文字。做个小小的比较：用<a href="http://typeset.ipcn.org/">假古文</a>这样的工具将一段文本转为直排，然后发布到网络上。对于搜索引擎来说，这段文本毫无意义，因为它已经没有次序了，但是用 Nehan 的话，就没有这个问题。至于使用 JavaScript 会拖慢浏览器这个缺点，相比之下还是可以接受的。</p>
<h4>那么，简要介绍一下 VerTick？</h4>
<p><img class="alignleft size-full wp-image-2351" title="vertick_title" src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/vertick_title.jpg" alt="" width="230" height="76" />Metaphox：事实上 Nehan 是很灵活的工具，可以很简单地放在几乎任何网页上达成直排的效果。但是能够自己动手做这件事终究是需要一定的编程知识的，所以我想如果能简化一下它的使用，也许会方便更多的喜欢直排的人。网络上使用 Wordpress 的人很多，TIB 在用，我也用过，所以做一个整合 Nehan 的 Wordpress 主题，在我看来是个不错的主意。</p>
<p>VerTick 把 Nehan 和 Wordpress 的默认主题针对中文的使用习惯做了做调整，还实现了一些比如全中文日期之类的细节功能。使用起来，只需要下载，解压，上传，激活这个主题，这是每个 Wordpress 用户都会做的事情——然后就能看到自己既有的文本被直排好了。</p>
<p>目前它提供三个选项：</p>
<ul>
<li>在预制的四种 CSS FontStack 之中选择宋、黑、仿宋、楷体</li>
<li>选择传统中文的标点（居中）或者中国大陆的国家标准（部分标点靠右）</li>
<li>使用中文或者被简化的中文作为提示文字</li>
</ul>
<p>当然，第一个选项严重受限于浏览器和操作系统。仿宋和楷体在 Mac 上的显示很漂亮，在 Windows 上则相当难看。至于 Linux，我只测试了 Ubuntu 10.4，感觉还是过得去的，而且我相信 Linux 的 DIY 玩家们应该也不需要我来操心这个问题。</p>
<p>VerTick 主题目前很简陋，还有很多需要改进的地方，比如对 Widgets 的支持，更好的易用性细节等等，不过目前这个状态已经是可以用了，修改起来也很容易。我把源代码放在 github 上面，以后还会渐渐完善。我自己也打算重新开一个 Wordpress，把混杂西文比较少的日志放在上面，身体力行“eat your own dogfood”这条程序员的哲学……</p>
<h4>还有什么想说的吗？</h4>
<p>Metaphox：嗯。负责 Web 标准的 W3C 已经着手于不同语言书写方向的标准制定工作很久了，但是在那个几乎永远处于草案状态的标准确定下来，并且被几个主要的浏览器厂商实现之前，Nehan 大概是我已知的最佳方案。很遗憾，不论是着力推动 W3C 为文本直排之实现制定标准的，还是最终完成 Nehan 的，都和我们这个世界上最大的汉语使用国家没什么关系。</p>
<p>不过无论如何，希望在今后的某一天，可以看到浏览器完美地支持直排文本，像下图这样的书籍排版，可以在网上完美地重现：</p>
<p><img class="alignnone size-full wp-image-2346" title="guoshidagang" src="http://www.typeisbeautiful.com/wp-content/uploads/2010/05/guoshidagang.png" alt="" width="500" height="778" />
<div class="grey">《国史大纲》，钱穆</div>
<ul>
<li>VerTick <a href="http://vertick.metaphox.name">下载</a></li>
<li>VerTick <a href="http://bdf.metaphox.name/">Demo 演示</a></li>
<li>VerTick 最新的<a href="http://github.com/metaphox/VerTick">源代码</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2010/05/2340/feed</wfw:commentRss>
		<slash:comments>43</slash:comments>
		</item>
		<item>
		<title>我们怎么用中文强调？</title>
		<link>http://www.typeisbeautiful.com/2009/12/1749</link>
		<comments>http://www.typeisbeautiful.com/2009/12/1749#comments</comments>
		<pubDate>Tue, 15 Dec 2009 03:46:35 +0000</pubDate>
		<dc:creator>Colourphilosophy</dc:creator>
				<category><![CDATA[亚洲]]></category>
		<category><![CDATA[使用细节]]></category>
		<category><![CDATA[排版]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=1749</guid>
		<description><![CDATA[
Image: justsven.net
 在西文中（英文、法文、德文……），要在一句话中突出表示一个单词，或者一句引语，往往可以采用 Italic。如：I love you. 或是：He said I love you. 随着电脑时代的到来，几乎我们所有使用的文字处理软件，都天然地带有2个功能：斜体和加粗。包括我此刻正在使用的 WordPress。然而说到中文，我们的书写历史上，似乎从未正式出现过使用斜体和加粗的办法来强调某个词语或者某句引语。
SWX 做一个有趣的收集和比较。让我们来好好探讨下，在中文语境中，我们该不该使用不同字体作为强调？以什么样的形式？中文的语言，是不是非得借助于字体的强调？我们如何从语言和文字的层面进行翻译？
]]></description>
			<content:encoded><![CDATA[<p><a href="http://justsven.net/blog/wp-content/uploads/2009/12/DSCF2901.JPG"><img class="alignnone" src="http://justsven.net/blog/wp-content/uploads/2009/12/DSCF2901.JPG" alt="" width="500" height="307" /></a>
<div class="grey">Image: <a href="http://justsven.net/">justsven.net</a></div>
<p> 在西文中（英文、法文、德文……），要在一句话中突出表示一个单词，或者一句引语，往往可以采用 Italic。如：I <em>love</em> you. 或是：He said<em> I love you</em>. 随着电脑时代的到来，几乎我们所有使用的文字处理软件，都天然地带有2个功能：斜体和加粗。包括我此刻正在使用的 WordPress。然而说到中文，我们的书写历史上，似乎从未正式出现过使用斜体和加粗的办法来强调某个词语或者某句引语。</p>
<p>SWX 做一个有趣的<span style="color: #000000"><a href="http://justsven.net/2009/12/on_tmd/" target="_blank">收集和比较</a></span>。让我们来好好探讨下，在中文语境中，我们该不该使用不同字体作为强调？以什么样的形式？中文的语言，是不是非得借助于字体的强调？我们如何从语言和文字的层面进行翻译？</p>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2009/12/1749/feed</wfw:commentRss>
		<slash:comments>50</slash:comments>
		</item>
		<item>
		<title>《Tages-Anzeiger》落选的新设计（续）</title>
		<link>http://www.typeisbeautiful.com/2009/10/1570</link>
		<comments>http://www.typeisbeautiful.com/2009/10/1570#comments</comments>
		<pubDate>Tue, 13 Oct 2009 15:24:40 +0000</pubDate>
		<dc:creator>Rex Chen</dc:creator>
				<category><![CDATA[印刷]]></category>
		<category><![CDATA[展示]]></category>
		<category><![CDATA[报刊书籍]]></category>
		<category><![CDATA[排版]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=1570</guid>
		<description><![CDATA[
Image: fhzdesign.blog.sohu.com
方宏章在 blog 上发表了另一篇关于《Tagas-Anzeiger》的新设计，同样也是落选的方案。由美国人 Brian O’Connor 设计。
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.typeisbeautiful.com/wp-content/uploads/2009/10/ta_2.jpg" alt="ta_2" title="ta_2" width="600" height="361" class="alignleft size-full wp-image-1571" />
<div class="grey">Image: fhzdesign.blog.sohu.com</div>
<p>方宏章在 blog 上发表了<a href="http://fhzdesign.blog.sohu.com/133894156.html">另一篇</a>关于《Tagas-Anzeiger》的新设计，同样也是落选的方案。由美国人 Brian O’Connor 设计。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2009/10/1570/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>《Tages-Anzeiger》落选的新设计</title>
		<link>http://www.typeisbeautiful.com/2009/10/1555</link>
		<comments>http://www.typeisbeautiful.com/2009/10/1555#comments</comments>
		<pubDate>Sun, 11 Oct 2009 21:10:36 +0000</pubDate>
		<dc:creator>Rex Chen</dc:creator>
				<category><![CDATA[创意]]></category>
		<category><![CDATA[展示]]></category>
		<category><![CDATA[报刊书籍]]></category>
		<category><![CDATA[排版]]></category>

		<guid isPermaLink="false">http://www.typeisbeautiful.com/?p=1555</guid>
		<description><![CDATA[
左为旧版设计，右为新版设计。Image: iA
在Hi-iD上看到的消息。瑞士苏黎世出版的全国性德语报纸《Tages-Anzeiger》（每日导报）于近日完成了新版设计，由 Tom Menzi 操刀。但今天要提《TA》的重新设计方案中参加投标的一个，由基于苏黎世和东京的 iA（InformationArchitects）操刀，因为他们新颖的设计思路，我觉得有必要在众多重新设计报纸的 project 中提起，即便他们没有获得这个项目。正如他们说的：这是一个美丽的失败故事。


在文章中用蓝色字标出重点词句，不仅可以迅速浏览文章重点，也便于跨平台浏览。Image: iA
iA 是一家以用户体验为中心的工作室，它们在解释新设计概念时称：
让报纸更易使用，使用跨媒体的思路，充分利用报纸图片、信息图、文章好的优势。尽管要从根本上重新设计，但外观上要尽量和旧版保持一致。新的报纸要让人因为易用性比别人强而购买，而非获过平面设计奖。
新设计大胆的提出，放弃一切报纸设计的条规，一切从用户的使用出发。因此主要的变革包括：

使用更易读的文字，拉大行距和字号，即便看起来不再像一般的报纸。
将字体只限于两种：Frutiger Next 和 Frutiger Serif，两者配合天衣无缝。
在文章中用蓝色字标出重点词句，不仅可以迅速浏览文章重点，也可以利用这些关键词迅速在网站上获得扩展讯息，摒弃了冗长的 URL。
每一页都严格按照顺序，左上角为重点文章，右下角为次要文章。
严肃新闻分五栏排，非严肃新闻四栏，体育版混排。并且评论版不用两边对齐。
大尺寸图片和信息图，充分利用纸质优势。


大尺寸图片，各版分栏设计不同。Image: iA
这个方案失败的原因的根源，也是这个方案吸引眼球的根源，在于 iA 是一个注重线上体验的公司，在制作新闻网站方面经验丰富，因此将网络用户体验的知识和经验带到纸质媒体的设计上，虽然这对于传统媒体来说是极具革命性的，但也不能避免他们的局限性。设计过于考虑外观，而缺乏对新闻的理解。比如每页按文章重要性排列位置，似乎就是一个实施起来很困难的设计。标出重点词句的做法也极具争议性。
报纸设计评论 Mario García 也喜欢这一设计，但几次谈到 iA 在纸质报纸设计思维上的“稚嫩”（naiveté），不了解编辑思考问题的方法和新闻故事的结构（他提到方案展示时，有的图片没有底部图片说明，这在报纸编辑看来是致命的不专业新闻的表现）。但也正是这种“‘单纯’（innocence）与创意混合，成为了这个方案的闪光点”。
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.flickr.com/photos/formforce/3967849075/sizes/l/"><img class="alignleft size-full wp-image-1554" title="tages_anzeiger" src="http://www.typeisbeautiful.com/wp-content/uploads/2009/10/tages_anzeiger.jpg" alt="tages_anzeiger" width="600" height="344" /></a></p>
<div class="grey">左为旧版设计，右为新版设计。Image: <a href="http://informationarchitects.jp/tages-anzeiger-paper-redesign-pitch-lost/">iA</a></div>
<p>在<a href="http://www.hi-id.com/?p=2442">Hi-iD</a>上看到的消息。瑞士苏黎世出版的全国性德语报纸《Tages-Anzeiger》（每日导报）于近日完成了新版设计，由 <a href="http://www.tagesanzeiger.ch/zuerich/region/Sinnlich-und-serioes-Das-ist-der-neue-TagesAnzeiger/story/19712832">Tom Menzi</a> 操刀。但今天要提《TA》的重新设计方案中参加投标的一个，由基于苏黎世和东京的 <a href="http://informationarchitects.jp/">iA</a>（InformationArchitects）操刀，因为他们新颖的设计思路，我觉得有必要在众多重新设计报纸的 project 中提起，即便他们没有获得这个项目。正如他们说的：这是一个美丽的失败故事。<br />
<span id="more-1555"></span><br />
<a href="http://www.flickr.com/photos/formforce/3967967841/sizes/l/"><img src="http://www.typeisbeautiful.com/wp-content/uploads/2009/10/tages_anzeiger_2.jpg" alt="tages_anzeiger_2" title="tages_anzeiger_2" width="500" height="353" class="alignleft size-full wp-image-1560" /></a>
<div class="grey">在文章中用蓝色字标出重点词句，不仅可以迅速浏览文章重点，也便于跨平台浏览。Image: <a href="http://informationarchitects.jp/tages-anzeiger-paper-redesign-pitch-lost/">iA</a></div>
<p>iA 是一家以用户体验为中心的工作室，它们在解释新设计概念时称：</p>
<blockquote><p>让报纸更易使用，使用跨媒体的思路，充分利用报纸图片、信息图、文章好的优势。尽管要从根本上重新设计，但外观上要尽量和旧版保持一致。新的报纸要让人因为易用性比别人强而购买，而非获过平面设计奖。</p></blockquote>
<p>新设计大胆的提出，放弃一切报纸设计的条规，一切从用户的使用出发。因此主要的变革包括：</p>
<ol>
<li>使用更易读的文字，拉大行距和字号，即便看起来不再像一般的报纸。</li>
<li>将字体只限于两种：Frutiger Next 和 Frutiger Serif，两者配合天衣无缝。</li>
<li>在文章中用蓝色字标出重点词句，不仅可以迅速浏览文章重点，也可以利用这些关键词迅速在网站上获得扩展讯息，摒弃了冗长的 URL。</li>
<li>每一页都严格按照顺序，左上角为重点文章，右下角为次要文章。</li>
<li>严肃新闻分五栏排，非严肃新闻四栏，体育版混排。并且评论版不用两边对齐。</li>
<li>大尺寸图片和信息图，充分利用纸质优势。</li>
</ol>
<p><a href="http://www.flickr.com/photos/formforce/3968524868/sizes/l/"><img src="http://www.typeisbeautiful.com/wp-content/uploads/2009/10/tages_anzeiger_3.jpg" alt="tages_anzeiger_3" title="tages_anzeiger_3" width="600" height="450" class="alignleft size-full wp-image-1561" /></a>
<div class="grey">大尺寸图片，各版分栏设计不同。Image: <a href="http://informationarchitects.jp/tages-anzeiger-paper-redesign-pitch-lost/">iA</a></div>
<p>这个方案失败的原因的根源，也是这个方案吸引眼球的根源，在于 iA 是一个注重线上体验的公司，在制作新闻网站方面经验丰富，因此将网络用户体验的知识和经验带到纸质媒体的设计上，虽然这对于传统媒体来说是极具革命性的，但也不能避免他们的局限性。设计过于考虑外观，而缺乏对新闻的理解。比如每页按文章重要性排列位置，似乎就是一个实施起来很困难的设计。标出重点词句的做法也极具争议性。</p>
<p>报纸设计评论 <a href="http://garciamedia.com/blog/articles/tages_anzeiger_of_switzerland_tale_of_a_new_look_and_the_model_that_didnt_q">Mario García</a> 也喜欢这一设计，但几次谈到 iA 在纸质报纸设计思维上的“稚嫩”（naiveté），不了解编辑思考问题的方法和新闻故事的结构（他提到方案展示时，有的图片没有底部图片说明，这在报纸编辑看来是致命的不专业新闻的表现）。但也正是这种“‘单纯’（innocence）与创意混合，成为了这个方案的闪光点”。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.typeisbeautiful.com/2009/10/1555/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

