13 種「易於閱讀」的字型，以及如何選擇字型的三個要點。
2024/10/29
在網站上易於閱讀的字型字型的可讀性對網頁設計中的使用者經驗有重大影響。
特別是在無障礙網頁方面，選擇和使用適當字型的做法、必須符合 WCAG 準則，並確保網站對所有使用者都友善。。
以下兩個因素對於字型的可讀性非常重要
(i) 能見度。
(ii) 無障礙。
可視性是指字體大小、間距和對比適當，文字清晰可辨，而可讀性是指字體容易閱讀，特別是對視障使用者和有閱讀障礙的使用者而言。透過選擇結合這兩種元素的字型，使用者可以順暢地理解內容，而不會有任何視覺上的負擔。
本文中、13 種典型易讀字型。我們鼓勵需要製作高可讀性內容的設計師和工程師閱讀這篇文章。
目錄
13 種易於閱讀的字型，提高了可讀性。
在提高可訪問性方面，首先，設計中使用的字體選擇非常重要、在可讀性方面，採用易讀的字體。以下是 13 種典型的字型，用於
◆13 種方便易讀的字型
UD 字型：通用設計字型 (1) 至 (4)
請參閱上表中的 (1) 至 (4)（綠色）。這些名稱中包含「UD」的字型統稱為「UD 字型：通用設計字型」。
UD 字型是、所開發的字型方便所有使用者閱讀。特別是考慮到視障使用者和閱讀障礙的使用者，設計的特色是簡潔的字母形狀和易於視覺分辨。。
例如，UD 字體用於日本的公共機構、車站標誌和教育，其多功能性也使其在網頁設計中非常有效：使用 UD 字體可以提高整個網站的無障礙程度。
字型 1: UD Shingo。
哥特式 UD 字體，清晰易讀，尤其是日本的公共設施和資訊標誌。它在各種環境中被廣泛採用，包括
字型 (2) UD Marugo
採用圓形哥德式字體，給人柔和的印象、需要熟悉的兒童教材和情境。它用於以下領域：對視覺的要求較低，也較容易辨識。
Font (iii) Hiragino UD Mincho.
Mincho UD 字體既優雅又易於閱讀，是專為老年人和視障人士設計的、視覺上清晰易讀，同時保留 Mincho 字體的美感字型。
字型 4: FOT-UD Kakugo。
清晰的字形、經調整的字母粗細和間距，讓每個人都能輕鬆閱讀，尤其是對有視覺障礙的人來說。公共機構、醫療保健場所和教育界。建議在下列地方使用
UD 字型以外的易讀字型 (⑤-⑬)
除了 UD 字體之外，還有許多其他可視性高且無障礙的字體，雖然這些字體並非特別針對某些殘障使用者、它們具有極佳的可視性和多功能性，可應用於各種數位和印刷環境。
這些用於許多網站和應用程式的字型，是讓所有使用者都能舒適、輕鬆閱讀內容的基本要素。作為設計的一部分使用得宜，可以改善網站的整體使用者經驗。
字型 5：Yasashisa Gothic。
免費字型該字體以易於閱讀而著稱，但可讀性非常高，粗線條和字母之間的合理空間，使視覺上不那麼累人、兒童教材和網頁設計也用於.
字型 6: Genno Kaku Gothic。
這是 Adobe 和 Google 共同開發的開放原始碼字體，是一種可讀性極高的哥德式字體，設計簡單，但專為可讀性而設計、它適用於全球的網頁設計和應用程式，因為它除了日文之外，還能支援多國語言。
字型 (vii) Noto Sans JP
和 Genno Kaku Gothic 一樣，這款開放原始碼字體由 Google 開發，著重於日文的可讀性；它在包括日文在內的多種語言中都保持了一致的設計、網頁、應用程式和印刷品它廣泛應用於以下領域
Font (viii) Meirio.
Windows Vista 以後的標準字型。該字體是作為「字型」而開發的，特別強調顯示時的可讀性：字母間距會自動調整，大大提高了螢幕上的可讀性。優化網站和軟體的使用者介面，尤其在螢幕上清晰易讀這使得它在網頁無障礙方面表現優異。
字型 (ix) Arial。
長期以來，它一直是 Windows 的標準字型，現在則是世界各地廣泛使用的字型高度可見、它經常被使用，尤其是在數位和印刷媒體中。它的特點是設計簡單，在許多媒體中被用作易於閱讀的字體。
字型 10 Verdana。
字型設計為在小尺寸下易於閱讀字元之間的間距較寬，常用於需要高螢幕可見度和可讀性的網頁和數位內容。
字型 (11) Tahoma。
類似 Arial 和 Verdana 的字型，字距窄，但可讀性和可讀性極佳，尤其是文字寬度均勻，即使在顯示空間有限的螢幕上也能輕鬆檢視。以下是研究結果的摘要。
Font ⑫Dyslexie。
Dyslexie 是、專為閱讀障礙 (dyslexia) 人士設計的字型。字母是：每個字母都有獨特的形狀，使字母難以混淆，提供了易讀性。
Font⑬OpenDyslexic.
與 Dyslexie 一樣，它是專為閱讀障礙人士設計的開放原始碼字型。重點設計的字母下部，使其穩定且易於閱讀。文字的設計可讓您順暢閱讀。
除了這些字型之外，還有許多其他無障礙且易於閱讀的字型，包括 UD 字型。針對使用的場合、媒體和使用者需求，選擇適當的字型。是很重要的。
下一節將解釋到底哪一種字型是「易讀」字型。
可視性」和「無障礙性」對可閱讀的字型非常重要。
易讀字體」的關鍵在於可見性」和「可及性」。是。兩者都是與字型相關的重要概念，但內涵不同。
可視性
什麼是能見度、文字有多「清楚」、多「易讀」。高可見性字體是指具有清晰字形的字體，任何人都可以輕鬆閱讀，而且由於字母之間的距離合理，因此可以迅速識別、不太粗、不太細、字形清晰的字體具有很高的可視性。
無障礙
可訪問性是指每個人是否都可以訪問字型和文字，即'是否每個人都能輕鬆閱讀和理解？是指所有使用者的舒適度，包括視障使用者、閱讀障礙使用者和老年人。
無障礙字型不僅清晰可見，對某些使用者來說也很容易使用、其設計可輕鬆與螢幕閱讀器和其他支援工具相容。
結合可視性與可讀性，讓許多使用者都能輕鬆閱讀字型。兩者都是字型選擇的核心考量，對網頁設計和印刷品的品質有重大影響。
下文將說明哪些字型元素是確保可視性和可讀性所必需的。
可閱讀字體的兩個基本要素
這裡字體的基本元素，以確保可視性和可讀性。本節將解釋重要的兩個主要因素。
要素 1) 字體大小。
字體大小對閱讀文字的難易程度有很大的影響；太小的文字會使眼睛疲勞，特別是對低視力使用者和長者而言。
一般、在網頁上，建議最小尺寸為 16px（像素）。請參閱以下各 px 大小的不同尺寸。
◆ 網路上不同的字型大小
| 10px | 此文字的字型大小為 10px。 |
| 12px | 此文字的字型大小為 12px。 |
| 14px | 此文字的字型大小為 14px。 |
| 16px (建議的最小尺寸) | 此文字的字型大小為 16px。 |
| 18px | 此文字的字型大小為 18px。 |
| 20px | 此文字的字型大小為 20px。 |
例如在網站上、標題使用 20px 粗體字，正文等使用 16px 粗體字。通常是可讀性方面最重要的因素之一，因為選擇正確的字體大小可以為每個人提供舒適的可讀性。
元素 (ii) 字體。
字體字型包括主要的無衬线和衬线形式有，為了方便、日文字體的 Gothic 和 Mincho。每種字型都能與不同的應用程式和情況相容。
◆ 無襯線體和有襯線體
| 無襯字 | 字體 |
 |
 |
