設(shè)計(jì)中關(guān)于字體的那點(diǎn)小事(上)

\bullet 字體也有使用原則

協(xié)調(diào)

頁(yè)面上所有元素都使用同樣性質(zhì)的字體钾菊,這種設(shè)計(jì)就是協(xié)調(diào)的

下圖中盡管字體大小 字體擺放位置等不一致帅矗,但由于字體性質(zhì)一致,且中英文字體也有相同的特質(zhì)煞烫,所以頁(yè)面 依舊具有協(xié)調(diào)性


Gilbert Font 吉爾伯特字體 中文版設(shè)計(jì)

沖突

如果一個(gè)頁(yè)面中出現(xiàn)了兩個(gè)或者多個(gè)類似字體浑此,它們并非完全相同,也并非完全不同滞详,那么這個(gè)設(shè)計(jì)就是沖突的凛俱。

不要為了匹配頁(yè)面上的某種字體查找看上去很類似的字體

相似性是互相沖突的,要么一致性料饥,要么截然不同


《寫給大家的設(shè)計(jì)書》

對(duì)比

這個(gè)世界上所有特性都依賴于比較才能顯現(xiàn)蒲犬,如果沒(méi)有比較,則根本沒(méi)有存在的前提——Herman Melville

創(chuàng)建協(xié)調(diào)很簡(jiǎn)單岸啡,制造沖突也很簡(jiǎn)單原叮,不過(guò)不受歡迎。產(chǎn)生對(duì)比則是非常有趣的

強(qiáng)烈的對(duì)比容易吸引視線巡蘸,要在設(shè)計(jì)中增加對(duì)比奋隶,最簡(jiǎn)單有效且讓人滿意的方法就是利用字體


圖片來(lái)源于網(wǎng)絡(luò),侵刪



圖片來(lái)源于網(wǎng)絡(luò)赡若,侵刪


字體設(shè)計(jì)原則總結(jié):

對(duì)比的六種明確方式=大小/粗細(xì)/結(jié)構(gòu)/形狀/方向/顏色

對(duì)比不只能增加作品的美感达布,頁(yè)面上信息的條理性和清晰性與對(duì)比密不可分


\bullet 字體的類別

字體的分類有很多

羅馬字體或襯線體(roman,serif)逾冬;無(wú)襯線體(sanserif)黍聂;手寫體(script);雕刻字系(glayphic)身腻;典籍體字系(Classical)产还;裝飾體字系(decorative);?展示體字系(Display)嘀趟;當(dāng)代字體字系(Contemporary)脐区;符號(hào)字系(Symbol)?…

襯線體

筆畫末端付加油爪狀或者線條叫襯線,據(jù)說(shuō)襯線有助于水平方向的視線移動(dòng)她按,所以小說(shuō)等正文排版中會(huì)更多的使用傳統(tǒng)造型的羅馬字體


襯線體

Garamond

如果說(shuō)Helvetica字體是無(wú)襯線字體的典范的話牛隅,那么這個(gè)字體就是襯線字體的典范,經(jīng)典的設(shè)計(jì)里常出現(xiàn)的字體酌泰。

Garamond

Caslon

在巴洛克風(fēng)格字樣的基礎(chǔ)上改造媒佣,一款非常精美的字體,有著很悠久的歷史陵刹。

Caslon

獨(dú)立宣言(標(biāo)題)

Caslon

Bookman old style(上圖)和New roman字體(下圖)

這兩種字體類似默伍,所以合并在一起來(lái)講。國(guó)外報(bào)紙常用到的印刷字體,和Consolas字體一樣也糊,即使縮小后易讀性依然很高炼蹦,閱讀起來(lái)很舒服。不過(guò)和這兩種字體和Garamond字體一樣狸剃,因?yàn)樽种匦∑疾贿m合用來(lái)做標(biāo)題。

Bookman old style
New roman

Coueier

過(guò)去打字機(jī)打出來(lái)的字體樣式钞馁,用在設(shè)計(jì)上會(huì)有特別的效果瑟枫。

Coueier

Blackletter

一種傳統(tǒng)的英文手寫體,有著強(qiáng)烈的形式感指攒,屬于哥特式英文字體。由于這種字體放在現(xiàn)在過(guò)于炫酷僻焚,所以設(shè)計(jì)時(shí)一定要慎用…

Blackletter

Trajan

