選擇字體是每個(gè)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目的一個(gè)組成部分。 成千上萬(wàn)的字體可以從托管服務(wù),如Typekit,一個(gè)不斷完善的?收集的免費(fèi)字體?可用的,從來(lái)沒(méi)有一個(gè)更好的時(shí)間t網(wǎng)頁(yè)設(shè)計(jì)師。
人們可以很容易地認(rèn)為,沒(méi)有什么比排版更影響設(shè)計(jì)。 和良好的排版首先選擇一個(gè)合適的字體。 但有太多的選擇可以是壞事嗎? 有了更多的選擇,我們有更多的機(jī)會(huì)做出糟糕的決定。
在本文中,我們將回顧美麗的集合網(wǎng)站和分析的影響,他們的設(shè)計(jì)師的字體選擇對(duì)總體設(shè)計(jì)。 我們會(huì)批評(píng)的好和壞。 當(dāng)然,類型是主觀的,因此采取任何批評(píng)與一粒鹽。 讓我們挖!
黃昏的酒店
葡萄園顯示?來(lái)自新西蘭曲線和華麗的顯示字體類型設(shè)計(jì)師?克麗絲Sowersby?,是一個(gè)美麗的結(jié)合比鄰星新星?在?黃昏的酒店?的網(wǎng)站。 盡管比鄰星新星的大多數(shù)過(guò)度使用web字體之一過(guò)去的幾年里,搭配一些較少使用,如葡萄園,可以讓一個(gè)設(shè)計(jì)很獨(dú)特的清新的感覺(jué)。
我也喜歡當(dāng)一個(gè)品牌能夠使用web字體標(biāo)志。 它讓我的大腦的開(kāi)發(fā)人員知道快樂(lè)標(biāo)志可以用CSS樣式,閱讀屏幕閱讀器和擴(kuò)充或縮減——所有不需要加載的圖像。
dragone
看到這樣的類型與華麗的紋理讓我后悔”?平面設(shè)計(jì)?”是這樣的一個(gè)主流趨勢(shì)。?dragone?網(wǎng)站的感覺(jué)就像一幅畫(huà),優(yōu)雅?公平聯(lián)盟顯示?這個(gè)看起來(lái)是完美的字體。 公平聯(lián)盟的斜體顯示特別美麗,和本網(wǎng)站的特點(diǎn)突出。 經(jīng)典的幾何無(wú)?未來(lái)?使用,提供一個(gè)堅(jiān)固的基礎(chǔ)的公平聯(lián)盟顯示。
有時(shí)候這樣的文本設(shè)置的圖像,易讀性存在。 然而,本網(wǎng)站的設(shè)計(jì)者已經(jīng)非常小心,以確保足夠的對(duì)比加深了照片足以讓類型脫穎而出。
我唯一的挑剔是使用公平聯(lián)盟顯示內(nèi)文-高對(duì)比度顯示臉其實(shí)不是針對(duì)長(zhǎng)段落的文本。 也就是說(shuō),副本的數(shù)量在這個(gè)網(wǎng)站上相當(dāng)少,所以它不會(huì)閱讀的危險(xiǎn)。?喬治亞州?是傳統(tǒng)的臉具有類似特征的,所以它可以作為可讀性更強(qiáng)身體公平聯(lián)盟顯示字體的同伴。
羅曼Balcerak
《文本?是另一個(gè)多產(chǎn)的字體?克麗絲Sowersby?。 這里的配對(duì)?哨兵?,一個(gè)?板襯線?從?霍弗勒& Co。?摘要?,一個(gè)古怪的怪誕?跋鑄造?是混合的。
使用三個(gè)字體有時(shí)有點(diǎn)多,但是?羅曼Balcerak?堅(jiān)持一個(gè)一致的系統(tǒng),把設(shè)計(jì)結(jié)合在一起。 《文本設(shè)置為標(biāo)題粗體;前哨總是設(shè)置為斜體副標(biāo)題,梗概是用于身體副本。
Rails的資產(chǎn)
Adelle無(wú)?和?惠特尼?是兩個(gè)具有類似特征的無(wú)襯線——兩者都是人文主義傾向的圖騰。 結(jié)合兩個(gè)相似的字體是肯定的。 它幾乎就像是設(shè)計(jì)師不能在兩者之間選擇,所以決定同時(shí)使用。
至于排版犯罪,我認(rèn)為這是次要的。 他們的使用是一致的——Adelle無(wú)標(biāo)題和惠特尼一切。 以及與字體設(shè)計(jì),很難設(shè)計(jì)看起來(lái)很糟糕。
美元一天
我要做一個(gè)not-too-controversial宣言:?摘要?現(xiàn)在在網(wǎng)上是最新潮的字體。 我這邊的項(xiàng)目Typewolf?功能很多網(wǎng)站使用梗概;事實(shí)上,這是第三個(gè)最流行的字體在網(wǎng)站上,和我仍然遇到很多網(wǎng)站使用不要出現(xiàn)在Typewolf梗概。 似乎一些網(wǎng)站每天都用這個(gè)字體出現(xiàn)。
我的猜測(cè)是,梗概和其他類似的“?古怪的圖騰?“吸引設(shè)計(jì)師,因?yàn)榻?jīng)過(guò)多年的黑體在web上使用,這種風(fēng)格的字體自豪地說(shuō)“我不是Helvetica?！?/p>
所以,?美元一天?的網(wǎng)站的設(shè)計(jì)可能會(huì)覺(jué)得冷和無(wú)菌如果設(shè)置在Helvetica,立刻感覺(jué)有趣,活潑和獨(dú)特的梗概。 當(dāng)然,當(dāng)每一個(gè)網(wǎng)站都使用相同的字體,那么新鮮。 但是現(xiàn)在梗概仍然感到興奮。
新公司物色
新公司物色?是一個(gè)網(wǎng)站,有很多好的事情在部門(mén)類型,但是感覺(jué)事情不知怎么沒(méi)有一起在設(shè)計(jì)和開(kāi)發(fā)階段之間。
在第一印象上,板襯線?Jubilat?看起來(lái)美妙的搭配?開(kāi)放無(wú)?在著名的英雄圖形。 一個(gè)溫暖和彎曲板臉加上嚴(yán)肅的人文主義使得一些堅(jiān)實(shí)的品牌。 然而,仔細(xì)觀察,你會(huì)發(fā)現(xiàn)另一個(gè)無(wú)襯線,?比鄰星新星?,用于導(dǎo)航。 然后下面,Arial用于身體副本。
如果您已經(jīng)導(dǎo)入無(wú)開(kāi)放,那么為什么不使用它的副本嗎? 和它有一個(gè)巨大的范圍的權(quán)重。 為什么是一個(gè)獨(dú)立的無(wú)襯線字體家庭所需的導(dǎo)航?
其余的網(wǎng)站似乎是偶然Jubilat、比鄰星新星,開(kāi)放無(wú)和Arial,沒(méi)有明確的使用建立了。 這種不一致通常發(fā)生在多個(gè)設(shè)計(jì)師正在一個(gè)網(wǎng)站,但不是在相同的頁(yè)面上。?創(chuàng)建一個(gè)風(fēng)格指南?在項(xiàng)目的早期通常會(huì)避免這樣的問(wèn)題發(fā)生。
有才華的設(shè)計(jì)師顯然是在這個(gè)項(xiàng)目上工作,網(wǎng)站還有很多贊賞。 但是沒(méi)有一致性,混合四個(gè)字體的家庭是很難實(shí)現(xiàn)的。
美國(guó)股
美國(guó)股?使用一個(gè)字體,?蒙特塞拉特島?,他的?開(kāi)源字體?是免費(fèi)嗎?谷歌字體?。 很多流行欠其相似的兩個(gè)最流行的商業(yè)字體的最后十年,哥譚鎮(zhèn),比鄰星新星。 雖然它肯定這兩個(gè)字體有一些相似之處,我認(rèn)為這是其獨(dú)特的設(shè)計(jì),有自己獨(dú)特的性格。
蒙特塞拉特島的一個(gè)缺點(diǎn)是,它沒(méi)有一個(gè)斜體樣式。 如果你身體復(fù)制在一個(gè)沒(méi)有斜體的字體,你將最終?人造斜體?。 復(fù)制這個(gè)網(wǎng)站非常少,不過(guò),我注意到只有少數(shù)情況下發(fā)生這種情況。 因此,盡管這不是“適當(dāng)?shù)摹卑媸?這不是很明顯的在這種情況下。 無(wú)襯線通常處理人造斜體比襯線。
也就是說(shuō),設(shè)計(jì)師做了一個(gè)出色的整體的一個(gè)有限的字體樣式。 大寫(xiě)字母的文本元素組比正常略寬字符間距,這始終是一個(gè)不錯(cuò)的聯(lián)系;慷慨的空白給房間類型的呼吸,和大膽的顏色產(chǎn)生強(qiáng)烈的對(duì)比。
挪威的雨
挪威的雨?的網(wǎng)站結(jié)合了經(jīng)典幾何無(wú)襯線?Avenir?與?運(yùn)費(fèi)文本?。 Avenir被選為"?最喜歡的字體主要設(shè)計(jì)師之一?從今年早些時(shí)候的一項(xiàng)調(diào)查顯示。 “avenir”這個(gè)詞的意思是“未來(lái)”在法國(guó)-類型設(shè)計(jì)的傳奇?Adrian Frutiger?未來(lái)背后的幾何原理,添加了一個(gè)溫暖、創(chuàng)建Avenir有機(jī)聯(lián)系。 毫無(wú)疑問(wèn)這是一個(gè)最喜歡的那些真正欣賞排版。
運(yùn)費(fèi)文本獨(dú)特的斜體減少Avenir的線條對(duì)得很好。 事實(shí)上,只有貨運(yùn)的斜體樣式文本家庭是使用這個(gè)網(wǎng)站。 這不僅使類型系統(tǒng)一致,但保持?頁(yè)面加載時(shí)間?下來(lái)。
文本的行高在頁(yè)腳的感覺(jué)?小?緊了。 除此之外,這是一個(gè)很好的網(wǎng)站,有很多好的排版升值。
鵜鶘的書(shū)
鵜鶘的書(shū)?網(wǎng)站功能之間的另一個(gè)非常受歡迎的字體設(shè)計(jì)師,?布蘭登的?。 這實(shí)際上是布蘭登的特殊文本版本的,叫布蘭登文本。 布蘭登的普通版本的設(shè)計(jì)更顯示的臉,這意味著它并不適合長(zhǎng)段落的文本。 布蘭登文本有一個(gè)更高的x坐標(biāo)和優(yōu)化身體副本。
有趣的是,這個(gè)網(wǎng)站仍然使用布蘭登文本顯示面臨比身體副本,這是?運(yùn)費(fèi)文本?。 布蘭登文本仍然在逃大小看上去不錯(cuò),但不是那樣迷人的原始布蘭登怪誕,因?yàn)樗徍土撕捅Ｊ亍?貨運(yùn)文本是最清晰的襯線之一,所以這是一個(gè)很好的選擇長(zhǎng)段落的文本”?在線閱讀?”一節(jié)。 加上微妙的紙紋理,排版真的讓它覺(jué)得你正在閱讀一本書(shū)。本文由北京網(wǎng)站建設(shè)公司傳誠(chéng)信翻譯傳播，轉(zhuǎn)載請(qǐng)注明！
簡(jiǎn)單的口香糖
由于web字體,匹配的字體設(shè)計(jì)在產(chǎn)品的物理包裝排版在制造商的網(wǎng)站正變得越來(lái)越普遍。?簡(jiǎn)單的口香糖?選擇?高譚市?隨著品牌字體,保持其身份一致線上和線下渠道。
這個(gè)網(wǎng)站也是一個(gè)很好的例子,一個(gè)字體是如何有時(shí)所需要的一切。 通過(guò)使用各種權(quán)重的高譚市和設(shè)置標(biāo)題大寫(xiě),僅僅只有一個(gè)口香糖創(chuàng)造了一個(gè)很清晰的層次結(jié)構(gòu)字體。
頁(yè)眉和頁(yè)腳都是png的標(biāo)志,所以他們失去了清新和可伸縮性的網(wǎng)絡(luò)類型。 使用web字體標(biāo)志并不總是可行的,特別是如果你需要大量的控制字距調(diào)整;然而,一個(gè)?SVG圖像?通常比一個(gè)PNG在這種情況下,因?yàn)樗梢詳U(kuò)展,同時(shí)保留其酥脆。
結(jié)束
希望上面的示例演示如何大的字體選擇對(duì)設(shè)計(jì)產(chǎn)生影響。 這里有幾個(gè)關(guān)鍵外賣(mài):
如果你要使用多種字體,然后開(kāi)發(fā)一個(gè)一致的類型系統(tǒng)和堅(jiān)持下去。
當(dāng)設(shè)置的身體副本,選擇一個(gè)字體,定期、斜體、粗體和粗斜體樣式。
如果你要去一個(gè)受歡迎的字體,試著搭配使用更少的字體讓設(shè)計(jì)感覺(jué)與眾不同。
創(chuàng)建一個(gè)在項(xiàng)目早期風(fēng)格指南,以確保一致的使用的類型在你的團(tuán)隊(duì)成員。
使用不同的字體,而不是類似的。
避免顯示內(nèi)文的面孔。 字體設(shè)計(jì)的目的。
不要害怕只使用一個(gè)字體的家庭。 你可以與不同的權(quán)重建立層次結(jié)構(gòu)和風(fēng)格來(lái)自同一個(gè)家庭。
如果你的商標(biāo)允許,去網(wǎng)絡(luò)類型或SVG圖像,以確保易碎和可伸縮性。
跟上最新的網(wǎng)頁(yè)排版
如果你和我一樣癡迷于類型,然后到我這邊的項(xiàng)目?Typewolf?更漂亮的字體設(shè)計(jì)的例子。
技術(shù)說(shuō)明:?這些截圖是在Mac上Safari。?字體渲染?不同瀏覽器瀏覽器,因此您所得到的結(jié)果可能有所不同。
本文由北京網(wǎng)站建設(shè)公司傳誠(chéng)信翻譯傳播，轉(zhuǎn)載請(qǐng)注明！
