vertical rhythm
DESCRIPTION
TRANSCRIPT
![Page 1: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/1.jpg)
高雄前端社群#9
前端圖形再進化!
WIFI:NSYSU-Guest
密碼:12345678
![Page 2: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/2.jpg)
Welcome
![Page 3: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/3.jpg)
• 前端工程師/5y
• 熱愛HTML & CSS
• 2013年創辦高雄前端
廖洧杰
![Page 4: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/4.jpg)
圖文排版最佳化 (vertical_rhythm)
![Page 5: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/5.jpg)
該如何排出友善的圖文排版?
![Page 6: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/6.jpg)
使用垂直韻律(Vertical Rhythm)
![Page 7: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/7.jpg)
不符合固定比例的間距難以閱讀
http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
![Page 8: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/8.jpg)
所以在網頁排版上也要有這個觀念
http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
![Page 9: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/9.jpg)
除文字外,所有元素也可依照此規則
![Page 10: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/10.jpg)
那麼該如何用CSS來實踐垂直韻律?
![Page 11: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/11.jpg)
首先必須先瞭解行距(Line-height)
![Page 12: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/12.jpg)
文字高度來自『行距』,非文字大小 • http://codepen.io/liao/pen/EmIat
http://www.pearsonified.com/2011/12/golden-ratio-typography.php
![Page 13: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/13.jpg)
先確認你網頁的行距(24px),確認好等同於在網頁上畫上行線
24px
24px
24px
![Page 14: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/14.jpg)
段落設定行距24px,文字大小16px, 文字就會垂直置中於行距
4px
4px
16px
![Page 15: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/15.jpg)
有些網站服務也可以看其效果 • http://drewish.com/tools/vertical-rhythm/
![Page 16: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/16.jpg)
當標題文字大於24px以上時,行距可設定為兩行
44px 24px+24px=48px
![Page 17: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/17.jpg)
使用文繞圖時,圖片寬高也需整除 高度= 24px(行距) * 4 = 96px 寬度= 16px(字距) * 10 =160px
44px
![Page 18: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/18.jpg)
要不規則也是ok的,只要確保 有遵守垂直韻律即可
http://www.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
![Page 19: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/19.jpg)
純CSS設計方式 • http://codepen.io/liao/pen/pHyhg
Sass+Compass設計方式 • http://codepen.io/liao/pen/DouJz/
![Page 20: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/20.jpg)
問題
![Page 21: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/21.jpg)
• A. 行距 (line-height)
• B. 狀態 (:hover、:active)
• C. 背景圖案 (background)
• D.字型大小 (font-size)
1.如果要使用垂直韻律,在文字上哪些是一定要設定的?(複選)
![Page 22: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/22.jpg)
2.如果網頁行距設定24px,在設計文繞圖時,哪張圖片較麻煩?(寬*高)
![Page 23: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/23.jpg)
3.如果網頁行距設定24px,當文字大小為38px的時候,需要幾行空間?
![Page 24: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/24.jpg)
總結
![Page 25: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/25.jpg)
總結 • 設計網頁時,先構想好基本行距要設定多少,常見預設行距為24px。
24px
![Page 26: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/26.jpg)
總結 • 並不是說所有元素都必須統一使用垂直韻律,你可以只侷限部分元素使用。例如:文章內容區塊。
![Page 27: Vertical rhythm](https://reader034.vdocuments.site/reader034/viewer/2022050816/54b755f84a79596e388b48fb/html5/thumbnails/27.jpg)
• 如果行距為24px,使用到垂直韻律的區塊,元素記得要以24px的倍數來設計。
高度= 24px(行距) * 4 = 96px 寬度= 16px(字距) * 10 =160px
總結