前身是“古羅馬大寫字母”允悦,屬于石碑體。字體端正有氣勢(shì)虑啤,有歷史厚重感隙弛。覆蓋在各種類型的電影海報(bào)上。因?yàn)榱_馬時(shí)代沒(méi)有小寫字母狞山,所以這個(gè)字體只有大寫全闷。

Trajan

泰坦尼克號(hào)電影海報(bào)(標(biāo)題)

Bodoni

被譽(yù)為“現(xiàn)代主義風(fēng)格最完美的體現(xiàn)”。字體粗細(xì)對(duì)比強(qiáng)烈萍启,給人優(yōu)雅浪漫的感覺(jué)总珠,常用于時(shí)尚雜志或書籍設(shè)計(jì)中。

Bodoni

田中一光的《設(shè)計(jì)的覺(jué)醒》封面英文所使用的字體勘纯,就是Bodoni字體局服。


\bullet

20世紀(jì)無(wú)襯線體開始被廣泛應(yīng)用,字形簡(jiǎn)潔驳遵,在苛刻的條件下也容易識(shí)別淫奔,因此多用于報(bào)紙字典的標(biāo)題、戶外道路指示牌等堤结。


無(wú)襯線體

Futura

我首先推薦Futura字體唆迁,這是我設(shè)計(jì)中使用最多的字體。這個(gè)字體繼承包豪斯的設(shè)計(jì)理念竞穷,很有現(xiàn)代風(fēng)格唐责,看著非常舒服,適合印刷排版和設(shè)計(jì)来庭。還有這個(gè)字體的阿拉伯?dāng)?shù)字也很好看妒蔚!

Futura

DIN

在德國(guó)的交通標(biāo)識(shí)和公共空間中已經(jīng)效力數(shù)十年,字體歷史里的“德國(guó)制造”。代表了一種把簡(jiǎn)單的解決辦法標(biāo)準(zhǔn)化的思想肴盏。這個(gè)是在標(biāo)準(zhǔn)網(wǎng)格上創(chuàng)造出來(lái)的字體科盛,非常適合設(shè)計(jì)。

DIN

Frutiger

簡(jiǎn)單易懂又有意思菜皂,一般用于導(dǎo)視系統(tǒng)設(shè)計(jì)領(lǐng)域贞绵。

Frutiger

Verdana

是以Frutiger字體為藍(lán)本設(shè)計(jì)的,目的是將其改造成適合屏幕的字體恍飘,很多網(wǎng)頁(yè)和UI設(shè)經(jīng)常用到這個(gè)字體榨崩。

Verdana

Optima

一種富有人文主義情懷的字體,Optima字體嚴(yán)格遵循了黃金分割原則章母,所以有著優(yōu)美的比例母蛛。十分受大眾喜愛(ài)的字體。

Optima


Consolas

程序設(shè)計(jì)常用到的字體乳怎,這個(gè)字體的特別之處在于即使縮小很多也能保證識(shí)別性彩郊,這個(gè)設(shè)計(jì)迎合程序員快速閱讀代碼的需要。但不知道用于設(shè)計(jì)會(huì)是什么效果蚪缀。

Consolas

Arial

微軟御用字體秫逝,設(shè)計(jì)的目的是在電腦屏幕上不同分辨率下的可讀性,屬于萬(wàn)能字體询枚。不過(guò)比較普通违帆,用在各種場(chǎng)合也不會(huì)容易出現(xiàn)違和感。和Helvetica字體很相似金蜀。

Arial

Adele

聽(tīng)名字就知道是誰(shuí)家的御用字體了刷后,這個(gè)字體纖細(xì)飽滿,很有視覺(jué)效果廉油,值得推薦惠险。

Adele

Helvetica

無(wú)襯線字體經(jīng)典之作!抒线!是世界排名第一的字體班巩,被無(wú)數(shù)的企業(yè)使用作為標(biāo)準(zhǔn)字,也是蘋果電腦的御用字體嘶炭。這個(gè)字體適合各個(gè)領(lǐng)域抱慌,是現(xiàn)主義設(shè)計(jì)的典范。

Helvetica

\bullet 字體對(duì)比

大小? ?粗細(xì)? ?結(jié)構(gòu)? ?形狀? ?方向? ?顏色

字體大小的對(duì)比:

字體字號(hào)的對(duì)比眨猎,大字號(hào)和小字號(hào)的對(duì)比

