一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home UI / UX 設計

To 設計師:入門網頁字型指南 -3

in UI / UX 設計
by Judy Shyu
11 月 18,2020
3 min read

字體設定的複雜度光譜

接續上一篇 CSS 設定字體的邏輯,我們可以歸納出字體設定的思路,基本就是越特定的越前面、越通用的越後面,並且大致能整理成下面這些選項:

  1. 設計使用的指定英文字體,可能需要額外掛載
    例如:Montserrat、Futura…
  2. 指定的系統英文字體,可針對不同系統自行指定
    例如:Segoe UI、Roboto、Ubuntu…
  3. 設計使用的指定中文字體,可能需要額外掛載
    例如:思源黑體、台北黑體…
  4. 指定的系統中文字,可針對不同系統自行指定
    例如:微軟正黑體、蘋方體…
  5. 瀏覽器系統字,特定瀏覽器能讀取、會根據版本渲染不同字體
    例如:system-ui、-apple-system、BlinkMacSystemFont
  6. 通用字,作為最終備案,可選擇:
    • serif(襯線字)
    • sans-serif(無襯線字)
    • cursive(手寫字)
    • monospace(等寬字)
    • fantasy(藝術字、注意大多數中文不支援這個設定,會轉為 serif 或 sans-serif 來呈現)
  7. Emoji(顏文字、符號),需要控制 Emoji 呈現的專案可以使用 [註1]
    例如:apple color emoji、segoe ui emoji、segoe ui symbol、noto color emoji

依據專案需求不同,實際採用的項目和順序也會不同。近年來許多大型網站為了追求載入速度、提高網頁和操作系統體驗的一致性,會單純只指定系統字(system-ui)和通用字,更有不少寫法會將 -apple-system 和 BlinkMacSystemFont 放在最前面,這兩者分別對應 Mac 的 Safari 和 Chrome 瀏覽器。system-ui 的支援度近期已經提升得相當高了,可說使用系統字也逐漸成為一股趨勢。

system-ui的瀏覽器支援度,截圖自caniuse.com

觀察各家網站字體實際如何設定

瞭解上面的規則之後,會發現其實並沒有一個普世性的最佳字體選擇。字體如何設定應該依據專案的需求來判斷,從超多超複雜、到超少超簡單,都是可行的。實務上,各家網站又是如何設定字體呈現的呢?

Apple 官網的設定:

font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial",sans-serif

Microsoft 官網的設定:

font-family: 'Segoe UI',SegoeUI,'Microsoft JhengHei',微軟正黑體,"Helvetica Neue",Helvetica,Arial,sans-serif;

再觀察 justfont 官網的字型設定,會發現是這樣的:

font-family: "genyogothictw",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

這三個例子分別呈現兩種方向:

  1. Apple 和 Microsoft:極端派,基本只設定自家系統使用的字體,在網頁上有掛載英文字體檔案,中文會顯示系統預設字型(我家的字體最讚、要是沒載到字體造成看到呈現效果不好,那都是你們系統的問題)
  2. justfont:讓大部分使用者都能看到源樣黑體,載不到源樣黑體的時候,不同系統的使用者會看到和自己系統一致的字體,

設計師可以評估下面這些面向,來決定要使用特定的字體還是採用系統字就好:

  • 業主需求指明特定字體
  • 專案的規模及目的:炫技的形象網站還是大型資訊論壇?
  • 專案的使用者受眾:是否有可能會被牆?電信發展程度如何、網速是否受限?通常使用什麼裝置瀏覽頁面?
  • 專案的風格:可愛童趣、沉著優雅,或是單純實用即可?

這些面相沒有重要性的排序(好吧,除了需求單權重高些),不同專案可能側重不同的項目。舉例來說,可能要推廣的使用者硬體實在太受限,所以只好放棄選用符合專案風格的字體,這時若可以在前期考量到,並採取適當的對策──例如放更多重心在畫面元件風格的塑造──就能避免到了專案後期,才因為使用者載入速度太慢而全盤調整。

最後想稍微提一下,雖然業主的需求凌駕一切……不過,表面上的要求「想要手寫體、想要字很大、想要紅色的字比較顯眼」並不能算是真正的需求,如何進一步與業主討論,得出實際的需求「想要清新的風格、想要容易閱讀、想要某個區塊特別突出吸引人」,這就要看設計師的溝通能力了!希望這篇文章能補充大家的彈藥庫,相信以後各位能拿出除了沒有人在網頁上用娃娃體辣風格不適合以外的實際理由來說服業主!

系列的下一篇文章,會來介紹前面有提到、不可錯過的好用工具:Google Fonts。


[註1] 延伸閱讀: 關於 Emoji ,可以看看:CSS Color Emoji Stack;想更深入瞭解的話還可以看看:关于 CSS emoji 字体和 OpenType-SVG 我所知道的一些事


系列文章目錄:
To 設計師:入門網頁字型指南 -1(網頁字體授權)
To 設計師:入門網頁字型指南 -2(網頁字體呈現基礎)
To 設計師:入門網頁字型指南 -3(網頁字體設定的複雜度光譜)← 現在在這裡!
To 設計師:入門網頁字型指南 -4(實用工具:Google Fonts介紹)
To 設計師:入門網頁字型指南 -5(設計彈性與多語系網站)

如果這篇文章對您有所幫助的話,歡迎在下面按讚表達您的支持,謝謝您!
Tags: UI字體網頁設計
ShareShareShare
Judy Shyu

Judy Shyu

前端工程師,興趣廣泛,試圖為自己找到一點規律而寫作。

上一篇文章

筆記|網格到底怎麼用?(二)

下一篇文章

一起來畫科技插畫吧!

相關文章

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

踏入全職接案滿三年了,加上前面兩年待在接案公司的經驗,五年來也經手近百個專案了吧! 儘管接觸了各樣的專案,每次執行時還是避免不了一些錯誤,加上幾次和待在產品公司...

來做作品集吧!|網站作品集製作心得

來做作品集吧!|網站作品集製作心得

by sanmu
6 月 22,2022

前陣子為了換工作做了新的網站作品集,算了一下目前為止差不多做四五次了,剛好最近朋友也因為公司招人在幫忙審作品集,有討論到一些想法,覺得可以來寫篇分享文章!內容基...

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

by Debby
12 月 28,2021

這篇文章主要是分享之前公司收到六角學院的邀約,參與 F2E PK 賽 的參賽心得紀錄。PK 所製作的內容是『全台公車動態時刻查詢應用服務』活動的目標不是一個月內...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書