將圖示與字型匹配的基本指南

關於如何配對圖示和字型以建立一致的視覺語言的完整指南。

選擇正確的圖示集來補充特定字型對於保持專案中的視覺一致性至關重要。 這確保了所有元素協同工作,以建立一個可識別的品牌,並改善整體

以下是你需要知道的,以及如何讓您做出正確的選擇。


早期的考慮

在選擇與字型配對的圖示時,我們應該考慮一些早期因素,這些因素將幫助我們做出最佳決定。

  • 目的和背景: 考慮專案的受眾、資訊和整體基調。 字型和圖示都應與這些想法保持一致,以有效地傳達預期含義。
  • 風格和美學: 評估專案的視覺風格,並尋找與這種美學相匹配或補充的字型和圖示。
  • 可擴充套件性和適應性: 評估專案的範圍,以便圖示可以根據需要適應各種環境, 您可能需要具有多種樣式甚至不同重量的圖示,就像字型一樣。

在選擇與字型匹配的圖示時,考慮與該特定字型相關的設計原則是有用的,因為圖示有很多相似之處。 為此,讓我們來探索一個關於如何根據標準字型分類及其解剖結構選擇正確圖示的小指南。

沒襯線字體(Sans serif)

不襯線字型的特點是外觀乾淨,經常出現在數字介面、標牌和其他專案中。

伴隨無襯線字型的圖示應該乾淨、現代和直截了當,基於極簡主義和可讀的形狀構建。

我們一直將 Ultimate 定義為圖示百科全書,不僅因為它有大量的符號,還因為它具有中性外觀和各種風格(Light、Regular、Bold、Duotone和Color),所有這些都可以與無襯線字型完美契合。

Ultimate和Open Sans之間的相似之處

與Ultimate結合的絕佳字型選擇是Open Sans,這是一種具有寬反形式和高可讀性的人文主義字型。 但不僅只有一個正確答案,還有許多替代方案可以與Ultimate圖示完美配對,如NotoLato 或Gill Sans

Ultimate和Open Sans用於儀表板

一個類似的圖示集,但具有更簡單、更永恆的方法,將是 Core。 這套有四種風格(Line、Solid、Duo和Flat),由於其巨大的適應性,是與無襯線字型結合的最佳選擇。

Core和Work Sans之間的相似之處

核心圖示可以很容易地與像Work Sans 這樣的字型配對,該字型基於早期怪誕字型,具有十種不同的權重,提供與Core相似的靈活性。 如果這不是你的那杯茶,你也可以看看InterRobotoNeue Haas Grotesk

Core和Work Sans用於導航選單

但是,如果您需要一個尺寸更極端的圖示集,Micro是最自然的選擇。 它遵循與核心相同的形式特徵,但網格更小,因此細節級別較低,可讀性更高。

Micro和Montserrat之間的相似之處

在這種情況下,像 Montserrat 這樣的更幾何字型將是一個很好的配對選擇,特別是由於其寬闊而寬敞的字母。 再說一遍,如果您正在尋找替代品,不要錯過PoppinsRalewayGotham等字型,它們都具有定義Micro的許多形式特徵。

Micro和Montserrat用於UI元件

如果你正在尋找有個性的東西,還有更多的選擇。 如果您想使用具有圓形兩端(或至少具有大量曲線)的字型,Flex 因其有機、優雅和寬敞的形狀而不費吹灰之力。

Flex和Kodchasan之間的相似之處

Kodchasan 是Flex的一個令人驚訝的合適舞蹈夥伴,幾乎就像這兩個元素都是根據相同的施工指南構建的。 但由於Kodchasan有點像顯示字型,你可能想嘗試更中性的替代品,如RubikNunitoNoway Round

Flex和Kodchasan被用於電子商務應用程式

另一方面,如果您要使用具有更工業和建築外觀的無襯線字型,Sharp 將是最合乎邏輯的選擇,因為它具有幾何、野蠻和靜態結構。