無襯字體是、設計簡單，字母邊緣沒有任何裝飾。特別是適用於數位環境中的高能見度與小尺寸並常用於網站和行動應用程式。在螢幕顯示中，通常使用無襯線型字體。
另一方面，Serif 機體、它在字母邊緣有細小的裝飾（鋸齒線），適用於印刷材料和較長的文字。鮮明的襯線風格讓整篇文章給人一種流暢、有節奏感的印象、常用於傳統和正式場合然而、顯示器上小尺寸的可視性可能很差。
當考慮網站等數位環境中的可讀性時，無襯字 (哥德式) 較為適合；然而，當要長時間閱讀和閱讀文字時 (例如書籍)，襯字 (mincho)的流暢、舒適設計會有幫助。 前文已提及。例如，Hiragino UD Mincho 採用清晰的 Mincho 細節設計，以確保視障人士的無障礙使用，同時還能提供賞心悅目的外觀和沉穩的感覺。
因此，根據不同的媒介和情況，選擇一種既能增強可讀性，又能保持文件整體色調和印象的字體，而不僅僅是可視性，這一點非常重要。
就無障礙網頁而言，如何選擇易讀字型的三個重點。
在下一節中，我們將著重於網頁的可讀性，並解釋如何選擇或使用容易閱讀的字型的三個重點。
第 1 點：基於 WCAG 指導方針。
WCAG（網頁內容無障礙指引）は、為確保所有人都能存取網頁內容而建立的準則。在為無障礙網頁選擇字型時、遵循 WCAG 中規定的標準非常重要。。
其中一個指引的例子是，背景顏色與文字顏色的對比必須至少達到 4.5:1，以便有視覺障礙或色盲特徵的使用者能清楚閱讀文字。
此外，一般建議使用無襯線體 (哥德體)，因為在顯示器上比有襯線體 (明體) 更易辨認。
在字型選擇和使用方面、符合 WCAG 的這些準則可確保網站讓每個人都能輕鬆使用。如需 WCAG 的詳細資訊，請參閱以下文章，該文章可與本文一併閱讀。
相關文章：WCAG 是基於四項原則的無障礙國際標準
第(ii)點 確保字型的可擴展性（可延展性）。
對於無障礙網頁而言，重要的是字型必須是可擴充的，也就是說，字型必須是可使用者應能使用瀏覽器設定和放大功能調整文字大小。是必需的。
在網站建置中指定字型大小時，例如在 CSS 中，請使用相對單位 'em「 和 」rem「，而非絕對單位 」px'，以便使用者可以自由變更文字大小。
更進一步、為避免在不同裝置上顯示損壞而設計的字型。更具擴充性 - 例如，在 PC 上整齊排版的網站，必須能夠在智慧型手機或平板電腦等較小的螢幕上觀看，而不會扭曲或損壞字型。
第 3 點) 是否與螢幕閱讀器相容？
視障使用者用來存取網頁內容。具備全功能「螢幕閱讀器」的字型。選擇
雖然在字型上並沒有明確的螢幕閱讀器支援或不支援規範、過度裝飾性的字體或包含符號或象形文字的特殊字體可能無法被螢幕閱讀器正確辨識。因此、使用簡單的無襯線字體或標準字體 (例如 Arial、Verdana) 可降低在螢幕閱讀器上大聲閱讀時產生混淆的風險。
然後，使用適當的頁面結構、HTML 標籤或替代文字等，螢幕閱讀器就能正常運作 關於螢幕閱讀器的更多資訊，請參閱以下文章。
從字型選擇開始，例如這些、根據 WCAG 支援無障礙網頁的具體方法如需更多資訊，例如無障礙網頁實施指南」，由 Digital Agency 出版。強烈建議設計師和工程師一目了然，下節將詳細總結。
参考：無障礙網頁實施指南。
現在讓我們繼續討論改善字體可讀性的具體技巧。
提高可讀性的三個實用技巧
在實際使用字型時，有許多要注意的重點：在此我們提出三種實用的技巧來改善字型的可讀性，並解釋有哪些特定的創新技術可以提供幫助。
技巧 1：調整行間距和字母間距。
適當調整行距和字距是可以大幅改善文字可讀性的要素。如果行距太窄，文字會被擋住，使視線難以順暢移動這會增加讀者閱讀的負擔和困難，反之、如果行太寬，文字會失去連貫性，難以專心閱讀。
以下是使用相同大小字型 (Mayrio) 的文字，僅更改了行距和字母間距。
因行間距和字元間距而造成的可讀性差異
| 行距和字距。適當名句 | 行距和字距。不當名句 |
 |
 |
