15種最佳Google字型及使用技巧

15種最佳Google字型及使用技巧

有1052種不同的Google字型系列可免費使用(在撰寫本文時)。這是很多選擇!因此,難怪您需要幫助在大海撈針中找到最好的Google字型列表。

選擇一種字型不僅僅是一種審美選擇——它可以對您網站的跳出率和轉化率產生重大影響,尤其是當您選擇一種難以閱讀的字型時。因此,花一點時間為您的網站選擇完美的Google字型系列是值得的,而不是使用您遇到的第一種字型。

  1. 為什麼要使用Google字型?
  2. 在Google字型中尋找什麼
  3. 10款最佳Google字型
  4. 更多字型 + 後起之秀
  5. 如何建立最佳的 Google 字型組合
  6. 在WordPress上使用Google字型的最佳實踐
  7. 如何將Google字型新增到WordPress

為什麼要使用Google字型?

網際網路上有數以千計的字型庫,究竟是什麼讓Google Fonts如此特別?

谷歌字型目錄

谷歌字型目錄

首先,它是免費的!最重要的是,谷歌字型由谷歌維護和交付,這意味著它們是安全的。當然,有很多狡猾的網站可以下載免費字型,但誰知道你還能從這些檔案中獲得什麼?

此類網站上的字型質量有時也會受到質疑。谷歌精選了一千多種優質字型。如果您不是對排版有完美眼光的平面設計師,那麼它是一個更安全的選擇。

其次,沒有複雜的許可限制。 Google Fonts目錄中的所有字型都是開源的,可免費用於商業專案。

您可以將它們下載或嵌入到您的站點中,您甚至可以在列印專案中使用它們。儘管沒有統一的許可證,但儲存庫中的大多數字體都使用Open Font License

Open Font許可證

Open Font許可證

其他“免費字型”很少是免費的,並且帶有一大堆令人困惑的許可限制,如果您犯了錯誤,可能會讓您陷入困境。不幸的是,谷歌字型沒有同樣的包袱。

最後,使用Google Fonts API可以毫不費力地將Google Fonts新增到您的網站。或者,您可以單獨下載它們並通過FTP/SFTP將它們上傳到您的網路伺服器。

雖然谷歌字型往往很簡單,而且可能不像一些付費字型那麼華麗,但它肯定勝過預裝在主要作業系統中的網路安全字型,這些字型每個人都見過數千次。

在Google字型中尋找什麼

如果您在設計網站時應該學習一件事,那就是如何選擇適合您專案的Google字型。好的排版將成就或破壞您的網站。

這似乎是一個不重要的細節,但它可能是某人提前離開您的網站或留下來成為忠實讀者或客戶之間的區別。

選擇正確的字型是圖形設計師花費數年時間掌握的東西,但請記住一些原則,您可以為您的網站選擇一種漂亮的字型。

  • 適合您的品牌:這可能是最關鍵的方面。最好的網站都有一種字型,可以展示他們的個性,同時仍然具有可讀性並適合當前的設計。例如,Apple和Iron Maiden使用截然不同的字型,但它們都適合自己的品牌。
  • 可讀性:第二個最重要的原則是可讀性。滑稽的幻想或蹩腳的字型當然可能適合您的品牌,但如果您的訪問者無法閱讀,他們會很快離開。因此,您的字型必須專業且清晰。
  • 字型分類:雖然有數百種對字型進行分類的方法,但主要有五種型別:襯線字型、無襯線字型、指令碼字型、等寬字型和裝飾字型。指令碼或襯線字型傳達優雅,而等寬字型在科技網站上很受歡迎。瞭解這些分類將為您的搜尋提供更好的起點。
  • 顯示或正文字型:顯示字型適用於大尺寸、標題或列印專案。為了獨特的設計,它們可以承受得不那麼清晰。正文字型的主要指令是可讀性,因為它們將構成您網站的大部分內容。
  • 情緒和意圖:就像任何藝術作品一樣,藝術家為特定的情緒和設定設計字型。大多數字體都會附有關於它們是如何設計的以及如何使用它們的註釋。使用它們來決定字型是否適合您的專案。

10款最佳Google字型

那麼,當其中很多都是主觀的時,您如何制定最佳Google字型列表?我們不希望整個列表有偏見,因此我們將使用資料來構建最流行的Google字型列表。

我們將使用Google Fonts分析來相信大眾的智慧。擁有超過50萬億的總字型瀏覽量,谷歌只有一點點資料可供提取。

