無論你是做網頁還是App設計,文字內容總是能占到整個版面將近80%的區域。因此理解字體與排版對UI設計師來說十分關鍵。你必須一直把內容的可讀性放到首位去考量和取舍你對字體與排版的選擇。
字體的基礎術語
了解字體設計的基礎詞匯比較重要,這些名詞在介紹字體設計的相關文章中常常發生。比如x-(X字高)指的是從字母的基準線起初往上到最矮字母的邊沿的距離,當X字高的比重相對大一些的話能夠降低易讀性。
襯線字與非襯線字
在西*家的字母制度,分成兩大字族:serif(襯線字體)及sansserif(無襯線字體)。襯線字(右圖中的宋體、TimesNewRoman)是指在字的筆畫開始及結束的地方有額外的裝飾,而且筆畫的長短會因直橫的不同而有所不同。相反的,無襯線字(右圖中的思源黑體、)就沒有很多額外裝飾,而且筆畫長短大致上是差不多。
襯線字的圖標較易識別,也因而具備較高的易讀性。反之無襯線字則較醒目。通常來說,需要指出、突出的小篇幅文字通常使用無襯線字,而在短篇正文中,為了閱讀的方便,一般使用襯線字。在實際應用中,因為英文的粗體和西文的襯線體,中文的粗體和西文的無襯線體,在樣式和應用情景上相同,所以一般搭配使用。
字體排版建議
在你對字體排版技巧了如指掌之前,首先必須確保你的內容無法簡潔且清晰地呈現出來。優秀的文字與排版使我們更愿意去閱讀,所以最好先關注你所設定的圖標和排版是否方便閱讀,然后再考量為了簡潔改進行修飾。我們可以參考這篇中文指南:[優秀字體排版的5條原則](inten)以及將文中的這種方法應用到我們的App和Web設計中去。
iOS中的系統字體
隨著iOS9系統及其EI系統的發布,現在的平臺字體變為了Apple自己設計的[San]。iOS仍然在其它地方使用**SFUI**,而在AppleWatch中使用**SF**
San有兩類尺寸:***文本模式(SFUIText)***和***展示方式(SFUI)***。文本方式適用于大于20的厚度,展示方式則適用于高于20的尺寸。當你在你的app中使用San時,iOS會自動在適度的契機在文本方式和展現模式中切換。
注:如果你使用例如或的軟件來進行設計,那么當你設置的字體大于等于20的之后,你必須切換到展示方式。iOS會按照字體大小為San自動調整字間距。
選擇Body字體
為bodytext挑選適合的字體是最重要的。務必選用這些可讀性強的,看起來干凈易讀的字體。我推薦的常見中文字體有:San,Neue,Next,OpenSans,MuseoSans。中文字體則有,華文細黑,思源黑體
字體的大小
在,iPad,中設定的Body字體不需要大于***11pt***,這樣就能被正常閱讀。我們推薦的Body文本大小必須在***15-18pt***。
字體的字重
當我們設定更大的字體來獲得更好的易讀性的同時,我們也應相應地減少字體的字重(粗細),考慮Light,Thin或者UltraThin。過重的字體會太過醒目,從而妨礙其他內容的顯示效果。
當字體大小為12-18pt時,使用,18-24pt時,使用Light,24-32pt,使用Thin,當字體大小達到32pt時,建議使用。以上都是建議值,你必須按照不同字體的顯示效果進行設置使文字內容看起來清晰和舒適什么字體適合做牌匾,從而維持良好閱讀體驗。
現代字體都有多種字重設置:,Light,Thin和
合理設定行高,讓文字也才能呼吸
行間距()需要修改為字體大小的120%到145%之間。
在后面的舉例中,行高設為了與字體高度相似的100%,而在上面的舉例中,我將它設為145%。它們的顯示療效有著十分顯著變化。當字數進一步提高時,你更會看到閱讀行距設置過小的大段文字會特別累。合理設定行高,也是一種留白的方法,能夠提高用戶的閱讀感受。
每行45-90個字
行長指單行文字的長度,如果一行中包括的字數太多,文本內容將會很難閱讀。英文字符通常在45-90字非常適宜,而英文35-60字為宜。合理的行長使用戶在行間跳轉時十分感到輕快和愉快,反之則會使閱讀作為一種負擔。
字體樣式
字體風格對易讀性和迅速瀏覽非常重要,一般的方法是,被修飾的文本不應達到整個文本的10%,如果所有文本都都借助修飾被提出的話,那顯然就不是指出了。當然,一次不需要同時使達到三種的指出樣式。換句其實,不要在同一段文本中同時使用,顏色,字體改變,大小,下劃線,斜體,粗體。
尋找合適的字體
大部分商用字體都很貴,但還有眾多優秀的字體是免費的。你只應該從中挑選你最偏愛的字體,并應用到你的設計中就可以了。下面就介紹幾個特別優秀的字體網站。
Fonts(需翻墻)
在Fonts,你可以免費下載你喜歡的圖標,并且根據你的應該在項目中使用。由于在iOS中使用其它字體的唯一途徑就是將字體文件導出到平臺中,因此Fonts的下載功能十分有用。Fonts包含少于1400種不同的字體什么字體適合做牌匾,其中包括最知名的:OpenSans和字體,他們是平臺使用的默認圖標。
你可以使用Mac上的來手動同步字體到你的桌面。
如果你必須在你的網站中直接使用WebFonts,你可以選擇360的代理來訪問的免費字體庫。下面是使用表明,非常簡單。
有相當多優秀的字體。這針對這些將要起步的人來說,非常有用。這其中就有我十分偏愛的Nova和Museo字體。它還將思源黑體等英文字體也收入其中了。
有字庫
針對在必須長期使用英文字體的客戶來說,有字庫是一個不錯的選擇。它是*迄今比較優秀的WebFont服務系統,包含了長期優秀的英文字體。
其他資源
字體和排版是一門值得深入探求的美術。每個字體的產生和演進過程都有著深遠的歷史可以追溯。當你設計的作品也能被當作藝術品時,那就是對你最大的顯然。
文字排版指南
這是一篇英語文字排版指南,但看到的內容和大個別意見對英文字體的選用和排版同樣具備意義。非常值得閱讀。
字體設計基礎:字由心生
漢字如何樣發展而來的?我們今天用到字體是借助什么字體演變過來的?現今字體又是延續了先人的這些字體基礎?……通過這篇文章,能夠對漢字的這種基礎知識有所認識。
哪種字體最合適快速閱讀
這篇文章具體介紹了中英文字體的配色建議,很有參考價值。
Typeis
是一個特別有名的關于字體的博客網頁,提供了大量圖標研究的文章,適合從入門者到資深設計師閱讀。同時它還提供了一個播客,名叫“字談字暢”