夏普和太空怪誕之間的相似之處

殘酷的圖示集需要一個殘酷的字型,那就是Space Grotesk,一種獨特但完全可讀的字型,具有高科技外觀。 由於它可能不是一個萬無一失的組合(它從來都不是,因為設計師總是負責讓它發揮作用),我們也建議您 DM SansArchivoNeue Machina

Sharp和Space Grotesk用於加密貨幣網站

襯線字體(Serif)

襯線字型強調傳統的工藝和形式,通常用於書籍、報紙和雜誌的正文文字。

與襯線字型搭配的圖示應該傳達傳統和優雅,因此精緻的細節和適度的對比度將非常合適。

按照之前描述的相同邏輯,Ultimate 和 Core 仍然是與襯線字型結合的完美有效選項,因為它們具有極大的多功能性。 在這種情況下,目的是將注意力從圖示上移開,以利於整個專案。

Ultimate和EB Garamond之間的相似之處

就Ultimate而言,像EB Garamond 這樣的老式襯線字型將是一個很好的選擇,可以傳達這種傳統感。 但即使風格似乎更有限,我們仍然有很好的選擇,可以幫助我們實現我們試圖溝通的可靠性,如CCormorant、 Cardo 或Sabon

Ultimate和EB Garamond用於時事通訊
Core 和 Merriweather 之間的相似之處

至於Core,像Merriweather這樣的過渡襯線字型似乎更合適,因為它具有更高的對比度和更對稱的設計,創造了一種組合,儘管它很嚴肅,但可以被認為是現代的。 和往常一樣,快速檢視DomineSpectralSignifier,以防您正在尋找替代方案。

Core和Merriweather用於搜尋欄

但我們也有套裝,這些套裝不僅可能更合適,而且最初被設想為與襯線字型配合使用。 就像 Platinum 一樣,它是專門為高階品牌設計的,它的特點是使用細筆觸、凹曲線和尖弧,使其外觀優雅而經典。

鉑金和博斯卡之間的相似之處

Platinum是一個比乍一看更通用的圖示集,但像Boska這樣的didone字型因其固有的複雜性而完美匹配。 如果你想遵循這個高階概念,你可能還想看看PrataMarcellusDomaine

Platinum和Boska用於客戶演示

Guidance 跟 Platinum 很是相似,但它使用凸曲線而不是凹曲線,這些曲線與直線之間存在更大的對比。 此外,這是一套用於標牌專案的套裝。 你永遠不知道它什麼時候會派上用場,特別是考慮到它是完全免費的。

Guidance和IBM Plex Serif之間的相似之處

在這裡,我們應該尋找對比度更小、結構更統一的字型,既現代又優雅,就像 IBM Plex Serif 一樣。 像 Arbutus Slab 這樣的Slab襯線字型或像 AliceWoodland 這樣的有機設計也可以是一個很好的選擇。

指導和IBM Plex Serif用於標牌系統

等寬字型(Monospaced)

等距字型具有固定寬度的字元,這就是為什麼它們被廣泛用於編碼,並且通常與數字世界相關聯。

與單行距字型一起使用的圖示應反映簡單性和精確性,具有嚴格的構建指南和技術外觀。

在這裡,必須再次提到 Sharp ,因為它基本上是一套旨在實現上述技術外觀的套裝。 像Core一樣,它有四種不同的風格(Line、Solid、Duo和Flat),這讓我們有更多的選擇自由。

Sharp和Fira Mono之間的相似之處

我敢說,任何等距字型都是與夏普結合的絕佳選擇,但 Fira Mono 和任何其他字型一樣是一個好的開始,特別是考慮到其傾斜的結尾。 但根據您的個人喜好,還有很多其他選擇,就像 Space Mono 或 Spline Sans Mono 一樣。

Sharp和Fira Mono用於科技部落格

