除了傳達資訊之外,我們的字體還體現了我們品牌的精髓 - 清潔、現代和專業的和諧融合。在本節中,我們不僅會探討我們所使用的字型,還會探討指導字型應用的原則,以確保在每次互動中,我們的品牌都能得到完美且具影響力的呈現。
我們的排版系統專為多用途而設計,提供流暢的指引,可適用於各種媒體;每種通路都擁有獨特的規格,並根據我們的整體系統量身打造,以達到連貫且量身打造的品牌表現。
Simplon
我們的主要調色板建立了我們大部分的創意,並應代表任何作品中最強烈的色調。
標準
Norm 子字型是我們的主要字型,共有 8 種重量。
單聲道
雖然有全套的單色字元,但只鮮少用於數字。
機器人
Roboto 用於 Simplon 無法使用的情況。如果系統字體是絕對必要或必需的,Roboto 是可以接受的備用字體。
Font Awesome Pro
無障礙。必須注意的是,這種字型不能取代我們的專用圖示系統;相反地,它應該應用在必須使用文字解決方案的情況。
利用本頁面或Font Awesome 網站,可以輕鬆找到並複製貼上圖示字元。
Font Awesome Pro 包有幾種不同的重量。我們只使用 Regular 或 Solid,絕不使用 light,因為這些字元僅用於較小尺寸的表格和圖表。
字體系列包含 100 多個字元。以下是獲准在圖表中使用的幾個字元。
Font Awesome 正規
實體字型
顏色
用法與應用
請參閱以下的使用與應用範例,我們將介紹使用字型與排版系統的正確與錯誤方式。在我們的設計節奏中,內容和排版的協作就像一場協調良好的舞蹈。這些規則指導視覺字型和內容設計如何協同運作,確保它們相輔相成,完美融合可讀性、美學和品牌識別。有些視覺上的挑戰可能會透過內容上的改變來解決,而有些內容上的挑戰則需要視覺上的解決方案。
雖然您會遇到概念性的指導,但由於我們品牌所涵蓋的媒體多樣且變化多端,因此我們故意不提供確切的規格。印刷或網頁設計等部門會根據這些指導原則建立自己的規格,以符合各媒體的最佳實務。
在大尺寸下使用我們的 Simplon Norm 粗體字型,讓我們英勇有力的陳述產生巨大的影響力。
在大尺寸下使用我們的 Simplon Norm 粗體字型,讓我們英勇有力的陳述產生巨大的影響力。
給大標題足夠的清晰空間。讓訊息自己說出來,不要被不相干的圖形或其他內容所妨礙。
大型、大膽、有影響力的陳述應緊湊;最多 3-5 個字。標點符號可用於句號或問題,以創造戲劇效果。標點符號和句子的語氣應該一起使用,不要錯配。
有時候,我們需要做一個不是 3-5 個字的有力聲明。使用一般重量的字體,但保留大字體、間距和標點符號及套用規則。
標題和影響力聲明的字體較大,因此需要比正文更緊密的行高。建議行高與字型大小的相對比例為 100%,但也可以依媒體做調整。只要避免拉長行高,或壓縮行高至影響力文字的下行與上行接觸點即可。
標題和影響力聲明的字體較大,因此需要比正文更緊密的行高。建議行高與字型大小的相對比例為 100%,但也可以依媒體做調整。只要避免拉長行高,或壓縮行高至影響力文字的下行與上行接觸點即可。
在較小的尺寸中,請勿使用粗體字,因為它會隨著尺寸變小而產生可讀性問題。我們確實需要讓內容保持高度的對比和秩序,因此請使用大小、顏色和權重來讓頁面閱讀舒適。
不要使用影響處理來說明顯而易見的事情。使用大標題、小標題或接近標題來保持這些區塊的上下文。
下一節
等級制度很重要
不可能所有東西都是最重要的。使用排版來引導使用者,讓作品成為快速掃描或舒適的深度閱讀。
副標題可快速閱讀與掃描
不要試圖在類似標題的副標題中說太多。給予使用者胡蘿蔔或麵包屑,讓他們選擇閱讀更多內容。使用整篇文章的標題作為故事的里程碑。如果使用者捲動整個頁面或掃描一個頁面,但只閱讀標題,他們會了解故事的基本前提嗎?他們能夠快速找到與他們有關的內容嗎?
副標題應遵循與主標題相同的標點符號和大小寫規則。
在某些情況下,您需要做出次要或嵌套陳述。對這些副標題使用相同的原則。就像較具影響力的聲明一樣,使用顏色、重量和大小在您的文章中創造足夠的對比和層次。這不僅是因為它看起來美觀,也因為它更容易閱讀。
等級制的重要性
使用品牌工具箱中的所有工具,讓故事大放異彩。
乾淨的類型顯示我們的專業。
- 線條高度- 線條高度可能會有所不同,在特定的媒介上也需要有所不同。為了讓正文字型平易近人、舒適易讀,請從字型大小的 130% 開始,切勿超過 155%。標題文字可能會更緊,但正文字體絕對不能超過 100%。技術性文章可能需要在有限的空間內提供大量內容,而行銷文章則應該始終傾向於清晰、開放,而不是內容過量。
- 段落高度- 與上述類似,您需要確保這適用於內容和媒介。因此,請將高度設定在字型大小的 100% 到 140%。
- 內嵌式樣- 內嵌式樣可以在較大的文字中加入強調或焦點。請謹慎使用這些技巧,並嘗試只強調關鍵的幾個字。
如果我們需要強調整個思想或句子,請嘗試換行。
使用字體顏色創造舒適的閱讀體驗,並使用顏色喚起行動。切勿使用行動顏色作為標題。將藍色用於動作和連結,避免用於靜態類型。請務必參閱下列存取指引,以瞭解正確的字型對比要求。
無障礙
為了確保盡量多的客戶擁有一致的體驗,我們始終希望盡可能保持無障礙。其中一個方法就是遵守 WCAG 2.1 有關文字對比的指引。
下面您會看到作為背景顏色的主要調色板的最小可接受對比度。疊加會顯示我們調色板中不同的可接受文字顏色。我們所說的「最小值」是指我們在符合 AAA 標準的淺色背景上,找出可使用的最淺文字。這種顏色包括色調組中任何較深的顏色都可以使用。反之亦然,深色背景和淺色文字都可以使用。
請注意,如果文字顏色以粗體顯示,則只能達到 AA 級標準,在小字體、輕字體的應用中應避免使用。
我們只顯示建議的文字顏色。不建議使用紫色、橙色、黃色和茶色作為文字的點綴。
中性色
您的文字可以比下列任何一種色調更深。
海軍
您的文字可以比下列任何一種顏色更淺。
藍色
您的文字可以比以下任何一種色調更淺或更深,這取決於我們使用的是調色板的哪一半。