然後,我們將超越原始流行度數字,選擇一些正在流行的新興HTML字型。準備好?讓我們潛入吧!

1.Roboto

Roboto

Roboto

作為長期執行的#1位置的字型, Roboto是Christian Robertson的無襯線產品,谷歌開發為Android的系統字型。它現在非常受歡迎,有12種不同的風格,並多次出現在Google Fonts的分析中。

例如,Roboto是最流行的字型。但是Roboto Condensed也是第六大流行字型,而Roboto Slab也出現在第12位!

2.Open Sans

Open Sans
Open Sans

Open Sans Condensed是一種高度易讀的字型,受Google委託並受到其前身Droid Sans的啟發。 Google在其某些網站及其印刷和網路廣告上使用Open Sans。 Open Sans Condensed是它的姊妹字型,也是Google Fonts上第13位最受歡迎的字型。

3. Lato

Lato
Lato

Lato是Łukasz Dziedzic的另一個受歡迎的選擇。它的設計背後有很多故事,平衡了相互衝突的目標,從而產生了一種獨特的、輕量級的sans-serif字型。

4. Montserrat

Montserrat

Montserrat

Montserrat是Julieta Ulanovsky的一種無襯線字型,她住在布宜諾斯艾利斯的同名Montserrat社羣。從細線到粗體的18種不同風格,您有相當多的選擇。

5. Oswald

Oswald

Oswald

Oswald是一種無襯線字型,最初由Vernon Adams開發。它的設計考慮到了獨特的另類哥特式風格,其大膽的筆觸體現了這一點。

6. Source Sans Pro

Source Sans Pro

Source Sans Pro

Source Sans Pro是一種為Adobe建立的無襯線字型,也是Adobe的第一個開源字型。由Paul Hunt製造,其淺色字型使其乾淨易讀。

7. Slabo 27px/13px

Slabo

Slabo

Slabo是由Tiro Typeworks的John Hudson開發的襯線字型。此字型專為某些尺寸而設計 – 27畫素或13畫素,具體取決於您的需要。

8. Raleway

Raleway

Raleway

Raleway有18種不同的樣式,是另一種大系列的無襯線字型,最初由Matt McInerney建立。如果您喜歡Raleway並且正在尋找獨特的東西, Raleway Dots提供類似的樣式,並採用點狀方法,適用於大標題。

9. PT Sans

PT Sans

PT Sans

PT Sans是為俄羅斯聯邦的公共型別開發的,因此包括拉丁字元和西里爾字元。 PT系列中還有其他幾種字型,包括一些襯線選項。

10. Merriweather

Merriweather

Merriweather

Merriweather的名字喚起了令人愉悅的設計理念,而這正是其設計師的意圖。雖然不是很受歡迎,但Merriweather Sans是一個姊妹專案,與它搭配得非常好。

更多字型 + 後起之秀

從數字上看,上面的十種字型是最受歡迎的谷歌字型。但是,只顯示最流行的選項會損害尚未出現在分析中的新興字型。以下是我們的一些最愛,但沒有出現在分析的頂部。

11. Noto Sans / Serif

Noto Sans / Serif

Noto Sans / Serif

Noto是谷歌委託的字型,有襯線和無襯線兩種版本。它會定期更新,現在有超過100種Noto字型,而且還會不斷更新! Noto的目標是涵蓋來自各種語言的所有字母和字元,同時其獨特的設計在數百種不同的字型系列中保持和諧。這些衍生產品包括流行的Noto Sans KRNoto Sans JP

12. Nunito Sans

Nunito Sans

Nunito Sans

Nunito Sans是一種無襯線字型,並且正在迅速普及。它的使用量在2018年至2019年間增加了兩倍,而且每年都變得越來越流行。

13. Concert One

Concert One

Concert One

Concert One是一種圓形怪誕字型,是標題字型的絕佳選擇。其非傳統的設計肯定會吸引眼球。

14. Prompt

Prompt

Prompt

Prompt是來自泰國通訊設計公司Cadson Demak的無襯線字型。它是無環的(泰語相當於sans-serif)並且包括泰語和拉丁字元。

15. Work Sans

Work Sans

Work Sans

Work Sans是一種為在螢幕上使用而優化的無襯線字型。設計師建議為14px-48px的任何東西使用中量級樣式。

如何建立最佳的Google字型組合

如果您認為嘗試從Google Fonts中選擇一種字型很困難,請等到您嘗試在您的網站上將它們配對!值得慶幸的是,這不是您必須解決的問題(除非您願意)。您可以使用多種方法來獲得最佳的Google字型組合。