一般、理想情況下，行距應為 1.5 到 2 倍。同樣地，字元間距（kerning）也需要調整。如果字母之間的距離太近，就會顯得模糊，可視性也會降低，尤其是在小字體的情況下。適當的字母間距可清楚區分個別字母，有助於維持可讀性。
行與行、字與字之間有足夠的空間，再加上適當的換行和縮排，可進一步增強文字的字型、可讀性和可讀性。
技巧 2：對比和配色方案。
文字與背景的對比是決定可視性的主要因素：高對比，例如黑色文字與白色背景的組合，最為顯眼，每個人都容易閱讀；反之亦然、如果背景顏色和文字顏色相近，或採用低對比的組合（例如：淺灰色背景上的白色文字），文字將難以看清，而且顯示內容可能難以理解，尤其是對低視力或有其他視覺障礙的使用者而言。
以下是具有相同配色基調但對比度不同的影像比較、很明顯，高對比度顯然更容易看清楚。。
對比度造成的能見度差異
同樣重要的是，在選擇顏色方案時應考慮到具有色覺特徵的使用者，例如避免紅色和綠色的組合，並遵循 WCAG 指南、對比率為 4.5:1 或更佳保持顏色方案的可讀性，因為整體顏色方案是提高字體可讀性的因素之一。
在設計時，若要維持適當的對比度，「對比度檢查器」是一個有效率的工具。下面的文章描述了一個有用的對比檢查器，您可能會感興趣。
相關文章：為主管提供五種易於使用的「對比檢查器」。
技巧 3) 字型的一致性和使用。
網站和印刷品上字體的一致性對於讀者順利理解資訊非常重要。在整個文本中大量使用不同的字體可能會造成視覺混亂，導致文本難以閱讀。特別是，主要內容和標題使用一致的字體，可以更容易理解資訊流程，並維持統一的設計。
另一方面，例如使用不同的字型也會很有效、在標題和正文中使用不同的字體，可以創造視覺上的區別，讓重要資訊更容易吸引目光。然而、字體太多可能會降低可視性，也可能會妨礙順暢的理解。謹慎選擇非常重要。
既然我們已經詳細討論了無障礙字型，現在讓我們來看看一些實際使用這些無障礙字型的網站。
將「易讀字型」付諸實行的三個網站。
在此，透過易於閱讀的字體，具有極佳的可視性和可讀性、三個正在改善整體網站無障礙網頁的網站。這些網站因其無障礙字型選擇和設計而獲得認可。
網站 1：數位代理。
數位機構的官方網站在設計上著重於無障礙；字型為、它使用 Noto Sans JP，一種考慮到可視性和可讀性的開放源碼字型。
此外，還實施了多項無障礙改進措施，例如為屏幕閱讀器使用者設計標題結構，以及推廣 PDF 檔案的朗讀支援；這些創新措施可確保視障使用者也能舒適地使用網站。
◆ 數位機構的官方網站。
地點 2: Apple
蘋果公司的官方網站強調其產品和服務的無障礙，是一個被許多使用者推崇為易於瀏覽的最佳範例。適當的配色方案和字體大小，以及足夠的邊距可視性和可及性在以下方面得到充分考慮
簡潔、明確的設計以單色為基礎，搭配高對比度和無襯線（哥特式）字體，以非常易讀的形式提供產品和支援資訊。
◆ 蘋果官方網站
Site (iii) BBC.
BBC 網站在提供新聞內容時，已充分注意確保字體的可讀性。所使用的字體是一種名為「Reith」的原創字體，在確保可讀性和可讀性的同時，還給人一種虛擬的感覺。
在符合 WCAG 標準的無障礙支援方面，BBC 也是模範網站。
◆ BBC 官方網站
摘要
選擇易讀字體的關鍵在於同時提高可視性和易讀性。高可視性可確保每個人都能立即辨識文字並順利存取資訊，而可讀性可確保視力受限、有閱讀障礙或年長的使用者能舒適地閱讀文字。
設計師和工程師未來應該努力的第一件事就是、依據 WCAG 準則選擇字型。同樣重要的是設計文字，使其不會在不同的裝置上分解。
除此之外、透過螢幕閱讀器驗證、使用者測試和 A/B 測試，瞭解使用者實際上覺得字型有多容易閱讀。並促進適當的改善。
未來的網站必須注意無障礙字型的選擇，讓所有使用者都能舒適地使用網站和應用程式。
