1. 高雄前端社群#9
前端圖形再進化！
WIFI：NSYSU-Guest
密碼：12345678

2. Welcome

3. • 前端工程師/5y
• 熱愛HTML & CSS
• 2013年創辦高雄前端
廖洧杰

4. 圖文排版最佳化 (vertical_rhythm)

5. 該如何排出友善的圖文排版？

6. 使用垂直韻律(Vertical Rhythm)

7. 不符合固定比例的間距難以閱讀
http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

8. 所以在網頁排版上也要有這個觀念
http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

9. 除文字外，所有元素也可依照此規則

10. 那麼該如何用CSS來實踐垂直韻律？

11. 首先必須先瞭解行距(Line-height)

12. 文字高度來自『行距』，非文字大小
• http://codepen.io/liao/pen/EmIat
http://www.pearsonified.com/2011/12/golden-ratio-typography.php

13. 先確認你網頁的行距(24px)，確認
好等同於在網頁上畫上行線
24px
24px
24px

14. 段落設定行距24px，文字大小16px，
文字就會垂直置中於行距
4px
4px
16px

15. 有些網站服務也可以看其效果
• http://drewish.com/tools/vertical-rhythm/

16. 當標題文字大於24px以上時，行距可
設定為兩行
44px24px+24px=48p
x

17. 使用文繞圖時，圖片寬高也需整除
高度= 24px(行距) * 4 = 96px
寬度= 16px(字距) * 10 =160px
44px

18. 要不規則也是ok的，只要確保
有遵守垂直韻律即可
http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

19. 純CSS設計方式
• http://codepen.io/liao/pen/pHyhg
Sass+Compass設計方式
• http://codepen.io/liao/pen/DouJz/

20. 問題

21. • A. 行距 (line-height)
• B. 狀態 (:hover、:active)
• C. 背景圖案 (background)
• D.字型大小 (font-size)
1.如果要使用垂直韻律，在文字上
哪些是一定要設定的？(複選)

22. 2.如果網頁行距設定24px，在設計文
繞圖時，哪張圖片較麻煩？(寬*高)

23. 3.如果網頁行距設定24px，當文字大
小為38px的時候，需要幾行空間？

24. 總結

25. 總結
• 設計網頁時，先構想好基本行距要設定多少，
常見預設行距為24px。
24px

26. 總結
• 並不是說所有元素都必須統一使用垂直韻律，
你可以只侷限部分元素使用。例如：文章內
容區塊。

27. • 如果行距為24px，使用到垂直韻律的區塊，
元素記得要以24px的倍數來設計。
高度= 24px(行距) * 4 = 96px
寬度= 16px(字距) * 10 =160px
總結