首先,如果您向下滾動頁面,Google Fonts網站本身會建議流行的配對:

查詢流行的Google字型配對

查詢流行的Google字型配對

除此之外,您還可以使用像Font Pair這樣的網站來獲得更多建議。

在WordPress上使用Google字型的最佳實踐

為您的專案找到完美的字型後,這裡有一些在WordPress上使用Google字型的最佳實踐。

限制您使用的字型粗細數

其中一些字型(如 Montserrat 和 Raleway)具有18種不同的字型粗細。雖然這有利於為您提供選擇,但您不想在WordPress網站上載入所有18個字型粗細,因為它會減慢您的載入時間

遵循此準則非常重要!

對於大多數字體,一個好的經驗法則是最多使用三個粗細:

  • 常規
  • 斜體
  • 加粗

我們現在看到的許多WordPress網站甚至跳過斜體,只使用兩種不同的字型粗細。

如果您自己嵌入Google字型,則可以準確選擇要包含的粗細。首先,訪問字型頁面,然後單擊所需樣式旁邊的選擇此樣式。

在Google Fonts中選擇一種字型

在Google Fonts中選擇一種字型

今天的大多數WordPress主題都包括選擇要使用的Google字型和粗細的簡單方法。但並非所有主題開發人員都專注於效能。因此,在某些情況下,最好在主題中禁用Google字型並自行新增。

Variable fonts也開始流行,並得到所有現代瀏覽器的支援。這些很棒,因為它允許一個字型檔案轉換為不同的屬性。 Google Fonts有很多可變字型可供選擇,您甚至可以將搜尋範圍縮小到特定的字型。

Google可變字型

考慮在本地託管Google字型

作為從Google伺服器提供字型的替代方法,您還可以在本地託管字型,從而提供效能優勢。但是,請記住,大多數Google字型可能已經快取在人們的瀏覽器中。因此,我們建議您進行效能測試。

如果您使用Google字型以外的高階字型,例如“Brandon”字型,則在本地託管它們(並從您的 CDN 提供它們)是最佳途徑。

選擇將獲得更新的字型

字型就像WordPress外掛和主題——隨著時間的推移,它們會收到更新和改進,以使其變得更好。雖然風險遠不及WordPress外掛那麼可怕,但選擇一種接收定期更新的字型仍然是有益的。例如,Google的Noto系列自2014年以來定期更新

由於此列表中的大多數字體都很受歡迎,因此可以肯定此列表中的任何字型都會定期更新和改進。如果你決定不在名單上,確保你選擇的任何字型都足夠流行以引起注意絕不是一個壞主意。

不要忘記可訪問性

世界衛生組織統計,根據2015年收集的資料,估計有2.53億人患有視力障礙:3600萬人失明,2.17億人患有中度至重度視力障礙。此外,截至2021年,患有某種形式障礙的人數已增至22億。

使用Google字型時,您可以通過CSS控制其外觀,例如顏色和大小。所以不要忘記遵循Web 內容可訪問性指南 (WCAG) 2.0 。這將確保每個人都可以輕鬆訪問您的內容。

遵循這些準則將使更廣泛的殘疾人可以訪問內容,包括失明和低視力、耳聾和聽力損失、學習障礙、認知限制、運動受限、語言障礙、光敏性以及這些的組合。 – Web 內容可訪問性指南 (WCAG) 2.0

一項重要的指南是顏色對比度。您最不想做的就是釋出令人驚歎的內容,結果卻讓人們的眼睛感到疲勞!您可以使用WebAIM 的 Color Contrast Checker等工具來檢視您的字型顏色是否符合官方建議。

2021 年的 15 種最佳 Google 字型(加上使用技巧)-7

顏色對比度檢查工具

如何將Google字型新增到WordPress

選擇一兩種字型後,最後一步是將其新增到您的網站。多虧了谷歌字型,這項任務比平時更容易。

假設您想在您的網站上新增一種字型。在這種情況下,您有三個選擇:安裝外掛,例如Easy Google FontsGoogle Fonts Typography ,使用Google Fonts API將字型上傳到您的網站,或手動下載並將其託管在您的網站上。

小結

谷歌字型非常棒,被數以百萬計的網站使用。它們通過可靠的排版和影象設計原則使網路更加愉快、開放、快捷和易於訪問。

為了確保您的訪問者獲得更好的整體體驗,我們建議您遵循最佳字型實踐,例如限制字型粗細、在本地託管字型(如果需要)以及遵守可訪問性指南。

評論留言