選擇字體是每個網(wǎng)頁設(shè)計項目的一個組成部分。 成千上萬的字體可以從托管服務(wù),如Typekit,一個不斷完善的?收集的免費字體?可用的,從來沒有一個更好的時間t網(wǎng)頁設(shè)計師。

人們可以很容易地認為,沒有什么比排版更影響設(shè)計。 和良好的排版首先選擇一個合適的字體。 但有太多的選擇可以是壞事嗎? 有了更多的選擇,我們有更多的機會做出糟糕的決定。

在本文中,我們將回顧美麗的集合網(wǎng)站和分析的影響,他們的設(shè)計師的字體選擇對總體設(shè)計。 我們會批評的好和壞。 當(dāng)然,類型是主觀的,因此采取任何批評與一粒鹽。 讓我們挖!

黃昏的酒店

葡萄園顯示?來自新西蘭曲線和華麗的顯示字體類型設(shè)計師?克麗絲Sowersby?,是一個美麗的結(jié)合比鄰星新星?在?黃昏的酒店?的網(wǎng)站。 盡管比鄰星新星的大多數(shù)過度使用web字體之一過去的幾年里,搭配一些較少使用,如葡萄園,可以讓一個設(shè)計很獨特的清新的感覺。

我也喜歡當(dāng)一個品牌能夠使用web字體標(biāo)志。 它讓我的大腦的開發(fā)人員知道快樂標(biāo)志可以用CSS樣式,閱讀屏幕閱讀器和擴充或縮減——所有不需要加載的圖像。

dragone

看到這樣的類型與華麗的紋理讓我后悔”?平面設(shè)計?”是這樣的一個主流趨勢。?dragone?網(wǎng)站的感覺就像一幅畫,優(yōu)雅?公平聯(lián)盟顯示?這個看起來是完美的字體。 公平聯(lián)盟的斜體顯示特別美麗,和本網(wǎng)站的特點突出。 經(jīng)典的幾何無?未來?使用,提供一個堅固的基礎(chǔ)的公平聯(lián)盟顯示。

有時候這樣的文本設(shè)置的圖像,易讀性存在。 然而,本網(wǎng)站的設(shè)計者已經(jīng)非常小心,以確保足夠的對比加深了照片足以讓類型脫穎而出。

我唯一的挑剔是使用公平聯(lián)盟顯示內(nèi)文-高對比度顯示臉其實不是針對長段落的文本。 也就是說,副本的數(shù)量在這個網(wǎng)站上相當(dāng)少,所以它不會閱讀的危險。?喬治亞州?是傳統(tǒng)的臉具有類似特征的,所以它可以作為可讀性更強身體公平聯(lián)盟顯示字體的同伴。

羅曼Balcerak

《文本?是另一個多產(chǎn)的字體?克麗絲Sowersby?。 這里的配對?哨兵?,一個?板襯線?從?霍弗勒& Co。?摘要?,一個古怪的怪誕?跋鑄造?是混合的。

使用三個字體有時有點多,但是?羅曼Balcerak?堅持一個一致的系統(tǒng),把設(shè)計結(jié)合在一起。 《文本設(shè)置為標(biāo)題粗體;前哨總是設(shè)置為斜體副標(biāo)題,梗概是用于身體副本。

Rails的資產(chǎn)

Adelle無?和?惠特尼?是兩個具有類似特征的無襯線——兩者都是人文主義傾向的圖騰。 結(jié)合兩個相似的字體是肯定的。 它幾乎就像是設(shè)計師不能在兩者之間選擇,所以決定同時使用。

至于排版犯罪,我認為這是次要的。 他們的使用是一致的——Adelle無標(biāo)題和惠特尼一切。 以及與字體設(shè)計,很難設(shè)計看起來很糟糕。

美元一天

