|
不同字體大小的正文
如果有一天，老板告訴你，正文的字體太小啦，他看得眼花。你因此不得不將左邊的正文設(shè)置成14px大小的字體，右邊的邊注保持12px。由于正文字體變大，我們也同時(shí)加大行距。根據(jù)我們前面學(xué)到的知識(shí)，我重新設(shè)計(jì)了間距：
- 正文：字體大小14px，行距24px，段后距24px
- h1：字體大小24px，行距24px，段前距24px，段后距24px
- h2：字體大�。�18px，行距24px，段前距12px，段后距12px
- 邊注正文：字體大小12px，行距24px，段后距24px
- 邊注邊框：邊框粗1px，內(nèi)補(bǔ)白11px——?jiǎng)e忘了還要把它上移12px
效果見(jiàn):
(demo-6.html)
完工
OK，最后，我們來(lái)做個(gè)使用前使用后的對(duì)比，來(lái)張合照吧：
使用前：
使用后：
附錄 基本垂直韻律對(duì)行距、間距的要求的推導(dǎo)
根據(jù)之前的經(jīng)驗(yàn),不難得出：
設(shè)行距為 dl px ,設(shè)垂直方向上的間距和為 ∑ds = dst (段前距) + dsb (段后距) (px) ①,假設(shè)基礎(chǔ)行距為k px,則
n*k = dl + ∑ds (n為自然數(shù)) 即行距和間距之和應(yīng)當(dāng)是18的倍數(shù) ②
由方程①、② 得出：
行距和全部垂直間距之和為18的倍數(shù)。
本文鏈接：http://www.95time.cn/design/doc/2009/6566.asp 
出處：Taobao.com UED Team
責(zé)任編輯：bluehearts
上一頁(yè) 垂直柵格與漸進(jìn)式行距(上) [2] 下一頁(yè)
|
第 1 頁(yè) 
第 3 頁(yè) 垂直柵格與漸進(jìn)式行距(上) [3]
