設(shè)計小課堂：淺談界面中的文字字體

ernest.wang 發(fā)布于2022-07-07 17:40 / 943人閱讀

Image by Willi Heidelbach from Pixabay

在UI設(shè)計中，文本是常用的元素之一，他是 傳遞信息 的主要工具。或許是因為它太過基礎(chǔ)，很多時候我們會忽視它的存在，導(dǎo)致頁面最終效果不夠理想。對于注重用戶體驗的產(chǎn)品來說，每一個細(xì)節(jié)的偏差都可能成為致命傷。

“藝術(shù)是無依據(jù)可循的，但是文字排版卻是有依據(jù)可循的。”

正文的大小、字階的比例，字與字之間的距離、文本的顏色和對比度等，都是影響可讀性和易讀性的關(guān)鍵因素。

下文中提到的數(shù)值都只是一個參考，如果死磕數(shù)值那設(shè)計將失去了意義。重要的是理解你想通過頁面?zhèn)鬟f給用戶的信息，從而 明確設(shè)計目標(biāo)，以此對你的設(shè)計進(jìn)行針對型的調(diào)整。

“在高分辨率的顯示器普及的今天，為什么我們還把瀏覽器默認(rèn)的最小文本12px來定義正文的標(biāo)準(zhǔn)字號？即使這個默認(rèn)值已經(jīng)存在了超過20年。”

正文大小

在打字機時代里，我們定義 12pt（點）的文本是 印刷品的最佳閱讀尺寸（這個值還考慮通過文本尺寸控制書籍、雜志、報紙的紙張數(shù)量成本）

20世紀(jì)90年代，數(shù)字平臺建立了 pt（點）到 px（像素）到轉(zhuǎn)換，在默認(rèn)分辨率為 72dpi 的 Mac OS 上直接轉(zhuǎn)換 12pt 等于 12px 。

pt = 1/72(英寸), px = 1/dpi(英寸)

然而 12pt 在 Windows 默認(rèn)的 96dpi 分辨率下等于 16px，當(dāng)時的設(shè)計師普遍認(rèn)為16px的正文太大了，因為那個年代的只有 14英寸的低分辨率屏幕作為衡量基礎(chǔ)。

直到2004年，14px的文本仍然被認(rèn)為對于正文來說是偏大的，但是從2011年開始 隨著更大分辨率的顯示器以及響應(yīng)式技術(shù)的來到使得越來越多的設(shè)計師將14px的文本視為最小字體大小。

字階

通過 字體大小區(qū)分內(nèi)容層級 是常規(guī)的設(shè)計方法，如何選擇字階的大小達(dá)到比較滿意的效果呢？

基于14px的主體字號我們可以通過一些“美”的比例得到一系例對應(yīng)的字體大小組合，從而來支持產(chǎn)品及內(nèi)容的需求；

Material Design 定義了13種尺寸組合，每種類型都有對應(yīng)的語義說明：

Ant Design 定義了10種尺寸組合：

U-Design 定義了7種尺寸組合：

對比度

在 頁面中文本需要足夠的對比度才能保證內(nèi)容清晰易讀，過強或過弱的對比度都是不利于用戶閱讀的，有什么方法可以去 科學(xué)地衡量 這個對比度呢？

“無論你的技術(shù)水平或身體狀況如何，網(wǎng)絡(luò)應(yīng)該為所有人提供信息訪問”

實際上，W3C 的 Web 無障礙推進(jìn)組織制定了 Web 內(nèi)容無障礙指南(WCAG)，該指南針對Web上文本對比度給出了一些建議：

對比度等級	普通文本	大號文本	附屬文本
AA	4.5:1	3:1	無要求
AAA	7:1	4.5:1	無要求

對比度等級：

AA 級: 符合要求的最小對比度
AAA 級: 增強版的對比度，以便中度低視力的用戶在不使用對比度增強輔助工具的情況下可以閱讀

大號文本定義：

至少有18pt或者加粗14pt大小的文本

如何快速的 驗證頁面是否符合WCAG 標(biāo)準(zhǔn) 呢？下面我列舉一些自用的工具：

1）色彩對比計算器

2）網(wǎng)頁在線比對工具

3）sketch色彩對比插件

字間距

在 較大尺寸的文本 中（例如標(biāo)題）使用 更緊密的字間距，可以減少文本之間的空間提高可讀性。

而在 較小尺寸的文本 中（例如正文）適當(dāng)?shù)?nbsp;增加字間距，可以提高可讀性，因為字符之間更多的空間增加了字形之間的對比度。

字體類型

在字體類型上除了我們常說的襯線字體與非襯線字體外，還有兩種不同的間距類型：等寬字體和比例字體，這也是目前很多設(shè)計師容易忽略的區(qū)域。

比例字體：具有可變間距，每個字符寬度根據(jù)字符實際占用空間來定義

等寬字體：每個字符占據(jù)相同的空間寬度

下面提到的等寬字體和比例字體指的都是英語類字體，其實在現(xiàn)實社會中人們所書寫的都是比例字體，但在計算機時代早期，因為技術(shù)限制的原因無法做到字體不等寬的設(shè)定從而產(chǎn)生的字體類型，隨著技術(shù)的發(fā)展比例字體開始出現(xiàn)。

由于網(wǎng)絡(luò)上有著 大量的內(nèi)容信息和有限的可用時間，用戶只會 閱讀頁面上大約28%的單詞，通常會 掃讀而不是閱讀。而等寬字體就有一個很明顯的缺陷，因為它所有 字符的寬度都是相同的并不適合掃讀，所以在內(nèi)容字體選擇上不會使用等寬字體。