不同字体大小的正文
如果有一天,老板告诉你,正文的字体太小啦,他看得眼花。你因此不得不将左边的正文设置成14px大小的字体,右边的边注保持12px。由于正文字体变大,我们也同时加大行距。根据我们前面学到的知识,我重新设计了间距:
- 正文:字体大小14px,行距24px,段后距24px
- h1:字体大小24px,行距24px,段前距24px,段后距24px
- h2:字体大小:18px,行距24px,段前距12px,段后距12px
- 边注正文:字体大小12px,行距24px,段后距24px
- 边注边框:边框粗1px,内补白11px——别忘了还要把它上移12px
效果见:
(demo-6.html)
完工
OK,最后,我们来做个使用前使用后的对比,来张合照吧:
使用前:
使用后:
附录 基本垂直韵律对行距、间距的要求的推导
根据之前的经验,不难得出:
设行距为 dl px ,设垂直方向上的间距和为 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假设基础行距为k px,则 n*k = dl + ∑ds (n为自然数) 即行距和间距之和应当是18的倍数 ② 由方程①、② 得出: 行距和全部垂直间距之和为18的倍数。
本文链接:http://www.blueidea.com/design/doc/2009/6566.asp
出处:Taobao.com UED Team
责任编辑:bluehearts
上一页 垂直栅格与渐进式行距(上) [2] 下一页
|