响应式文字排版中的基础知识.pdfVIP

响应式文字排版中的基础知识 导读 ：响应式设计听过很多次了 ，本以为只是在 同分辨率下把显示的内容进行修改 ，没想 到文字的大小 ，色调 ，行高 ，对比都是要精心考虑的。 当我们建立网站的时候 ，我们一般从定义正文开始。正文的定义显示了你的主栏有多宽 ，其它几栏 的大小就随它自己内容定义了。直到最近 ，各种屏幕分辨率或多或少是同质化的。如今 ，我们要处 理各种屏幕尺寸和分辨率。这让处理变得更复杂。 在重整旗鼓的热情中 ，我写了一篇关于响应式排版的博客 ，这篇文章主要专注于我们最近的实验 ： 响应式字体。如果 知道IA 的历史 ，你可能会错过我们新启动的网站中的响应式排版和设计的一些 关键点。我决定从头做起 ，一步一步解释响应式排版 ，而 是整理所有文章。以下是第一步。 为了防止给每个可能的屏幕尺寸做 同的层级设计 ，很多网页设计师会采用响应式网站的概念。一 言以蔽之 ，这是一种网页布局会自动适应屏幕尺寸的概念。有很多种方法可以定义这种概念。我喜 欢用这种方法 适应性布局 ：按步骤调整布局适应有限数量的屏幕尺寸。流体性布局 ： 断地调整布局以适应每一 种可能的宽度。两种方式都有优势和劣势 ，我们相信布局适应于很少的合理变化位置是我们要采用 的方法 ，因为可读性比布局宽度随时和窗口一样宽来得重要。这是 是一个复杂的问题它本身就值 得商榷 ，但是最优的可读性需要在文字尺寸上一定数量的控制 （栏宽 ），就此看来 ，流体式布局会 产生更多问题。 提示 ：响应式设计已经包含了很多宏观排版问题 （文字大小、行高、栏宽 ）。于是响应式设计已然 在很多方面包含了响应式排版。在我们自己网站上第一次发表关于响应式字体的文章主要针对我们 使用的“阶段字体”。我想要在下一篇说说关于阶段的东西 ，现在要快速在屏幕上进入响应式宏观排 版的问题。 选择一种字体 正确的色调 迟早 ，你需要决定哪种字体是你想要用的。你选择一种字体主要是色调上的问题 ，但是 ，因为每一 款字体都有它自己的品质 ，都需要 （或禁止 ）一定的处理 ，字体的选择会产生很多视觉和技术上的 结果。网页字体有非常多种可以选择 ，所以选择一种适合的字体是另外一种考验。 我们通过为自己的网站设计字体来试验阶段性字体。我们选择了一种衬线字体因为它适合我们的 色调 ，同时映射出我们内容的提炼。我们为IA W RIT ER选择了一款等宽字体。因为我们程序的首要 目的是帮你得到第一手的草稿 ，我们尤其选择了nit t i字体 ，一款让你同时觉得很有力但是很细致的 字体。使用等宽字体的决定也是因为第一个ipad的系统 自动紧排比例字体。我们即刻决定使用等 宽字体 ，而 是使用比例字体以至渲染效果很差。 有衬线字体还是无衬线字体 通常的选择会在有衬线字体和无衬线字体之间。这本身是一个很复杂的问题,但是这里有一个简单的 经验法则可以帮你 ：有衬线字体是一个牧师 ，无衬线字体是一个黑客。没有一个比另外一个好 ， 但是 ，因为各种各样的原因 ，有衬线字体有更独裁的痕迹 ，而无衬线字体感觉更民主。记住 ，这是 被包裹在两条懒散的线里面的五千年的排版历史 ，，所以 ， 要太在意。 很多的人仍然认为在屏幕上的排版的问题 ，＂衬线或无衬线 ＂这个问题本身解答了它自己。事实上 ，没那么简单。有别于一般的理念 ，如果你选择大于12号的字体 ，有衬线和无衬线字体可以表现得 一样好。小于12号的有衬线字体渲染得 够锐利 ，但是 （同时 ，这点带领我们进入第二点 ）在现代 的显示器上 ，12号字体绝对太小了。 什么尺寸 ？ 你的正文字体 是取决于你自己的个人喜好 ，它取决于阅读距离。因为一般的屏幕离人会比书本远 一点 ，台式机字体的大小要比印刷的大一些。 下面的图案显示了 ，当你的正文字体离你的身体越远 ，需要的字体更大。两个黑色的和两个红色的A 有一样的度量尺寸。但是因为右边的一副被拿在更远的位子 ，感受到的尺寸会更小。右边红色的A 和左边黑色的A在感受上一样的尺寸 ： 字体离得越远 ，视觉上会显得越小。你需要将字体设置得更大一些 ，当字体阅读的距离更远的时候 。选择多大的字体是一个科学性的问题。如果你没有什么经验 ，有用的一个窍门是 ，将一本印刷很 好的书放在合适的阅读距离 ，然后比照屏幕字体大小。 平面设计师没有网页设计经验的时候 ，把网页正文字体和印刷字体相比的时候 ，会惊讶于网页正文 字体有多么大。提醒下你 ，只有你在一排一排地作比较的时候会觉得字体很大 ，然而通过透视观察 就 会这样觉得了。 如果在增加了正文字体大小之后 ，新的字体在一开始刺激了你 ， 要担心这很正常。然而 ，当你习 惯了它