我要做一個not-too-controversial宣言:?摘要?現(xiàn)在在網(wǎng)上是最新潮的字體。 我這邊的項目Typewolf?功能很多網(wǎng)站使用梗概;事實上,這是第三個最流行的字體在網(wǎng)站上,和我仍然遇到很多網(wǎng)站使用不要出現(xiàn)在Typewolf梗概。 似乎一些網(wǎng)站每天都用這個字體出現(xiàn)。

我的猜測是,梗概和其他類似的“?古怪的圖騰?“吸引設(shè)計師,因為經(jīng)過多年的黑體在web上使用,這種風(fēng)格的字體自豪地說“我不是Helvetica。”

所以,?美元一天?的網(wǎng)站的設(shè)計可能會覺得冷和無菌如果設(shè)置在Helvetica,立刻感覺有趣,活潑和獨特的梗概。 當(dāng)然,當(dāng)每一個網(wǎng)站都使用相同的字體,那么新鮮。 但是現(xiàn)在梗概仍然感到興奮。

新公司物色

新公司物色?是一個網(wǎng)站,有很多好的事情在部門類型,但是感覺事情不知怎么沒有一起在設(shè)計和開發(fā)階段之間。

在第一印象上,板襯線?Jubilat?看起來美妙的搭配?開放無?在著名的英雄圖形。 一個溫暖和彎曲板臉加上嚴肅的人文主義使得一些堅實的品牌。 然而,仔細觀察,你會發(fā)現(xiàn)另一個無襯線,?比鄰星新星?,用于導(dǎo)航。 然后下面,Arial用于身體副本。

如果您已經(jīng)導(dǎo)入無開放,那么為什么不使用它的副本嗎? 和它有一個巨大的范圍的權(quán)重。 為什么是一個獨立的無襯線字體家庭所需的導(dǎo)航?

其余的網(wǎng)站似乎是偶然Jubilat、比鄰星新星,開放無和Arial,沒有明確的使用建立了。 這種不一致通常發(fā)生在多個設(shè)計師正在一個網(wǎng)站,但不是在相同的頁面上。?創(chuàng)建一個風(fēng)格指南?在項目的早期通常會避免這樣的問題發(fā)生。

有才華的設(shè)計師顯然是在這個項目上工作,網(wǎng)站還有很多贊賞。 但是沒有一致性,混合四個字體的家庭是很難實現(xiàn)的。

美國股

美國股?使用一個字體,?蒙特塞拉特島?,他的?開源字體?是免費嗎?谷歌字體?。 很多流行欠其相似的兩個最流行的商業(yè)字體的最后十年,哥譚鎮(zhèn),比鄰星新星。 雖然它肯定這兩個字體有一些相似之處,我認為這是其獨特的設(shè)計,有自己獨特的性格。

蒙特塞拉特島的一個缺點是,它沒有一個斜體樣式。 如果你身體復(fù)制在一個沒有斜體的字體,你將最終?人造斜體?。 復(fù)制這個網(wǎng)站非常少,不過,我注意到只有少數(shù)情況下發(fā)生這種情況。 因此,盡管這不是“適當(dāng)?shù)摹卑媸?這不是很明顯的在這種情況下。 無襯線通常處理人造斜體比襯線。

也就是說,設(shè)計師做了一個出色的整體的一個有限的字體樣式。 大寫字母的文本元素組比正常略寬字符間距,這始終是一個不錯的聯(lián)系;慷慨的空白給房間類型的呼吸,和大膽的顏色產(chǎn)生強烈的對比。

挪威的雨

挪威的雨?的網(wǎng)站結(jié)合了經(jīng)典幾何無襯線?Avenir?與?運費文本?。 Avenir被選為"?最喜歡的字體主要設(shè)計師之一?從今年早些時候的一項調(diào)查顯示。 “avenir”這個詞的意思是“未來”在法國-類型設(shè)計的傳奇?Adrian Frutiger?未來背后的幾何原理,添加了一個溫暖、創(chuàng)建Avenir有機聯(lián)系。 毫無疑問這是一個最喜歡的那些真正欣賞排版。

