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

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

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

黃昏的酒店

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

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

dragone

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

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

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

羅曼Balcerak

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

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

Rails的資產

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

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

美元一天

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

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

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

新公司物色

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

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

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

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

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

美國股

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

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

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

挪威的雨

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

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

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

鵜鶘的書

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

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

簡單的口香糖

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

這個網站也是一個很好的例子,一個字體是如何有時所需要的一切。 通過使用各種權重的高譚市和設置標題大寫,僅僅只有一個口香糖創造了一個很清晰的層次結構字體。

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

結束

希望上面的示例演示如何大的字體選擇對設計產生影響。 這里有幾個關鍵外賣:

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

• 當設置的身體副本,選擇一個字體,定期、斜體、粗體和粗斜體樣式。

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

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

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

• 避免顯示內文的面孔。 字體設計的目的。

• 不要害怕只使用一個字體的家庭。 你可以與不同的權重建立層次結構和風格來自同一個家庭。

• 如果你的商標允許,去網絡類型或SVG圖像,以確保易碎和可伸縮性。

跟上最新的網頁排版

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

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

本文由北京網站建設公司傳誠信翻譯傳播，轉載請注明！