但如果你真的想增強這些字型的復古未來主義外觀,你可以選擇像 Cyber 這樣的一套。 這是一個非常特別的套裝,嚴格使用直線和銳角,為那些希望在個性和品牌認可度方面更進一步的人賦予圖示一種非常獨特的觸感。

Cyber和Kode Mono之間的相似之處

適合網路的等距字型需要更多的個性,這就是為什麼 Kode Mono 似乎是一個明顯的選擇,具有這些傾斜的角度和複雜的細節。 檢視 Azeret Mono 以獲得更中性的選擇,並檢視 Share Tech Mono 以獲得更復古的東西。

用於名片的Cyber和Kode Mono

書寫體(Script)

書寫體模仿手寫字元,它們主要用於喚起個性感,使其在邀請函和賀卡中很受歡迎。

書寫體而言,圖示應模仿手寫字母的流暢性和有機風格。

Freehand 是一個完全手繪的溫暖和個性化的圖示集。 儘管這套圖示很獨特,但它仍然有超過10,000個圖示,所有這些圖示都是完全一致的。 因此,如果您正在書寫體,您絕對應該考慮使用Freehand圖示。

Freehand和Waiting for the Sunrise之間的相似之處

書寫體時,Freehand提供了更多的自由,因為我們基本上正在尋找一種更個人化的觸感,這種觸感可以在任何手寫字型中輕鬆找到,如《Waiting for the Sunrise》中的字型。 您仍然可以檢視 Caveat 或 Indie Flower 來考慮其他選擇。

Freehand 和 Waiting for the Sunrise 用於社交媒體帖子

如果您不想同時使用手動字型和手動圖示顯得過於多餘,我們也有一套像 Flex 這樣的字型,其筆觸讓人聯想到書法,但以一種更微妙和優雅的方式。 就像Core和Sharp一樣,它有四種風格(Line、Duo、Solid和Flat),以獲得最大的適應性。

Flex和Delius Unicase之間的相似之處

像 Delius Unicase 這樣的書法字型似乎更適合像Flex這樣的圖示集,以突出它們的友好和有機外觀。 如果您對使用更不完美的筆觸感興趣,您也可以檢視 Sacramento ,以獲取更接近經典書法或Itim的東西。

Flex和Delius Unicase用於健康網站

遵循同樣的推理,但外觀更加卡通化和細緻,Plump 是搭配更豐滿甚至更天真的指令碼字型的完美選擇。 而且,再一次,它還有四種風格(Line、Duo、Solid Flat),以提供更多的靈活性。

Plump和Hachi Maru Pop之間的相似之處

豐滿的圖示與更卡通和天真的手繪字型非常匹配,就像 Hachi Maru Pro 一樣,這有助於實現有趣和友好的設計。 如果你對這種休閒和古怪的風格感興趣,你可能也對 Mali 或 Klee One 等字型感興趣。

Plump和Hachi Maru Pop用於食譜應用程式

展示字體(Display)

顯示字型設計用於大尺寸,將創造力放在可讀性之上,並用於徽標、海報和任何吸引注意力至關重要的地方。

用於顯示字型的圖示主要取決於字型本身及其獨特性。 但是,總的來說,他們必須大膽和富有表現力。

例如,如果你想使用像 Caprasimo 這樣的特別胖的字型,像 Plump 這樣的一套可能也是最好的伴奏。 這兩個元素之間的形式相似性非常明顯,總體而言,它們傳達了相同的感覺。

Plump和Caprasimo之間的相似之處
Plump和Caprasimo用於Instagram Stories

如果該專案需要像 DotGothic16 這樣的畫素藝術字型,我們有一個令人愉快的圖示集,名為 Pixel 。 這種明顯的組合可以讓你實現復古和懷舊的外觀,不僅突出了專案的視覺方面,還突出了品牌價值和整體基調。

Pixel和DotGothic16之間的相似之處
Pixel和DotGothic16用於書籍封面

另一方面,如果是工業和野蠻主義字型,如 Chakra Petch,你想引入該專案,Cyber (有兩種風格:Line和Duotone)將是它的最佳圖示集。 個性越大,整個專案就越獨特。

