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

响应式排版中的基础知识 原⽂出处：http://www .uisdc .com/responsive-typography-the-basics 选择⼀种字体 有衬线字体还是⽆衬线字体 什么尺⼨？ ⾏⾼和对⽐ iPhone vs iPad 那台式机 何？ 到⽬前位置的反应 Arrietty ：当我们建⽴⽹站的时候，我们⼀般从定义正⽂开始。正⽂的定义显⽰了你的 主栏有多宽，其它⼏栏的⼤⼩就随它⾃⼰内容定义了。直到最近，各种屏幕分辨率或 多或少是同质化的。 今，我们要处理各种屏幕尺⼨和分辨率。这让处理变得更复 杂。 在重整旗⿎的热情中，我写了⼀篇关于响应式排版的博客，这篇⽂章主要专注于我们 最近的实验：响应式字体。 果不知道IA的历史，你可能会错过我们新启动的⽹站中 的响应式排版和设计的⼀些关键点。我决定从头做起，⼀步⼀步解释响应式排版，⽽ 不是整理所有⽂章。以下是第⼀步。 为了防⽌给每个可能的屏幕尺⼨做不同的层级设计，很多⽹页设计师会采⽤响应式⽹ 站的概念。⼀⾔以蔽之，这是⼀种⽹页布局会⾃动适应屏幕尺⼨的概念。有很多种⽅ 法可以定义这种概念。我喜欢⽤这种⽅法： 适应性布局：按步骤调整布局适应有限数量的屏幕尺⼨。流体性布局：不断地调整布 局以适应每⼀种可能的宽度。两种⽅式都有优势和劣势，我们相信布局适应于很少的 合理变化位置是我们要采⽤的⽅法，因为可读性⽐布局宽度随时和窗⼜⼀样宽来得重 要。这是不是⼀个复杂的问题它本⾝就值得商榷，但是最优的可读性需要在⽂字尺⼨ 上⼀定数量的控制 （栏宽），就此看来，流体式布局会产⽣更多问题。 提⽰：响应式设计已经包含了很多宏观排版问题 （⽂字⼤⼩、⾏⾼、栏宽）。于是响 应式设计已然在很多⽅⾯包含了响应式排版。在我们⾃⼰⽹站上第⼀次发表关于响应 式字体的⽂章主要针对我们使⽤的”阶段字体” 。我想要在下⼀篇说说关于阶段的东 西，现在要快速在屏幕上进⼊响应式宏观排版的问题。 选择⼀种字体 迟早，你需要决定哪种字体是你想要⽤的。你选择⼀种字体主要是⾊调上的问题，但 是，因为每⼀款字体都有它⾃⼰的品质，都需要 （或禁⽌）⼀定的处理，字体的选择 会产⽣很多视觉和技术上的结果。⽹页字体有⾮常多种可以选择，所以选择⼀种适合 的字体是另外⼀种考验。 我们通过为⾃⼰的⽹站设计字体来试验阶段性字体。我们选择了⼀种衬线字体因为它 适合我们的⾊调，同时映射出我们内容的提炼。我们为IA WRIT R选择了⼀款等宽字 体。因为我们程序的⾸要⽬的是帮你得到第⼀⼿的草稿，我们尤其选择了nitti字体， ⼀款让你同时觉得很有⼒但是很细致的字体。使⽤等宽字体的决定也是因为第⼀个 ipad的系统不⾃动紧排⽐例字体。我们即刻决定使⽤等宽字体，⽽不是使⽤⽐例字体 以⾄渲染效果很差。 有衬线字体还是⽆衬线字体 通常的选择会在有衬线字体和⽆衬线字体之间。这本⾝是⼀个很复杂的问题,但是这⾥ 有⼀个简单的经验法则可以帮你：有衬线字体是⼀个牧师，⽆衬线字体是⼀个⿊客。 没有⼀个⽐另外⼀个好，但是，因为各种各样的原因，有衬线字体有更独裁的痕迹， ⽽⽆衬线字体感觉更民主。记住，这是被包裹在两条懒散的线⾥⾯的五千年的排版历 史，，所以，不要太在意。 很多的⼈仍然认为在屏幕上的排版的问题，＂衬线或⽆衬线＂这个问题本⾝解答了它 ⾃⼰。事实上，没那么简单。有别于⼀般的理念， 果你选择⼤于12号的字体，有衬 线和⽆衬线字体可以表现得⼀样好。⼩于12号的有衬线字体渲染得不够锐利，但是 （同时，这点带领我们进⼊第⼆点）在现代的显⽰器上，12号字体绝对太⼩了。 什么尺⼨？ 你的正⽂字体不是取决于你⾃⼰的个⼈喜好，它取决于阅读距离。因为⼀般的屏幕离 ⼈会⽐书本远⼀点，台式机字体的⼤⼩要⽐印刷的⼤⼀些。 下⾯的图案显⽰了，当你的正⽂字体离你的⾝体越远，需要的字体更⼤。两个⿊⾊的 和两个红⾊的A有⼀样的度量尺⼨。但是因为右边的⼀副被拿在更远的位⼦，感受到 的尺⼨会更⼩。右边红⾊的A和左边⿊⾊的A在感受上⼀样的尺⼨： 字体离得越远，视觉上会显得越⼩。你需要将字体设置得更⼤⼀些，当字体阅读的距 离更远的时候。选择多⼤的字体是⼀个科学性的问题。 果你没有什么经验，有⽤的 ⼀个窍门是，将⼀本印刷很好的书放在合适的阅读距离，然后⽐照屏幕字体⼤⼩。 平⾯设计师没有⽹页设计经验的时候，把⽹页正⽂字体和印刷字体相⽐的时候，会惊 讶于⽹页正⽂字体有多么⼤。提醒下你，只有你在