| Home | Contant us |

咨詢電話:010-52865996

祝經理李經理

簡單分析好排版,壞排版與優秀排版-北京設計公司

選擇字體是設計項目中非常重要的一個方面。類似Typekit這樣的服務商提供了成千上萬的字體供設計師選擇,各種優質的免費字庫也日臻完美,在選擇字體方面,網頁設計師似乎處于最好的時代。

 

自然,誰都不能否認排版對網頁設計的整體效果有非常明顯的影響。而良好的排版開始于選擇字體。但有眾多的選擇一定就是好事嗎?更多的選擇同時也意味著更多出錯的機會。

 

在這篇文章中,我們找出了一組設計精美的網站,并以這些網站為例從字體選擇對設計效果的整體影響做了一番分析。我們既分析了這些網站的出眾之處,也沒有回避它們的缺陷。當然,排版的優美與否從某種意義上講是非常主管的東西,所以我們也希望讀者能見仁見智地看待我的評判。

 

我們現在就開始吧!

Vesper Hotel

Domaine Display是新西蘭字體設計師Kris Sowersby設計的一種圓潤而優美的字體,Vesper Hotel網站將它與Proxima Nova字體組合運用,達到的效果非常好。盡管Proxima Nova是近年來在網頁設計中被用濫的字體之一,但與使用較少的Domaine Display字體一起使用,還是給人獨特而新鮮的感覺。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

某些品牌將網頁字體用于自己的logo中的做法我也十分欣賞。這讓同樣也是開發者的我覺得,logo也能用CSS處理,而且還能在電子屏幕上顯示且可以隨意縮放。

Dragone

 

這個網站將字體與如此有質感的背景搭配的方式讓我替目前盛行的扁平化設計潮流感到遺憾。Dragone的背景像是一幅油畫,而Playfair Display字體與背景的匹配堪稱完美。

 

該網站也恰到好處地運用了Playfair Display字體的斜體字。經典的無襯線字體Futura也在網頁中出現,這種樸素的字體與華麗的Playfair Display字體彼此平衡,相得益彰。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

但是需要的注意的是,有時候將文字置于圖片上會影響到文字的辨識度。顯然這個網站的網頁設計師也注意到了這一點,他們很精心地調整了背景照片與文字的對比度,以確保文字能有清晰鮮明的顯示效果。

 

我唯一不滿意的地方是將Playfair Display字體用于網站的主體文本中,因為對比度如此強烈的字體不適用于較長的文本。 盡管如此,由于這個網頁中顯示的文字并不算多,所以沒有太嚴重地影響閱讀體驗。

 

Georgia是一種傳統的字體,它與Playfair Display字體有相似的特性,但與Playfair Display相比有更好的可辨識度。

Romain Balcerak

Tiempos Text同樣是由傳奇設計師Kris Sowersby創造的一種字體。它與Hoefler & Co公司開發的一種粗襯線字體slab serif一起被應用在在Romain Balcerak網站的頁面中, 同時出現的還有Colophon Foundry設計的風格奇特的grotesque字體Apercu。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

在一個頁面中使用三種字體可能會顯得雜亂,但Romain Balcerak卻設法使它們看起來很協調。Tiempos Text被用于主標題,Sentinel的斜體被用于次級標題,Apercu則出現在正文中。 

Rails Assets

兩種無襯線字體Adelle Sans和Whitney有著近似的特征:它們都屬于humanist風格的grotesques字體。 同時將這兩種字體用于設計中的做法并不常見。這樣做給人的印象是設計師在這兩種字體之間無法取舍,干脆就全都選擇了。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

如果這么做在排版上是一種錯誤的話,我認為這也只是個小錯誤。因為將Adelle Sans字體用于標題,將Whitney用于其他各處的做法整體上看起來依然比較協調。  這兩種字體本身設計得也很優美,彌補了設計上的缺憾之處。

 

Dollar A Day

 

我想很多人都會認同我的這個觀點:Apercu是目前網頁設計中最“潮”的字體之一。我在業余時間開展的一個項目Typewolf就列出了很多使用Apercu字體的網站。事實上,它是第三受歡迎的網頁字體,至于Typewolf沒有列出的使用Apercu的網站,我更是時刻都會遇到。似乎使用這種字體的網站每天都會增加不少。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

