Vertical rhythm

高雄前端社群#9

前端圖形再進化！

WIFI：NSYSU-Guest

密碼：12345678

Welcome

• 前端工程師/5y

• 熱愛HTML & CSS

• 2013年創辦高雄前端

廖洧杰

圖文排版最佳化 (vertical_rhythm)

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

使用垂直韻律(Vertical Rhythm)

不符合固定比例的間距難以閱讀

http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

所以在網頁排版上也要有這個觀念

http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

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

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

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

文字高度來自『行距』，非文字大小 • http://codepen.io/liao/pen/EmIat

http://www.pearsonified.com/2011/12/golden-ratio-typography.php

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

24px

24px

24px

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

4px

4px

16px

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

當標題文字大於24px以上時，行距可設定為兩行

44px 24px+24px=48px

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

44px

要不規則也是ok的，只要確保 有遵守垂直韻律即可

http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

純CSS設計方式 • http://codepen.io/liao/pen/pHyhg

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

問題

• A. 行距 (line-height)

• B. 狀態 (:hover、:active)

• C. 背景圖案 (background)

• D.字型大小 (font-size)

1.如果要使用垂直韻律，在文字上哪些是一定要設定的？(複選)

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

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

總結

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

24px

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

• 如果行距為24px，使用到垂直韻律的區塊，元素記得要以24px的倍數來設計。

高度= 24px(行距) * 4 = 96px 寬度= 16px(字距) * 10 =160px

總結