字體知識(shí),聊聊移動(dòng)端的字體準(zhǔn)則!
當(dāng)視線掠過一行文字時(shí),它是跳躍前進(jìn)的,我們稱之為掃視。你讀的不是字母,甚至不是詞語,而是文字某部分的影像,大腦會(huì)補(bǔ)上它預(yù)期的內(nèi)容。如果超出大腦預(yù)料,它會(huì)促使眼睛回去核實(shí)假設(shè)十分正確。通過在字里行間創(chuàng)造平順的視覺流動(dòng),好的字體極度減輕了眼睛的負(fù)擔(dān)。
對(duì)任何字體工作者而言,在移動(dòng)設(shè)備上要面臨與生俱來的挑戰(zhàn):空間有限,環(huán)境光通常比較微弱。不過將已經(jīng)用于web端的技巧稍加調(diào)整,我們就可以提升移動(dòng)設(shè)備的易讀性。
一、留足空間
與普遍觀點(diǎn)恰好相反,字體并非屏幕上彎彎曲曲的線條排列;它主要在于周圍和相互間的空間。
字母本身對(duì)字體的影響,與構(gòu)成它的空間相比,要小得多。
要理解這一點(diǎn),了解字體從何而來很有幫助:字母o(還有b、c、p等等)中間的圓孔被稱作“凹槽”。在最原始的印刷機(jī)上,鉛字由金屬雕刻而成,這些凹槽來自雕刻成型、排列在盤中的金屬活字。第一個(gè)字體設(shè)計(jì)師所處理的模具,實(shí)際上并不能用于印刷。字母本身對(duì)字體的影響,與構(gòu)成它的空間相比,要小得多。
談到層次時(shí),我們通常指的是h1到p,有時(shí)候還會(huì)到h6。但另外還有一種層次在影響著行或段落的視覺流,這是特殊的層次:字母間距小于字間距,字間距小于行間距,以此類推。
要在移動(dòng)端創(chuàng)造最佳易讀性,尤其要注意這些特殊層次,這些格式塔式的詞語、行、段落的文字組合,在自然光環(huán)境下同樣至關(guān)重要。
二、行寬
行寬是一行文字的長(zhǎng)度;蛘叽_切的說,是一行文字的理想長(zhǎng)度,因?yàn)楹茈y讓每一行都精確吻合。
眾所周知,舒適閱讀的理想行寬是65個(gè)字符左右。行寬產(chǎn)生的物理長(zhǎng)度,取決于字體的設(shè)計(jì)、字間距(見下文)和你使用的具體文字。本文開篇的65個(gè)字符(譯者注:此處請(qǐng)參見英文原文),用PT Serif字體是26.875em寬,用Open Sans是28.4375em寬,用Ubuntu字體是27.3125em寬。如果再加入斜體、大小寫和一大堆其他字體細(xì)節(jié),還會(huì)有更大的差異。
在桌面端瀏覽器中,65個(gè)字符很難觸及邊緣,但在移動(dòng)設(shè)備上,65個(gè)字符(如果至少大到看得清)會(huì)超出瀏覽器的邊界。所以,在移動(dòng)設(shè)備上,你必須得縮減行寬。
移動(dòng)端并沒有普遍認(rèn)可的行寬標(biāo)準(zhǔn)。不過傳統(tǒng)上,報(bào)紙或雜志上每一個(gè)窄列都會(huì)趨向于39個(gè)字符。鑒于這個(gè)理想行寬已經(jīng)經(jīng)歷了數(shù)個(gè)世紀(jì)的考驗(yàn),它在移動(dòng)端字體上也運(yùn)轉(zhuǎn)良好。
三、寬松行距、緊湊行距
行距是行之間的空間,行距太緊湊,會(huì)讓視線難以從行尾掃視到下一行首。行距太寬松,字間距會(huì)開始形成隊(duì)列,產(chǎn)生了我們通常意義上的河流,阻斷了行的視覺流。
從左至右:理想行距、太緊湊、太寬松。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps知識(shí)
- ps基礎(chǔ)教程
- ps技巧
- 十萬個(gè)為什麼
- 理論教程
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- Photoshop初級(jí)教程-命令的技巧
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法