選擇合適字體的5條建議

時(shí)下一種流行的設(shè)計(jì)方式:在頁(yè)面頂部使用配有簡(jiǎn)潔文字的大幅圖片或者視頻复隆,以此吸引用戶進(jìn)入網(wǎng)站媒熊。這種設(shè)計(jì)方式最頭疼的就是如何為這些文字選擇合適的字體吞获。

如何從樣式繁多的字體庫(kù)中找到一個(gè)合適的字體渔嚷?這往往讓設(shè)計(jì)師感到舉步維艱柳爽。也許運(yùn)用如下這些小技巧能夠幫助我們找到需要的字體媳握。讓我們通過(guò)下面幾個(gè)精彩的案例,來(lái)分享這5條建議吧磷脯。

特排字體(Display Type)

我們先來(lái)了解下什么是特排字體(Display Type)蛾找?

(walkwest.com)

特排字體通常指是字號(hào)偏大,特別引人注目的文字赵誓,通常用于標(biāo)題或需要放大顯示的文字打毛。特排字體并不只是在網(wǎng)頁(yè)設(shè)計(jì)中使用,它源自于印刷設(shè)計(jì)師的一個(gè)術(shù)語(yǔ)俩功。(譯者:預(yù)知更多詳見 Display_type In Wiki)

特排字體主要應(yīng)用于以下兩個(gè)方面:

用于首頁(yè)展示的網(wǎng)站名稱幻枉,例如:WalkWest

用于每個(gè)頁(yè)面的大標(biāo)題,或者橫幅頁(yè)頭的標(biāo)題诡蜓。作為標(biāo)題使用的字體雖然不如首頁(yè)名稱的字體那樣巨大醒目熬甫,但卻更廣泛的被使用在網(wǎng)站中各個(gè)頁(yè)面上

1、具備可讀性

為了確保信息傳遞的有效性蔓罚,特排字體需要有良好的可讀性椿肩。這聽起來(lái)像是一句廢話,但實(shí)際上你會(huì)發(fā)現(xiàn)有很多大標(biāo)題閱讀困難的網(wǎng)????站這是因?yàn)楝F(xiàn)在有太多各式各樣的字體可以選擇脚粟。

(madebyaugust.com)

如何選擇字體覆旱,目前并沒(méi)有一種通用規(guī)則可言蘸朋。襯線和無(wú)襯線表現(xiàn)能力同樣好核无, 新奇的字體也能表現(xiàn)出理想的效果。

使用夠大的字體藕坯,足夠的留白团南,使其與別的設(shè)計(jì)元素有一種鮮明的對(duì)比,文字恍如躍然紙上炼彪。想象一下吐根,如果這些文字蹦起來(lái)對(duì)用戶尖叫到"READ ME"是怎樣一種感覺,這正是特排字體需要傳達(dá)出來(lái)的效果辐马。

2拷橘、字體和單詞匹配

若不是親眼見證,你可能很難理解為什么字體需要匹配單詞。

(godaytrip.com)

關(guān)于這一點(diǎn)冗疮,我是這樣理解的萄唇。有些單詞在某種特定的字體下會(huì)顯得很難看,這個(gè)很難去解釋术幔。比如:'s' 在一個(gè)單詞里面出現(xiàn)多次另萤,整個(gè)字形就顯得不太好看。這種情況同時(shí)還會(huì)發(fā)生在一些特殊字符上诅挑,比如:%四敞、$ 或 &“瓮祝或者你選用的字體中 I忿危、l、1 區(qū)別不大没龙,而又同時(shí)出現(xiàn)在頁(yè)面上癌蚁,這時(shí)候你就得換個(gè)字體了。

文字能夠吸引人的眼球兜畸,這些單詞會(huì)讓人產(chǎn)生某種感受努释,或渾然天成或裝飾過(guò)度。如果你覺得字符的組合方式比較奇怪咬摇,同樣用戶也會(huì)有相同的感覺伐蒂。

3、設(shè)計(jì)更靈活

思考一下在你的項(xiàng)目中肛鹏,你會(huì)怎么使用特排字體逸邦?是否使用不同的層次和風(fēng)格來(lái)建立正確的總體方案?選擇的字體在輔助文字和主標(biāo)題是否都表現(xiàn)出很好的效果在扰?

(nordhouse.com.au)

你需要思考所有可能的使用場(chǎng)景缕减,讓你選擇的字體擁有足夠的靈活度去適應(yīng)不同使用方式。有些字體用在只有一兩個(gè)單詞的標(biāo)題上可以放大到超級(jí)大芒珠,這產(chǎn)生了很棒的效果桥狡。但如果你還想把同樣的字體用在小標(biāo)題或輔助文字上,就比較困難皱卓。

如果選擇的字體能適應(yīng)不同的場(chǎng)景裹芝,你就能較為輕松的完成設(shè)計(jì),并且保持設(shè)計(jì)的一致性娜汁。如果你的設(shè)計(jì)需要更多的靈活性并且兼顧一致性嫂易,那么可以考慮使用一個(gè)字體族,并對(duì)主標(biāo)題使用粗體掐禁,次一級(jí)使用細(xì)體(也可以考慮用顏色來(lái)區(qū)別)怜械。

4颅和、謹(jǐn)慎使用細(xì)體

有一個(gè)大家經(jīng)常討論的問(wèn)題:特排字體使用細(xì)體很難表現(xiàn)出需要的效果。

(dunlopbuilders.co.nz)