\odot 為了有效使用大小對(duì)比抑进,對(duì)比不能太保守:14號(hào)和12號(hào)就無(wú)法形成明顯的對(duì)比,大多數(shù)情況下只會(huì)產(chǎn)生沖突


不要太保守的字體對(duì)比

\odot 字體大小的對(duì)比其實(shí)并不是都要求字體很大睡陪,而是強(qiáng)調(diào)突出對(duì)比

一個(gè)大頁(yè)面里只有一行很小的字寺渗,肯定會(huì)想知道寫的是什么匿情,產(chǎn)生這種吸引力的重要原因就是大頁(yè)面與小字體產(chǎn)生了對(duì)比


大留白大頁(yè)面與小字體形成了對(duì)比

\odot 建議英文字體不要全部使用大寫,相同文字的大寫與小寫對(duì)比起來(lái)信殊,大寫的長(zhǎng)度可能小寫的兩倍

使用小寫炬称,可以設(shè)置更大一些的字號(hào),也有足夠的空間使其更粗一些


下方字母多一些的文字如果和上方一樣都使用大寫(長(zhǎng)度會(huì)過(guò)長(zhǎng))


字體粗細(xì)的對(duì)比:

字體筆畫的粗細(xì)度:常規(guī)/粗體/半粗/極粗/細(xì)

\odot 為了有效使用粗細(xì)對(duì)比涡拘,對(duì)比一樣不能太保守


字體粗細(xì)的對(duì)比

\odot 粗細(xì)對(duì)比不僅使得頁(yè)面更加引人注目玲躯,也是組織信息最有效的方式之一(突出重要信息的/劃分層級(jí)的)

字體結(jié)構(gòu)的對(duì)比:

字體的結(jié)構(gòu)指的是這種字體是如何建立的

\odot robin原則:不要把同一類別的兩種字體放在同一頁(yè)面中

因?yàn)橥活悇e,同一結(jié)構(gòu)的字體存在太多相似性鳄乏,不管怎么做都是存在沖突的


每條線對(duì)應(yīng)一個(gè)類別

\odot 一般情況下僅靠結(jié)構(gòu)對(duì)比是不夠的跷车,還需要和其他對(duì)比相結(jié)合


字體結(jié)構(gòu)、大小橱野、粗細(xì)的對(duì)比

字體的形狀對(duì)比:

字體的形狀指的是它的外形朽缴,可以簡(jiǎn)單距離為英文字母大寫和小寫的的對(duì)比


《寫給大家的設(shè)計(jì)書》

字體方向的對(duì)比:

字體方向即文字的傾斜度

\odot 向右向上傾斜的字體產(chǎn)生一種前進(jìn)的力量,向下傾斜則反向的力量


向右向上傾斜


字體方向的對(duì)比

字體顏色的對(duì)比:

字體顏色暖色為前進(jìn)色水援,冷色是遠(yuǎn)離型


字體顏色的對(duì)比

字體對(duì)比總結(jié)


《寫給大家的設(shè)計(jì)書》
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末不铆,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子裹唆,更是在濱河造成了極大的恐慌,老刑警劉巖只洒,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件许帐,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡毕谴,警方通過(guò)查閱死者的電腦和手機(jī)成畦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)涝开,“玉大人循帐,你說(shuō)我怎么就攤上這事∫ㄎ洌” “怎么了拄养?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)银舱。 經(jīng)常有香客問(wèn)我瘪匿,道長(zhǎng),這世上最難降的妖魔是什么寻馏? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任棋弥,我火速辦了婚禮,結(jié)果婚禮上诚欠,老公的妹妹穿的比我還像新娘顽染。我一直安慰自己漾岳,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布粉寞。 她就那樣靜靜地躺著尼荆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪仁锯。 梳的紋絲不亂的頭發(fā)上耀找,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音业崖,去河邊找鬼野芒。 笑死,一個(gè)胖子當(dāng)著我的面吹牛双炕,可吹牛的內(nèi)容都是我干的狞悲。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼妇斤,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼摇锋!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起站超,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤荸恕,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后融求,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體算撮,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年陷舅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了审洞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缩赛,死狀恐怖撰糠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情旨袒,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布施无,位于F島的核電站必孤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏敷搪。R本人自食惡果不足惜赡勘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望闸与。 院中可真熱鬧,春花似錦践樱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至抛人,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間妖枚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工荠商, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留续誉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓饰躲,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親妄壶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子寄狼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容