當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

字體知識,聊聊移動端的字體準(zhǔn)則!(2)

來源:colachan 作者:十萬個為什麼 學(xué)習(xí):2738人次

行距的標(biāo)準(zhǔn)通常是1.4em,但以我的經(jīng)驗,這對于屏幕來說太緊湊了:在屏幕上表現(xiàn)良好的字體都有一個關(guān)鍵特征——大的凹槽,大凹槽需要更大一些的行距來保持空間層次。

反過來,更短的行寬需要更小的行距。所以你可能需要將桌面端的行距設(shè)得寬松點,同時記得將移動端的設(shè)置得緊湊些。

四、找到最佳狀態(tài)

所有字體至少都有一種最佳狀態(tài),在屏幕上展現(xiàn)最佳的尺寸,還有在瀏覽器中最能保持字形的抗鋸齒選項。

最佳狀態(tài)下,多數(shù)筆畫通常都能排列在像素網(wǎng)格中——像素字體,如果你還記得的話,那些字體僅僅在字號調(diào)整到最佳狀態(tài)下才有效。

將字體設(shè)為最佳狀態(tài)能形成更強(qiáng)烈的對比。為移動端設(shè)計時,對比尤其重要,因為戶外的強(qiáng)光可能分散注意。

你會發(fā)現(xiàn),微調(diào)行距會使每行脫離完美像素匹配。我覺得,在移動設(shè)備屏幕上,對比的重要性勝過行距。所以如果你不得不在行距上妥協(xié),來保持每行契合像素網(wǎng)格,那就這么做吧。

通常設(shè)計師通過基線網(wǎng)格來排列文字。但在移動設(shè)備上,我們需要使用x高度來代替(x高度顧名思義,就是小寫字母x的高度)。從易讀性研究中,我們知道大腦識別的是文字頂部,而不是底部。所以要成就更加平順的視覺流,我們要確保字符頂部最契合像素網(wǎng)格。

五、不要忽視起伏邊

起伏邊是一段文字的邊緣。你讀的多數(shù)內(nèi)容是居左對齊的(至少對于拉丁語系而言),導(dǎo)致右邊沿參差不齊。

當(dāng)視線從行尾跳至下一行首時,大腦最好要能判斷出下一次跳躍的角度和距離。把每次跳躍都想象成跑過跳板,如果間距保持一致,就會快很多。因此,文字左側(cè)邊緣應(yīng)該是平的,每行從同一個地方開始(對于從右至左的語言,恰好相反)。

因此你絕不應(yīng)該將兩三行以上的文字居中對齊。

通常文字會設(shè)置成兩端對齊,這意味著每行文字所占空間相等,所以兩側(cè)都不會有起伏邊。我懷疑兩端對齊的流行和響應(yīng)式設(shè)計有關(guān),它教設(shè)計師們以塊狀形態(tài)思考。兩端對齊的文字產(chǎn)生的留白不統(tǒng)一。最糟的情況會導(dǎo)致一行中只有幾個字,相當(dāng)不協(xié)調(diào)。更窄的行寬會加重兩端對齊的問題,所以兩端對齊的文字在移動端是難以閱讀的。

字體知識,聊聊移動端的字體準(zhǔn)則!

從左至右:左對齊、居中對其、兩端對齊。

如果整潔真的非常重要,那么使用連字符號來讓起伏邊更平滑,絕不能在移動端使用兩端對齊。

文字右側(cè)是起伏邊在移動端還有一項額外好處:人們通常在易分心的場合閱讀文字,讀者視線頻繁地從文字上移開——查看站名,或是接電話。起伏邊創(chuàng)造了一個隨機(jī)形狀,讓右撇子的視線可以通過重讀最少的文字,回到剛才的位置。

六、減少反差

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!