响应式排版快速指南.pdf

响应式排版快速指南 原⽂出处：http://www .uisdc .com/responsive-typography-quick-tutorial @励定洲 ：⽆论是对于印刷、⽹站或是电视⼴告来说，排版都是我们 来沟通信息的 主要⽅式。排版之重要性我想已⽆须赘述。然⽽，“理解”和“实践”还是相差⼗万⼋千 ⾥的，特别是在⽹页设计中，“⼀个字号⾛天下”的想法可以歇歇了。我们或许都听说 过响应式⽹站，但我想你们中可能很少有⼈知道什么是响应式排版吧。 下⾯我会给你们展⽰响应式排版的重要性，以及如何简单地实践它。 排版不是件⼩事 配置你的内容 垂直排版的韵律感 等⽐缩⼩ 移动设备上的垂直排版韵律 设置全新的韵律 总结 此⽂对这篇 《经验分享：响应式排版中的基础知识》 做了⼿把⼿的实例补充，建议 ⼀起看。 排版不是件⼩事 排版是设计中⾮常基础但又⽆⽐重要的⼀环，这点我想⼤家都认同。在⽹页设计中， 排版早些年的⽇⼦⽐较苦逼，或者说其很难得到与之重要性相匹配的待遇——和很多 其它的设计元素⼀样，那时我们并不具备在⽹页中完整表现它们的技术。但幸运的 是，我们⾛过来了。 排版能帮助我们沟通信息，这可不是⼀件⼩事。优秀的排版能有助于沟通的过程明 晰、⾼效。可读性是所有设计都需要⾯对的⼤课题。那么现在，我们就来亲⼿实践 下。 配置你的内容 下⾯你可以看到⼀张只显⽰⽂字的图⽚。这是我从维基百科上随意复制黏贴过来的⼀ 段⽂字，然后把它放到H ML⽂档⾥显⽰出来。 这看起来很简陋，⽽且难以阅读。上⾯的这张截图显⽰的是浏览器默认的16px imes New Roman字体。既然这样，我们就先试试看把它升级到18px的P Serif字体 （Google 出品）。 然后我们需要对每⼀⾏的字符数量做下调整。在桌⾯端，每⼀⾏的字符量应该在60到 75之间。于是我把整个⽂本的宽度调整到580px 。你⾃⼰对⽐看看上下两张图就知道 孰优孰劣了。不过别掉以轻⼼，⼀切才刚刚开始。 垂直排版的韵律感 在我们当前的设计中，可以看到其垂直⽅向的韵律依然还是浏览器默认的状态，⽽不 同浏览器上的显⽰是不同的。这可不⾏，我们需要搞清楚到底什么才是合适的⾏⾼、 边距以及字号。在之前提到过我把默认的⽂本⼤⼩改成了18px ，那么对于我来说，它 就是1em 。 我想⼤家作为20 15年的⽹页设计师应该都明⽩em是什么东西吧，有⼀堆⼯具可以帮助 你来进⾏此类换算。Pascal Cauhepe的Vertical Rhythm ool是我最喜欢的⼯具之⼀，另 外再推荐个 uomas Jomppanen 和Ville Vanninen开发的Gridlover ，也很好 ~ 在我的设计中，⽂章段落的字号和⾏⾼分别是18px/ 1.77 （也就是32px ）。我参照黄⾦ ⽐例来调整标题的字号，也就是说H 1现在是3ems （54px ）。下⾯是我定义的不同字号 节点，所有这些都会被应 在同样32px⾏⾼的基线栅格⾥： 字体⼤⼩ P 18px (1em) H 1 54px (3em) H2 45px (2.5em) H3 36px (2em) H4 32px (1.75em) H5 27px (1.5em) H6 18px (1em) 简单吧？很容易就可以搞明⽩怎么整这纵向的栅格了。然后下⼀步就可以考虑⽔平⽅ 向的栅格如何定义。 等⽐缩⼩ 很多时候我们在纵向排版的韵律确定后就会迫不及待地去折腾颜⾊、栅格甚⾄布局。 搞清楚栅格系统⾥的节点确实重要，但是你不能因此⽆视响应式排版，根据屏幕尺⼨ 调整垂直排版的韵律感同样需要琢磨。在移动设备上使 与桌⾯端⼀模⼀样的字号和 字距就和使 同⼀套栅格⼀样荒谬。⽆线端和桌⾯端的区别极⼤，其上的阅读体验也 ⼤不相同。 iA在20 12年时写的⼀篇“Responsive ypography: the Basics” 中提到了使 ⼿机和电脑进 ⾏阅读时眼睛与设备之间的距离是不同的，⽽这正是对阅读体验造成影响的本因。从 下⾯这张图⽚可以看到，在移动设备上，18px的字号显然太⼤了些。它就像把所有东 西⼀下放⼤的同时却没有提供有助于阅读体