網(wǎng)頁設(shè)計(jì)如何選擇字體。

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

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

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

黃昏的酒店

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

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

dragone

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

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

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

羅曼Balcerak

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

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

Rails的資產(chǎn)

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

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

美元一天

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

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

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

新公司物色

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

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

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

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

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

美國股

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

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

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

挪威的雨

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

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

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

鵜鶘的書

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

有趣的是,這個網(wǎng)站仍然使用布蘭登文本顯示面臨比身體副本,這是運(yùn)費(fèi)文本。 布蘭登文本仍然在逃大小看上去不錯,但不是那樣迷人的原始布蘭登怪誕,因?yàn)樗徍土撕捅Ｊ亍?貨運(yùn)文本是最清晰的襯線之一,所以這是一個很好的選擇長段落的文本”在線閱讀”一節(jié)。 加上微妙的紙紋理,排版真的讓它覺得你正在閱讀一本書。本文由北京網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)翻譯傳播，轉(zhuǎn)載請注明！

簡單的口香糖

由于web字體,匹配的字體設(shè)計(jì)在產(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在這種情況下,因?yàn)樗梢詳U(kuò)展,同時保留其酥脆。

結(jié)束

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

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

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

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

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

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

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

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

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

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

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

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

本文由北京網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)翻譯傳播，轉(zhuǎn)載請注明！

分享題目：網(wǎng)頁設(shè)計(jì)如何選擇字體。
文章轉(zhuǎn)載：http://bm7419.com/news/78885.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、建站公司、小程序開發(fā)、品牌網(wǎng)站制作、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)