細(xì)小的字體有時(shí)候可以表現(xiàn)的很驚艷缕允,也有設(shè)計(jì)師能把它設(shè)計(jì)的很漂亮融虽,但是大部分情況下都不能展現(xiàn)出那么好的效果。

想象一下灼芭,你在一臺(tái)27英寸的顯示器上設(shè)計(jì)一段細(xì)體文字(也許你正在做有额。。彼绷。)巍佑,接著在平板或者手機(jī)上來(lái)看,你覺得效果會(huì)是什么樣寄悯?是否還是具備可讀性萤衰?

蘋果在 iOS7 上就犯過(guò)這個(gè)錯(cuò),當(dāng)時(shí)很多用戶抱怨 iOS7 上的字體太細(xì)猜旬,以至于很多文字都難以閱讀脆栋。在接收到用戶的這些反饋后,蘋果在后續(xù)的版本中就采用了粗一點(diǎn)的字體洒擦。

5椿争、考慮下圖片內(nèi)容

知道在什么樣的圖片或視頻上使用這些文字也是一個(gè)非常重要的環(huán)節(jié)。如果圖片或視頻的內(nèi)容和后續(xù)設(shè)計(jì)傳達(dá)的信息不一致熟嫩,就算使用了世界上最美的字體整天呈現(xiàn)上也會(huì)顯得怪異拷沸。

(iluvmagpie.com)

對(duì)比度也是一個(gè)很重要的因素蔑赘,特別是在視頻中深色和淺色的部分是會(huì)移動(dòng)的痪宰。文字就需要設(shè)計(jì)在易識(shí)別的背景遮罩層上弱匪。

越來(lái)越多的設(shè)計(jì)師開始選擇純色作為背景,將文字突出成為了頁(yè)面上最主要的元素昧狮。這是一個(gè)很有趣的趨勢(shì)景馁,也讓我們見識(shí)了很多亮眼又大膽的網(wǎng)頁(yè)設(shè)計(jì)。如果你對(duì)你的文字設(shè)計(jì)很滿意逗鸣,不妨就用純色背景來(lái)突顯它們合住。

在純色背景上我們使用粗體的特排字體,能非常有效的讓用戶關(guān)注到文字本身慕购,顏色能將用戶的注意力吸引到你想描述的內(nèi)容上聊疲。這樣一組綜合了多種字體樣式的文字茬底,幾乎可以適應(yīng)從高亮顏色到極簡(jiǎn)黑白的任何配色方案沪悲。最重要的事情是你需要選擇一種非常迷人的字體!

小結(jié)

特排字體將決定網(wǎng)站帶給用戶的第一印象阱表,它影響用戶是繼續(xù)瀏覽你的網(wǎng)站還是離開殿如。

為了能完成這關(guān)鍵的一步贡珊,你要確保你的每一個(gè)詞易于閱讀,并配以合適的色調(diào)涉馁,同時(shí)避免你的設(shè)計(jì)干擾到用戶门岔,這樣才能取得成功。

本文作者:曾真(點(diǎn)融黑幫)烤送,現(xiàn)就職于點(diǎn)融網(wǎng)工程部 DDC 團(tuán)隊(duì)寒随,愛貓的設(shè)計(jì)師一枚。

原文地址:https://designshack.net/articles/graphics/choosing-the-right-display-typeface-5-tips-for-success/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末帮坚,一起剝皮案震驚了整個(gè)濱河市妻往,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌试和,老刑警劉巖讯泣,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異阅悍,居然都是意外死亡好渠,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門节视,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)拳锚,“玉大人,你說(shuō)我怎么就攤上這事寻行∩纬” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵寡痰,是天一觀的道長(zhǎng)抗楔。 經(jīng)常有香客問(wèn)我,道長(zhǎng)拦坠,這世上最難降的妖魔是什么连躏? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮贞滨,結(jié)果婚禮上入热,老公的妹妹穿的比我還像新娘。我一直安慰自己晓铆,他們只是感情好勺良,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著骄噪,像睡著了一般尚困。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上链蕊,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天事甜,我揣著相機(jī)與錄音谬泌,去河邊找鬼。 笑死逻谦,一個(gè)胖子當(dāng)著我的面吹牛掌实,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播邦马,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼贱鼻,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了滋将?” 一聲冷哼從身側(cè)響起忱嘹,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎耕渴,沒(méi)想到半個(gè)月后拘悦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡橱脸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年础米,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片添诉。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡屁桑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出栏赴,到底是詐尸還是另有隱情蘑斧,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布须眷,位于F島的核電站竖瘾,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏花颗。R本人自食惡果不足惜捕传,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望扩劝。 院中可真熱鬧庸论,春花似錦、人聲如沸棒呛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)簇秒。三九已至鱼喉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蒲凶。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工气筋, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拆内,地道東北人旋圆。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像麸恍,于是被迫代替她去往敵國(guó)和親灵巧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,744評(píng)論 25 707
  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案抹沪? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,734評(píng)論 1 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)刻肄、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評(píng)論 4 62
  • Ajax教程異步 vs 同步
    _chuuuing_閱讀 156評(píng)論 0 0
  • 仙界之西有一湖融欧,湖水之清澈敏弃,卻不見游魚,風(fēng)景之秀美噪馏,卻不見卻不見來(lái)人麦到,湖水不遠(yuǎn)處的石碑也顯得有些老久,但上面的字卻...
    六月申閱讀 1,228評(píng)論 3 15