响应式排版：第一步
通常，在创建网站的时候，我们首先会定义主体（body）的文字。主体的文字决定了你的版心有多宽，之后的其他元素也就自然形成了。过去，屏幕的分辨率大抵相差不多，今天，我们不得不去考虑不同大小的屏幕和分辨率，而这让排版也变得更加复杂。
于是我重新整理了之前的关于响应式排版的文章，这一次，我们专注于一项最新的实验：响应式字体。如果你不知道 iA 的历史，那么你很可能错过了我们重建网站中关于响应式排版的关键部分。我们对所有的文章都重新进行了排版，为此，我需要一步步讲解响应式排版。现在，就是第一步。
- 自适应布局（Adaptive Layouts）：通过简单的调整来适应一些特定的设备。
- 浮动布局（Liquid Layouts）：不断根据设备尺寸来调整宽度（width）。
虽然两者都有优缺点，但是我认为，相对来说，自适应布局最大限度地保证了内容的可读性，毕竟，相对于版式的排布，可读性更为重要。而可读性本身就是一个值得商榷的复杂问题，最佳的可读性需要对文本有一些量的控制（列宽），而在这方面，浮动布局所解决的问题并不比产生的新问题多。不过我们下次在讨论这个问题。
响应式设计中已经体现了一部分宏观的排版问题（字号，行高，列宽）。事实上，在很多方面响应式设计已经包含了响应式排版。我们之所以专注于网站上第一篇文章是因为我们使用了阶梯字体（Graded Fonts）。我想在下次我们在深入的去了解下响应式宏观排版在屏幕上的表现。
选择字体
合适的风格
你经常要去决定应该使用什么字体。而选择字体，其是就是在选择风格，每种字体都有其自身的特质和要求，对于字体的选择还有一些视觉和技术的考虑，由于网络字体的诞生，现在我们有了更多的选择，这让选择一个合适的字体不再困难。
对于我们自己的网站，我们自己设计了一个字体，用来实现阶梯式字体。为了符合风格，我们选择了衬线字体，并且可以体现出我们在内容的改进（至少我是这个认为的）。而对于 iA Writer 说，我们选择了一种等宽字体。因为我们的目标是帮助你尽快创作出第一份草稿，因此我们特意挑选了 Nitti 作为主要字体，Nitti 看上去会比较强劲有力，同时也小心谨慎的字体。同时也是考虑到第一代 iPad 系统中并没有自带等比例的字距微调（auto-kern），因此，相对于比例字体，我们认为等宽字体的表现要好很多。
衬线还是无衬线？
通常我们自选择字体的时候更多的是选择纠结于衬线还是无衬线。问题本身比较复杂，不过我们有一条简单的法则可以帮到你：带有衬线的字体呢，就像是一个牧师，而无衬线字体呢，更像是一个黑客。你不能说牧师比黑客好，反过来也不成立，但是，还是有一些原因来决定我们该选择谁。衬线字体更像是一种权威的象征，而无衬线字体则显得更加民主。要知道，五千年的印刷史都隐藏在这两行文字中，所以不要不把它当回事。
很多人认为在屏幕上，选择衬线还是无衬线答案已经很明显了。不过事实上并没有那么简单。抛弃那些公认的理念，如果你在屏幕上选择 12号 以上的字号，衬线字体同样可以像无衬线字体那样表现出众。而一旦小于 12号 衬线字体就会显得不够清晰了，但是（请注意第二点），在目前的显示器中，小于 12号 字体无论如何都会显得很小，难以阅读。【*所以 Chrome 默认设置的最小字体为 12，而 iOS 的交互守则中则提到，最小的字体应不小于 11】
字体大小？
正文字体的大小不能取决于你的个人喜好，他应当取决于阅读距离【*眼睛距离屏幕的距离】。随着电子设备不断的取代传统书籍，公制的（metric size）桌面字体的在大小上会比打印字体稍大一些。
下图将会向你展示当正文文本变远的情况，从而解释为何桌面字体需要更大。图中黑色和红色的 A 拥有相同的公制大小。由于右侧的文本距离较远，所以在视觉上红色的 A 和左侧黑色的 A 拥有同样的大小：
没有网页设计经验的平面设计师可能会为这么大的差距感到吃惊。提醒一下，如果你仔细观察，并且考虑到透视问题，其是是没有差距的。
自 2006 年开始，我们就在不断的推动这种“透视比例”的字体大小。最初，我们以 16px 的 Georgia 的为基准字体的时候，遭到了大量的嘲笑和不满，而现在这多多少少也快成了一个标准。随着高分辨率的到来，这一标准也在慢慢的过时，也许会更快。
行高和对比度
当正文文本使用透视比例调整以后，接下来就需要对行高进行一些调整了。由于更远的阅读距离和（我们称之为）像素污点（pixel smear），因此给屏幕文本设置比打印文本更高的行距是明智之举。140% 是一个很好的基准，当然这还要取决于你正在使用的字体。
iPhone vs iPad
我们一开始制作响应式排版是因为我们需要为我们的应用程序寻找一个最合适的排版方式。当我们设计 iA Writer 时，我们投入了数周来寻找罪和是的排版定义。而高分辨率的 iPad 的诞生则带来了更大的挑战，我们花了很长时间在了解其中的工作原理。而在苹果推出了 Retina 显示器的 iPhone 和 iPad 的时候，这一切再次被改变。我可以写一本来向各位介绍 iA Writer 标志性的字体，但我们还是先说一些更普遍的问题，因此我将会抄捷径来说明这些问题。
如果你那最新的 iPhone 版的 iA Writer 和 iPad 版对比，你会发现他们的字体大小并不相同。
- 没错，是因为阅读距离的不同。通常你的 iPad 距离眼睛会比较远一点，无论是在餐桌上还是膝盖上，或者坐在沙发，躺在床上正对着 iPad，这些阅读距离都是全新的挑战。因为和台式机以及笔记本电脑的不同，iPad 的阅读距离总在不停的变化。为了适配所有的情况，我们通过最远的阅读距离来定义字体大小。当然躺在床上的时候，你可能会觉得字体有点大，但这不会让你觉着不舒服，而且通常情况下，当你躺下的时候，你不会把 iPad 放在肚子上去写作吧。
- 还有就是 iPhone 的屏幕更小，因此你必须做出一些微调。
好在即使做出这样的调整，由于 iPhone 的阅读距离较近，因此表现也相当完美。其是从透视比例法则来看，iPad 和 iPhone 在视觉上拥有相同的字体大小。
那么，台式机呢？
有些人曾抱怨 iA Writer 的 Mac 上的字体太大。就像我们为 iPad 选择字体大小一样（以最远的阅读距离为基准），我们选择了比较大的字体。但是我们测试的机器是高分辨率的 24 英寸的 iMac，在其他设备上或多或少会有些视觉上的不同。
好吧，那为什么不让设备对分辨率进行自适应呢？这样不才是真正的响应式排版么？没错，而且我们正在做一些类似的工作。现在，在考虑这项调整的时候，你必须选择正确的视力权重（optical weight）以确保在不同的大小和环境中，文本的表现都可以像预期的那样，包括文本大小和字体的改变。这也是为什么 iA Writer 的 Mac、iPad 1/2 以及 iPad 3 拥有不同阶梯的文本。为了解释阶梯式字体和我们制作新网站背后的想法，我需要更多的时间和空间，所以，尽情期待第二章！
目前为止
虽然没有设计媒体的按钮，这篇文章还是在被很多人在 Twitter 上转发，但却很少有是指价值的东西，多数都是围绕一个主体，那就是我想在以后才说的关于浮动布局和自适应布局的问题。当 Joshua Porter 吻我的时候我还觉得很惊讶呢：
为了以防万一，我还是全文贴出来吧。引述全文是“当你为屏幕所设计的时候，一切你之前的完美尺寸都会被打乱。交互设计是一项工程：它并不是要求寻找一种完美的设计方案，而是寻找最合适的设计方案。”通常我会说“网页设计是一项工程：它不是去发现美，而是寻找一种合适的方案。”为了避免明显的技术性，我使用了“交互设计”一词，而且案例中我是用的也是一个应用程序。
这句话的意思是说，平面设计上，你可以完全的控制图形的样式，但是在网页设计中，你要思考的是视觉设计和技术上的平衡（折中，妥协，compromise）。为了得出最佳的方案我们需要尽可能多的测试不同的解决方案，每种方案都有其各自的优势和劣势，我们根据各自的特点来筛选出最合适的方案。
在这点上，经常有一些平面设计师站出来说明他们的观点，认为网页设计和平面设计差不多，都是设计嘛。是的，你说的没错，都是设计。但是不同的设计要求有不同的技能和知识。就好比汽车工程师和网站工程师都是工程师，你能说他们都一样么？网页设计和杂志设计是不一样的，而且差距还不小。
总之，在设计网页和应用的时候，我们最常做的就是适当的妥协和以及寻找更好的解决方案。这肯定会让很多平面设计师不爽，因为他们惯于控制这些元素。更多关于两者的区别请看 Khoi Vihn 的文章：屏幕设计和平面设计的区别（2007）。
**作者：**Oliver Reichenstein
**翻译：**Max Cheung
原文链接：Responsive Typography: The Basics