作為一個(gè)設(shè)計(jì)師的最重要技能之一就是你要學(xué)習(xí)如何去選擇排版。這是因?yàn)槲谋臼窃O(shè)計(jì)師與用戶溝通的主要方式之一。排版能成就你的設(shè)計(jì),也能毀滅你的設(shè)計(jì)。
一個(gè)美觀又復(fù)雜的排版。有些人將他們?nèi)康氖聵I(yè)奉獻(xiàn)在了排版上。值得慶幸的是,他們的工作是有據(jù)可查的,所以我們有大量的在線排版資源。
本文的目的是作為一個(gè)起點(diǎn)幫助你學(xué)習(xí)如何為你的設(shè)計(jì)選擇排版。它將激勵(lì)你探索超乎你所認(rèn)知的字體間的組合。
確定你的目標(biāo)
在你做任何事之前,你首先要確定你設(shè)計(jì)的目標(biāo)。你想要傳達(dá)的是什么信息?你的設(shè)計(jì)媒介是什么?
優(yōu)秀的設(shè)計(jì)使其排版與其目的具有一致性。這是因?yàn)榕虐媸窃O(shè)計(jì)中的情緒,音調(diào)和風(fēng)格的關(guān)鍵。
例如,如果你正在設(shè)計(jì)一張插圖豐富的賀卡,你需要選擇適合你插圖風(fēng)格的字體。與你設(shè)計(jì)的其余部分協(xié)調(diào)一致。
Choose a font that suits the style of your illustration
如果您正在設(shè)計(jì)一個(gè)圖像驅(qū)動(dòng)的登錄頁面,你需要選擇不會(huì)影響圖像的簡單字體。使用排版作為強(qiáng)調(diào)溝通信息意義的方式。
If images are the focus of your design, choose simple fonts so that the images stand out
確定你的受眾
明確你的設(shè)計(jì)目的后,確定你的受眾。這一步很重要,因?yàn)槟挲g和興趣愛好會(huì)影響你的字體選項(xiàng)。
闡明你的設(shè)計(jì)目的后,確定你的受眾。這一步驟至關(guān)重要,因?yàn)橛嘘P(guān)你的用戶信息(如年齡,興趣和文化成長)可能會(huì)影響你對排版做出的決定。
例如,一些字體更適合兒童使用。當(dāng)閱讀時(shí),兒童需要高度清晰并且較大的字體。Sassoon Primary是一個(gè)很好的例子。Sassoon小學(xué)由Rosemary Sassoon開發(fā),根據(jù)她的研究結(jié)果,發(fā)現(xiàn)了孩子們很容易閱讀哪些字母。
Sassoon Primary was developed Rosemary Sassoon
其他字體更適合老年人使用。高級友好的字體且使用可讀的尺寸,高對比度的顏色,并要避免腳本和裝飾的風(fēng)格。
選擇排版時(shí),請考慮你的受眾及其需求。簡單地說,設(shè)身處地從用戶的角度感受。
找尋靈感
看看其他設(shè)計(jì)師的工作。嘗試了解他們?nèi)绾巫龀雠虐娴臎Q定。
字體啟發(fā)
對于字體的靈感,CreativeBloq的The 100 Best Free Fonts是一個(gè)很好的文章,以便讓你有正確的心態(tài)去選擇排版。在文章中,CreativeBloq解釋了每種字體背后的動(dòng)機(jī)。
另外一個(gè)有用的資源是Awwwards的 100 Greatest Free Fonts Collection for 2015。
Invision還編制了giant repo of typography resources。在這你會(huì)發(fā)現(xiàn)更多的靈感來源。
Typ.io curates font inspiration from around the web
從網(wǎng)站的實(shí)際靈感來看,查看 Typ.io.該網(wǎng)站策劃的字體靈感來自于網(wǎng)絡(luò)。此外,它在每個(gè)靈感樣本的底部都提供了CSS的字體定義。
查看專用字體靈感網(wǎng)站,訪問你最喜歡的網(wǎng)站,并查看他們使用的是什么字體。WhatTheFont是一個(gè)很不錯(cuò)的工具。WhatTheFont是Chrome的一個(gè)擴(kuò)展,可以通過鼠標(biāo)懸停在網(wǎng)頁上來檢查網(wǎng)頁中的字體。
配對靈感
除了字體外,還要看字體的配對靈感。字體配對與字體本身一樣重要。良好的字體配對有助于建立視覺層次結(jié)構(gòu),提高設(shè)計(jì)的可讀性。
Font pairing is just as important as the fonts themselves
為了靈感,從 Typewolf開始。Typewolf的策劃來自不同網(wǎng)站的字體配對靈感。除此之外,他們還有字體建議和深入的排版指南。這是排版的寶庫。
FontPair還策劃字體配對靈感,專門針對 Google Fonts。你可以按排版的風(fēng)格組合排序,如無襯線和襯線,或襯線和襯線。
最后,設(shè)計(jì)師在線創(chuàng)建了大量的字體配對集合。例Typography: Google Fonts Combinations和Typography:Google Fonts Combinations Volume 2。只需在如Behance和Dribbble上搜索“字體配對”。
選擇字體
用研究和靈感來支撐。關(guān)于選擇排版,請牢記以下原則:可讀性,易讀性和目的性。
Before choosing a font, research into its intended purpose
選擇常規(guī)且易于閱讀的字體。避免高度修飾的字體,有利于簡單實(shí)用的字體。另外,需要注意字體的目的。例如,一些字體更適合作為標(biāo)題而不是正文。
為此,在選擇字體之前,需要研究其預(yù)期所達(dá)到目的。
Pair fonts that contrast one another
在字體配對方面,保持簡化,最多可以有三種不同的字體。另外,配對字體組織之間相互對比。這樣做將有助于引導(dǎo)讀者的視線,首先是標(biāo)題,然后到正文文本。你還可以使用不同的字體大小,顏色和權(quán)重創(chuàng)建視覺對比度。
對于網(wǎng)絡(luò)字體,你可以使用 Google Fonts, Typekit和Font Squirrel。Google Fonts是免費(fèi)的,Typekit和Font Squirrel都有免費(fèi)和付費(fèi)的字體。
確定字體大小
確定字體組合后的下一步是確定字體的大小。 Adobe的排版主管Tim Brown提供了一個(gè)很好的工具是 Modular Scale。模塊化量表是一個(gè)系統(tǒng),以確定歷史上令人滿意的比例創(chuàng)建尺度,來確定排版的大小。
Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes
例如,你可以使用一個(gè)基于Golden Ratio的刻度。這將是你的前五個(gè)計(jì)算字體大小的選項(xiàng):
Golden Ratio(1:1.618)
1.000 x 1.618 = 1.618
1.618 x 1.618 = 2.618
2.618 x 1.618 = 4.236
4.236 x 1.618 = 6.854
6.854 x 1.618 = 11.089
你可能會(huì)遇到的一個(gè)問題是你的比例太大??匆幌禄贕olden Ratio的基礎(chǔ)上的后期間隔會(huì)發(fā)生什么。
Golden Ratio(1:1.618)
...
11.089 x 1.618 = 17.942
17.942 x 1.618 = 29.032
9.030 x 1.618 = 46.971
46.971 x 1.618 = 75.999
75.999 x 1.618 = 122.966
正如你所見,數(shù)字之間的間隔開始變得很大。對于大多數(shù)界面,你需要較小的間隔。值得慶幸的是,Modular Scale具有幾何,自然和音樂的各種比例。
Minor Second 15:16
Major Second 8:9
Minor Third 5:6
Major Third 4:5
...
所以不用使用黃金比例,你可以使用像Perfect Fourth那樣產(chǎn)生較小間隔的比率。
Perfect Fourth (3:4)
...
9.969 x 1.333 = 13.288
13.288 x 1.333 = 17.713
17.713 x 1.333 = 23.612
23.612 x 1.333 = 31.475
31.475 x 1.333 = 41.956
41.956 x 1.333 = 55.927
一旦你定了一個(gè)刻度,你可以從列表中挑選字體大小,并將它們舍入到最接近的十進(jìn)制。
Font Sizes
Header 1: 55px
Header 2: 42px
Header 3: 31px
Header 4: 24px
Header 5: 14px
Body: 17px
Caption: 14px
Modular Scale方法使用數(shù)學(xué)精度來生成字體大小。但是,這只是一個(gè)引導(dǎo)。使用此方法作為起點(diǎn),然后利用人眼調(diào)整大小。
創(chuàng)建一個(gè)排版風(fēng)格的引導(dǎo)
該過程的最后一步是為你的排版創(chuàng)建一個(gè)風(fēng)格指導(dǎo),以幫助你的設(shè)計(jì)排版標(biāo)準(zhǔn)化。
在像Sketch這樣的程序中,你可以創(chuàng)建共享的文本樣式,以便快速插入已經(jīng)從引導(dǎo)中應(yīng)用的樣式的文本。
在此過程的這一步中,你可以調(diào)整完成文本屬性,如顏色,比重和大小。
顏色一詞:在選擇顏色時(shí),請考慮你的調(diào)色板。選擇與你的調(diào)色板協(xié)調(diào)一致的顏色。
Use styleguides to standardize type across your designs
在你的風(fēng)格指南中,請確保至少包含以下內(nèi)容:字體定義,字體大小,字體顏色和示例用法。
Google’s Material Design typography guidelines 是包含在風(fēng)格指南的一個(gè)很好的例子。其他幾個(gè)包括排版指南的例子Mailchimp, Apple和 Focus Labs。
排版是實(shí)驗(yàn)。它既是科學(xué)又是藝術(shù)。
原文地址:https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe
原文作者:Jonathan Z. White(Designer & developer)