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

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

Image by Willi Heidelbach from Pixabay

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

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

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

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

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

正文大小

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

20世紀(jì)90年代，數(shù)字平臺(tái)建立了 pt（點(diǎn)）到 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í)的設(shè)計(jì)師普遍認(rèn)為16px的正文太大了，因?yàn)?span style="padding: 0px; letter-spacing: 1px;">那個(gè)年代的只有 14英寸的低分辨率屏幕作為衡量基礎(chǔ)。

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

字階

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

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

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

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

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

對(duì)比度

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

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

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

對(duì)比度等級(jí)	普通文本	大號(hào)文本	附屬文本
AA	4.5:1	3:1	無要求
AAA	7:1	4.5:1	無要求

對(duì)比度等級(jí)：

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

大號(hào)文本定義：

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

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

1）色彩對(duì)比計(jì)算器

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

3）sketch色彩對(duì)比插件

字間距

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

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

字體類型

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

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

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

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

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