運費文本獨特的斜體減少Avenir的線條對得很好。 事實上,只有貨運的斜體樣式文本家庭是使用這個網(wǎng)站。 這不僅使類型系統(tǒng)一致,但保持?頁面加載時間?下來。

文本的行高在頁腳的感覺?小?緊了。 除此之外,這是一個很好的網(wǎng)站,有很多好的排版升值。

鵜鶘的書

鵜鶘的書?網(wǎng)站功能之間的另一個非常受歡迎的字體設(shè)計師,?布蘭登的?。 這實際上是布蘭登的特殊文本版本的,叫布蘭登文本。 布蘭登的普通版本的設(shè)計更顯示的臉,這意味著它并不適合長段落的文本。 布蘭登文本有一個更高的x坐標(biāo)和優(yōu)化身體副本。

有趣的是,這個網(wǎng)站仍然使用布蘭登文本顯示面臨比身體副本,這是?運費文本?。 布蘭登文本仍然在逃大小看上去不錯,但不是那樣迷人的原始布蘭登怪誕,因為它更緩和了和保守。 貨運文本是最清晰的襯線之一,所以這是一個很好的選擇長段落的文本”?在線閱讀?”一節(jié)。 加上微妙的紙紋理,排版真的讓它覺得你正在閱讀一本書。本文由北京網(wǎng)站建設(shè)公司傳誠信翻譯傳播，轉(zhuǎn)載請注明！

簡單的口香糖

由于web字體,匹配的字體設(shè)計在產(chǎn)品的物理包裝排版在制造商的網(wǎng)站正變得越來越普遍。?簡單的口香糖?選擇?高譚市?隨著品牌字體,保持其身份一致線上和線下渠道。

這個網(wǎng)站也是一個很好的例子,一個字體是如何有時所需要的一切。 通過使用各種權(quán)重的高譚市和設(shè)置標(biāo)題大寫,僅僅只有一個口香糖創(chuàng)造了一個很清晰的層次結(jié)構(gòu)字體。

頁眉和頁腳都是png的標(biāo)志,所以他們失去了清新和可伸縮性的網(wǎng)絡(luò)類型。 使用web字體標(biāo)志并不總是可行的,特別是如果你需要大量的控制字距調(diào)整;然而,一個?SVG圖像?通常比一個PNG在這種情況下,因為它可以擴展,同時保留其酥脆。

結(jié)束

希望上面的示例演示如何大的字體選擇對設(shè)計產(chǎn)生影響。 這里有幾個關(guān)鍵外賣:

• 如果你要使用多種字體,然后開發(fā)一個一致的類型系統(tǒng)和堅持下去。

• 當(dāng)設(shè)置的身體副本,選擇一個字體,定期、斜體、粗體和粗斜體樣式。

• 如果你要去一個受歡迎的字體,試著搭配使用更少的字體讓設(shè)計感覺與眾不同。

• 創(chuàng)建一個在項目早期風(fēng)格指南,以確保一致的使用的類型在你的團隊成員。

• 使用不同的字體,而不是類似的。

• 避免顯示內(nèi)文的面孔。 字體設(shè)計的目的。

• 不要害怕只使用一個字體的家庭。 你可以與不同的權(quán)重建立層次結(jié)構(gòu)和風(fēng)格來自同一個家庭。

• 如果你的商標(biāo)允許,去網(wǎng)絡(luò)類型或SVG圖像,以確保易碎和可伸縮性。

跟上最新的網(wǎng)頁排版

如果你和我一樣癡迷于類型,然后到我這邊的項目?Typewolf?更漂亮的字體設(shè)計的例子。

技術(shù)說明:?這些截圖是在Mac上Safari。?字體渲染?不同瀏覽器瀏覽器,因此您所得到的結(jié)果可能有所不同。

本文由北京網(wǎng)站建設(shè)公司傳誠信翻譯傳播，轉(zhuǎn)載請注明！