Upload
-
View
1.287
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
高雄前端社群#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
總結