Cyber和Chakra Petch之間的相似之處
Cyber和Chakra Petch用於宣傳海報

如果您正在尋找更古怪和休閒的東西,Stickies 是一個非常適合與具有相似魅力的字型相結合的圖示集。 就像 Modak 一樣,它使用胖形狀和薄的對立面來建立獨特的體積設計,進一步突出圖示的外觀。

Stickies和Modak之間的相似之處
Stickies和Modak用於音樂節海報

直接在字型裡建立圖示

也可以根據字型直接建立一組圖示。 這需要大量的技術知識,我們可能會在未來的文章中更多地探討它,但有一些偉大而成功的專案可以向我們展示這個選項提供的和諧。 比如科隆-波恩機場( Köln-Bonn Airport )的標牌專案或 Daniel Utz 為 Netto typeface 的圖示。

科隆-波恩機場圖示
網路字型圖示

總結

總之,字型和圖示是同一語言的一部分。 兩者都有相似的施工指南,對於實現視覺和諧至關重要。透過瞭解這些元素的基本特徵,設計師可以仔細整合它們,以創造具有影響力和永恆的設計。

參考來源:
關鍵字:
  • 2025年度的18本最佳字型排版書籍

    字型排版(Typography)是設計的無聲英雄。 它可以成導致你的專案是成功或是失敗,一言不諺地傳達情感,並引導觀眾的眼睛精確到你想要的地方。 但是,掌握字型排版不是一蹴而就的——它需要學習、實踐和向那些專業的設計大神學習。
    2025.03.19 Wednesday
  • 激發你自己靈感的4個精美旅行部落格

    如能夠將個人的故事與資訊的內容相互結合,這將可能成為一個偉大的旅遊部落格。 無論您是經營一家精品旅行社還是分享獨立個人冒險旅程,精心設計的旅遊部落格,並以激發行動的方式來展示目的地,這都可以幫助您與讀者建立信任。 讓我們來探索4個特殊的旅遊部落格,這些部落格展示了精心的設計和引人入勝的內容是如何協同工作,最終建立一個出色的旅遊部落格網站。 出眾的旅遊部落格是如何造就的? 一個有效的旅遊部落格融合了深思熟慮的設計和營銷元件,以吸引讀者,並讓他們可以獲取更多內容和得著。 以下是一些能使您的網站脫穎而出的元素。 一個令人難忘的部落格名稱 名稱通常是人們首先注意到您的品牌,因此製作一個能夠表現出網站內容的名稱很重要的。 一個朗朗上口的旅行部落格名稱,可以有創意,易於記憶,並且兼顧內容主題。 無論是與旅行相關的詞語還是特定於易懂的詞語,選對了的名稱將會創造一個強大的品牌標誌,並幫助您的網站能夠易於停留在讀者的腦海中。 見解獨到和原創的內容 許多旅遊博主透過簡單地建立通用列表來寫他們實際上從未去過的地方,希望在搜尋結果中成為趨勢。 這導致大量重複相同資訊的文章集合,並可能誤導了讀者,導致他們看到不相關的內容。 為了將您的部落格與這些基本指南區分開來,請分享個人經驗、內幕旅行提示和人跡罕至的建議。 原創的見解,和帶領讀者了解現實中您真實所看到的世界,可以為您的品牌增加可信度。 精於特定範疇 精於特定範疇的旅遊部落格(專注於一個非常具體主題的部落格)可以吸引想要專業建議的忠實讀者。 如果您的特定範疇沒有太飽和,您可以迅速將自己確立為該領域的專家。 擁有明確而特定的範疇可以定義您在行業中的品牌,並建立您的精闢的內容。 例如,一個專門用於徒步旅行的部落格可以專注於介紹輕量級的裝備和如何去實踐長途旅行。 透過選擇一個專業的見解和實踐,該您的讀者能夠清楚地知道從您的帖子中,可以得到幫助和得著。 精美吸引的視覺設計 旅遊部落格圍繞著如何展開去看和體驗世界,因此高品質的影象、簡潔的版面和精美的排版,可以為訪問者營造出真實的沉浸式體驗。 您還可以新增互動式的地圖和關相的影片,讓人們繼續閱讀和可以與您的內容互動。 最佳化搜尋引擎和社交媒體 運用搜尋引擎最佳化(SEO)技術來優化您的旅遊部落格,例如在標題中新增關鍵字和使用適當的URL結構, 這將有助於您的網站接觸到正確的受眾,並在搜尋引擎結果中得到更高的排名。 為了擴大您在社交媒體上的影響力,您可以新增分享按鈕,以鼓勵訪問者在 Instagram、Facebook 和 X(以前的Twitter)上分享您的帖子。 選擇一個具有 SEO 功能並能夠與外部工具整合的部落格平臺,以便於搜尋引擎的最佳化和社交媒體的共享。 旅遊部落格的好處 除了成為創意的旅遊指南之外,還可以成為個人品牌的成長、職業發展和文化理解的機會。 以下是維護旅遊部落格的一些好處。 記錄和分享個人的經歷和體驗 記錄您最喜歡的目的地和實用技巧,為其他人建立資源,同時也能在線上儲存您的難忘的經歷和回憶。 人們重視第一身的經歷和體驗,因為它們是真實和相關的,這些經歷和體驗使您的部落格成為旅行者值得信賴的指南。 賺取收入的潛力 透過不懈的努力,經營旅遊部落格也可以變成一個的收入來源。 聯盟營銷、贊助帖子和數字產品的銷售(如電子書和行程)等機會,可以讓你把你的興趣和熱誠轉化成為收入。 有了足夠的流量和曝光率,您還可以與品牌或旅遊局合作,達到雙贏的局面。 擴闊眼界 旅遊部落格鼓勵您更深入地瞭解您所到地方的歷史和傳統,研究和撰寫關於不同目的地的文章可以擴展您對多種文化和不同習俗的認識,您可以與讀者分享您每一次的豐富體驗和寶貴的經歷。 彈性的遠端工作 旅遊部落格最吸引人的好處之一,是可以讓你自由地工作。 只要你有一臺膝上型電腦和網際網路連線,你就可以在世界任何地方工作。 這種靈活性允許您去探索遙遠的地方,拜訪親人,並按照自己的節奏去建立內容。 4個優秀的旅遊部落格範例 1. It’s Worth Seeing […]
    2025.03.06 Thursday
  • 傾斜實驗型別3.0突破了排版的極限

    傾斜實驗型3.0探索排版、技術和社會評論的交叉點,透過人工智慧生成的字型、可變字型和實驗技術的大膽組合,挑戰傳統設計規範。
    2025.02.20 Thursday
  • IIT 建築學院的全新品牌重塑

    新品牌是由 Span 創造的,他的任務是以吸引潛在學生和在校學生的方式傳達這段歷史。 正如你對建築學院所期望的那樣,新品牌都是簡潔的線條和光滑的邊緣。 新外觀的骨幹是新發布的 Neue Galerie,這是Mies van der Rohe 的 Allzweck 字型的數字復興。 根據 Mies van der Rohe 的個人草圖,Neue Galerie 由 bBox Type 鑄造廠建立,也用於新徽標。 在漂亮的字型配對中,The Future也用於增加能量。
    2025.02.16 Sunday
  • Miiro Hotels 的新品牌設計及圖案元素設計

    Miiro Hotels 是一家位於歐洲幾個城市的小型家族酒店集團,委託我們為位於巴塞羅那Born區中心的新酒店“Borneta”建立身份、圖形語言和應用程式。 受社群傳統和附近歷史市場的啟發,該專案結合了現代性和記憶,提供了深深植根於當地歷史的真實體驗。
    2025.02.14 Friday