设计理论:网页设计中的垂直韵律(3)

不同字体大小的正文

如果有一天，老板告诉你，正文的字体太小啦，他看得眼花。你因此不得不将左边的正文设置成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的倍数。