為何Apercu和其他一些“奇特(quirky grotesques)”字體會越來越受到設計師的歡迎?我的推測是Helvetica等傳統字體已經被使用了很多年,因此當新風格字體自豪地宣稱“我不是Helvetica”的時候,會讓人覺得很振奮。

 

拿Dollar A Day為例來說,如果網頁中選擇使用Helvetica字體的話,整個設計都會顯得冰冷無趣,而使用Apercu字體卻營造出生動明快的果。當然,當所有網站都普遍采用一種字體的時候,這種字體也就漸漸失去了它的新鮮感。但就目前而言,Apercu依然風頭十足。

New Venture Scouting


單就字體的選擇和使用來說,New Venture Scouting網站有很多可取之處,但設計和網站有很多可取之處,但涉及和開發方面存在的問題卻使它整體上看來不那么和諧一致。

 

乍看上去,粗襯線字體Jubilat與Open Sans字體的組合使用與主體背景圖片十分相配。豐滿的方塊襯線字體加上清爽的humanist字體給人穩定的感覺。但如果仔細查看的話,就會發現在導航欄中還使用了無襯線字體Proxima Nova。而正文則采用了Arial字體。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

如果你已經導入了Open Sans字體,為何不在正文中也使用這種字體呢?它有很多種字重(weights)可供選擇。為何一定要另外再選一種無襯線字體用于導航呢?

 

網站的其他部分看起來像是 Jubilat, Proxima Nova, Open Sans和Arial等不同字體的大雜燴,幾乎沒有什么條理。當多個設計師分頭設計同一個的網站的不同網頁時,就容易出現這種情況。在項目的早期創建風格指引能有效的防止這種情況。

 

很顯然參與這個網站項目的設計師很優秀,這個網站也有很多可圈可點之處。在同一個網站中使用四種字體是件很有難度的事,如果不能兼顧整體風格,就可能造成效果上的缺憾。

 

United Strands

 

United Strands網站采用了單一的Montserrat字體,它的 開源字體(open-source font)可以在Google Fonts中找到。它大受歡迎的原因應歸功于它與其他兩種在過去十年里頗受追捧的廣告字體的相似性,這這兩種字體分別是Gotham和Proxima Nova。雖然它與這兩種字體風格近似,但我認為作為一種字體,它依然有自己的鮮明特征和獨立性。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

這種字體的不足之處是它沒有自己的斜體字。如果你將一種沒有斜體字的字體用于正文的話,你很可能會得到偽斜體(faux italics)的效果。這個網站中采Montserrat字體的文本并不多,但我還是注意到了這個問題導致的一些缺憾之處。因為網站的排版不是很“正規”,這些缺陷也不會那么明顯。與襯線字體相比,無襯線字體能更好地避免偽斜體的出現。 

 

盡管如此,在只有一種字體可以使用的情況下,這個網站的設計師還是做出了不錯的成績。文本中的大寫字母采用了比略寬于普通水平的間距,這是很不錯的處理方式。充足的“負空間”使字體顯得更為從容,顯眼的色調有效地突出了對比度。

 

Norwegian Rain

 

Norwegian Rain使用了一種經典的無襯線字體Avenir和Freight Text字體。 在前些年的一個調查中,Avenir曾被選為 最受知名設計師喜愛的字體。“avenir” 是法語 “未來”的意思 — 傳奇設計師Adrian Frutiger從Futura字體的設計原則中受到啟發,但又為自己設計的字體注入了活力,于是就誕生了Avenir字體。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

它因此也成為真正熱愛排版的設計師最重視的一種字體。

 

Freight Text字體的斜體風格十分獨特,與風格干凈的Avenir字體搭配十分適宜。 事實上,這個網站也只使用了Freight Text的斜體形式。這樣一來,不僅整體排版風格顯得十分協調,連網頁加載時間也大為降低。只是腳注文本的行間距稍嫌緊湊了一些。除此之外,這算得上是個非常優秀的網站,它的排版值得好好欣賞。

 

Pelican Books

 

Pelican Books網站使用的是另一款同樣很受設計師歡迎的字體Brandon Grotesque。確切地說網站使用的是Brandon Grotesque的“特別文本版”,也叫“Brandon文本”。正常的Brandon Grotesque字體是一種展示字體,意思就是它不適合用于較長的文本中。而Brandon文本則擁有較高的X高度,為文本應用而重新優化過。

 

 

好排版,壞排版與優秀排版【設匯主義】

 

有意思的是,這個網站卻是把Brandon文本版當展示字體使用的,而文本采用的是Freight Text字體。即使放大后,Brandon Text也有不錯的效果,但畢竟不如正常的Brandon Grotesque字體那么優美,因為Brandon Text經過了修改,顯得較為拘謹。

 

Freight Texts是辨識度最高的襯線字體之一,因此將它用于線上閱讀這部分較長的文本中是個極佳的選擇。再配上質感柔和的背景圖片,用戶在閱讀網頁時確實會有“是在讀書”的錯覺。

 

Simply Gum

 

感謝網頁字體,它的出現讓生產商能夠在實物包裝和產品網站上采用相同的排版方式。Simply Gum在自己的品牌中采用了Gotham字體,以期在全線產品中都呈現一致的風格。 

 

 

好排版,壞排版與優秀排版【設匯主義】

 

它的網站也是只有一種字體就達到了良好顯示效果的設計范例。通過使用Gotham字體不同字號的變體和以大寫字母顯示標題,Simply Gum以一種字體營造出層次分明的感覺。標題和腳注中部分的logo是PNG格式,失去了原有的銳度和解析度。

 

在logo中使用網頁字體并不是一個很好的辦法,因為這樣一來就要在調整字距( kerning)上花很多功夫。與PNG格式相比,SVG 圖片更有優勢一些。

 

總結

 

希望我上面列舉的這些例子能讓你更加理解字體選擇對整體設計效果的影響。

 

我還有幾點建議要說:

 

如果你打算同時使用多種字體,一定要制定出確保風格一致的原則,并在設計中堅持這些原則。選擇正文文本字體時,最好選擇正常,斜體,粗體和粗斜體格式都具備的字體。

 

如果你選用的是一種較為流行的字體,可以試著給它匹配一種不常用的字體來平衡。在有多個設計師參與的項目中,在項目開始前要制定“項目風格指引”以保證設計整體風格的一致。

 

盡量采用風格相反而不是接近的字體。不要將展示型字體用于網頁正文中。使用專用字體。不要害怕在網站中只用一種字體。你可以通過改變同一種字體的字重來造成層次感。如果條件許可的話,在logo中使用SVG格式的圖片以保證銳度和可縮放性。

備注:截圖取自在Mac上運行的Safari瀏覽器。字體渲染的效果可能因瀏覽器的不同而存在差異。

 

【設匯主義】

設計,不僅需要非同一般的創意,更需要默默的積累與學習。設匯主義,匯聚與設計有關的一切,從行業精英的經驗心得,到最實用最解渴的設計技巧,從國際前沿的設計新動向,到設計的歷史與趣事,“設匯主義”專欄內容將為你提供源源不絕的靈感,助你早日鉆破束縛的繭,化為五彩斑斕的蝶!

翻譯:劉海靜
 

關鍵詞:

觀點相關文章

熱門標簽

  • 當贏
  • 網落
  • 析站點
  • 工業大學
  • 樂高
  • 浪潮
  • manue
  • 最具
  • 月愛月子會所
  • 無法通
  • 設計 畫冊設計 logo
  • 潛意識
  • fdefde
  • PICC畫冊設計
  • 新品牌
  • 會議
  • 唱片封面設計
  • 原理
  • 酒包裝設計
  • 返回頁頂 | 返回首頁

    新客戶咨詢電話

    400-808-0959

    北京靈智飛揚廣告有限公司 版權所有 |

    Copyright @ 2005-2015 Smsrt-rise Design, All Rights Reserved 網站RSS地圖 百度新聞 http://www.5397858.live

    七位数坐标 体彩大乐透玩法介绍 期货股票配资网 期货配资公司推荐 安徽快三有多少种玩法 股票行情002497 11选5吉林 江西时时彩一天几期 快乐扑克3开奖直播 河河北北十一选五查询 上海11选5计划预测