13 种 "易读 "字体以及如何选择字体的三个要点。
2024/10/29
在网站上“易读字体”是一项非常重要的关注点，它使该网站能够被更多人舒适地使用。字体的易读性在网页设计中对用户体验有很大影响。
尤其是从网页可访问性角度来看，适当的字体选择和使用实践是满足WCAG指南，并实现所有用户均可使用的网站所必需的。。
为了成为易读字体，下面两个要素是非常重要的。
①可视性
②可访问性
可视性是指字体的大小、字距、对比度适当，文字清晰可辨，而可访问性则意味着字体对有视觉障碍或阅读障碍的用户也是否易读。选择同时具备这两个要素的字体，可以让用户在没有视觉负担的情况下，顺畅地理解内容。
本文将介绍13种代表性的易读字体以及易读字体的特点、选择方式、增强网页可访问性的具体方法等进行详细解说。需要制作高可访问性内容的设计师和工程师们，请务必阅读。
目录
提高可访问性的13种易读字体
在提高可访问性方面，选择设计中使用的字体非常重要。首先，从可访问性的角度来看易读字体将介绍13种代表性的字体。
◆13种可访问的易读字体
UD字体：通用设计字体（①〜④）
请参考上表的①〜④（绿色部分）。这些字体的名称中包含“UD”的统称为“UD字体：通用设计字体”。
UD字体是旨在为所有用户提供易读性的字体。这是。特别是，考虑到有视觉障碍或阅读障碍的用户，设计强调简洁的字形，使视觉区分变得更加容易。。
UD字体例如在日本的公共机构中被广泛用于车站标志和教育现场，因其高度的通用性在网页设计中也能发挥效果。使用UD字体可以提高整个网站的可访问性。
字体①UD新ゴ
这种哥特体的UD字体可视性高，特别是在日本的公共设施和指示标志。在各种场合广泛采用。
字体②UD圆体
这种柔和印象的圆体哥特字体，用于面向儿童的教材或需要亲和感的场合。在这类场合中使用。特征是视觉负担小，易于识别。
字体③ヒラギ诺UD明朝
这种明朝体的UD字体结合了优雅和可视性，特别考虑到老年人和视力障碍者，在保持明朝体美感的同时，突出视觉易读性。该字体。
字体④FOT-UD角体
字形清晰、字重和间距经过调整，因此设计上便于每个人阅读。对于容易感到视觉负担的人，也能轻松阅读，尤其是在公共机构、医疗现场和教育领域等场合中推荐使用。
其他易读字体（⑤〜⑬）
除了UD字体，还有许多可视性高并考虑到可访问性的字体。这些字体并不是专门为特定障碍用户设计的，但在可视性和通用性方面表现优异，广泛用于各种数字环境和印刷材料。
这些字体在许多网站和应用中使用，是所有用户舒适阅读内容的基本要素。。作为设计的一部分，适当使用可以提升整个网站的用户体验（UX）。
字体⑤优雅哥特体
免费字体同时被誉为非常易读的字体。其线条较粗，字间隔适中，因而视觉上不容易疲劳。既易读又给人一种休闲的印象，因此，在儿童教材和网页设计中也有广泛使用。
字体⑥源ノ角哥特
这是Adobe和Google共同开发的开源字体，非常易读的哥特字体。设计简洁，但追求可读性，不仅支持日语，还支持多语言，因此适用于全球网页设计和应用程序。
字体⑦Noto Sans JP
与源ノ角哥特类似，这是Google开发的开源字体，重视日语的易读性。设计在包括日语在内的多种语言中保持一致，广泛用于网页、应用程序和印刷材料中，等等。
字体⑧Meiryo
自Windows Vista起成为标准字体，这款字体特别重视显示上的可视性。字符间距自动调整，屏幕上的可读性显著提高。针对网站和软件UI进行了优化，尤其是在显示器上清晰易读，因此在网页可访问性方面也表现优秀。
字体⑨Arial
由于长期作为Windows的标准字体使用，现今成为了广泛使用的字体，遍布全球。其可视性高，尤其在数字媒体和印刷材料中频繁使用。以简洁设计为特征，作为追求易读性的字体被广泛应用于多种媒体中。
字体⑩Verdana
designed to be easily readable even at small sizes。字间距较宽，屏幕上的可视性高，通常用于需求高可读性的网页和数字内容。
字体⑪Tahoma
这款字体类似于Arial和Verdana，虽然字间距较窄，但在可视性和可读性方面表现优秀。特别是字形宽度均匀，即便在展示空间有限的屏幕上也设计得易于阅读，是这样的。
字体⑫Dyslexie
Dyslexie是为人们设计的具有阅读障碍（失读症）的人士量身定制的字体。该字体每个字母都有独特的形状，难以混淆，从而提供良好的可读性。
字体⑬OpenDyslexic
这是一种开源字体，专为阅读障碍者设计，和Dyslexie一样。字母的底部设计得较重，以确保字母稳定且易于阅读，以便于平滑流畅的阅读体验。
包括UD字体在内，还有许多可访问性强且易于阅读的字体。根据使用场景、媒体和用户需求选择合适的字体是非常重要的。
接下来我们将具体探讨什么是“易读字体”。
易读字体中重要的“可视性”和“可访问性”
在‘易读字体’中重要的因素是‘可视性’和‘可访问性’。。这两个概念与字体相关，但含义有所不同。。
可视性
可视性是指字母有多‘清晰可见’和‘容易阅读’。这表明，具有较高可视性的字体字符形状清晰，任何人都能轻松阅读，并且字母之间的间距适中，因此可以快速识别。通常，既不太粗也不太细，并且形状清晰的字体具有很好的可视性。
可访问性
可访问性指的是字体或文本是否对任何人都易于访问，也就是说“是否容易被任何人阅读和理解”。它旨在确保所有用户都能舒适地使用，包括视力障碍用户、阅读障碍用户和老年人等。
具有高可访问性的字体不仅具有良好的可视性，还容易被特定用户使用，并且设计上更容易与屏幕阅读器等辅助工具兼容。
通过兼顾可视性和可访问性，使其成为多用户可访问的易读字体，因此，两者是选择字体时的核心考虑因素，并对网页设计或印刷质量起到重要作用。
那么，为了确保可视性和可访问性，所需的字体要素是什么？接下来我们将进行解释。
易读字体的两个基本要素
在此，我们将讨论确保可视性和可访问性的字体基本要素。将进行详细说明。重要的要素主要有两个。
要素①字体大小
字体大小对文本的可读性影响很大。过小的文本对眼睛造成负担，尤其对低视力用户和老年人来说是一个重大障碍。
一般来说，在网页上，建议使用16px（像素）以上的尺寸，这对于确保可读性提供了基本的指引。有关每个px尺寸大小的不同，请参见下面。
◆网页字体大小的差异
| 10px | 这段文字的字体大小为10px。 |
| 12px | 这段文字的字体大小为12px。 |
| 14px | 这段文字的字体大小为14px。 |
| 16px（最低推荐尺寸） | 这段文字的字体大小为16px。 |
| 18px | 这段文字的字体大小为18px。 |
| 20px | 这段文字的字体大小为20px。 |
在网站上，例如，标题设置为20px粗体，正文字体为16px的区分十分常见，通过选择合适的字体大小，可以提供适合所有人的舒适可读性，这是可视性方面最重要的要素之一。
要素②字形
字体的样式主要有无衬线体和衬线体两种。有。为了方便，在日文字体中可视为哥特体和明朝体。也没有问题，各种字体在不同的用途和场景下适合性不同。
◆无衬线体和衬线体
| 无衬线体 | 衬线体 |
 |
 |
无衬线体的字母没有装饰，设计简单，无字体字母的边缘没有装饰，具有简单的设计特征。这是。特别是数字环境和小尺寸下的可视性较高，因此在网站和移动应用中被广泛使用。在屏幕显示中，使用无衬线体是非常普遍的。
另一方面，衬线体的字母边缘有小装饰（衬线），它更适合印刷材料和长文章。衬线体为整篇文章增添了流畅而富有韵律的印象，在传统和正式的场合中更常见。不过，在显示上，小尺寸时的可视性也较弱。
如果考虑到网站等数字环境中的可访问性，非衬线字体（哥特字体）更为合适。然而，在书籍等长时间阅读或文本的可读性方面，衬线字体（明朝体）流畅且舒适的设计则更有帮助。前面提到的像“ヒラギノUD明朝”这样设计细致且具备可访问性的明朝体对视障人士更为友好，既能确保可访问性，又展现出其美观的外观和宁静的印象。
因此，根据媒体和情境选择可以提升可访问性，而不仅仅是可视性的字体是相当重要的，同时保持文档整体的基调和印象。
从网页可访问性角度选择易读字体的三大要点
接下来，我们将集中讨论网络可访问性方面、如何选择和使用易读字体的三点要素。
要点①遵循WCAG指南
WCAG（网页内容可访问性指南）是为了使网页内容对所有人都更易访问而设置的指南。在为网页可访问性选择字体方面，遵循WCAG所规定的标准是至关重要的。。
作为指南的一个例子，背景和文字颜色的对比度需达到4.5:1以上。这将确保视觉障碍或色觉特性的用户也能清晰地读取文字。
此外，建议字体大小至少为16px，以防止文字变得过小而导致形状崩溃、变得难以阅读。此外，在显示器上，非衬线字体（哥特字体）的可读性高于衬线字体（明朝体），因此通常建议使用非衬线字体。
在字体的选择和使用方面，满足WCAG的这些指导方针可以实现任何人都可使用的网页。关于WCAG的详细信息请查看以下文章，并与本篇文章一并参考。
相关链接：WCAG是基于四个原则的无障碍国际标准
要点②确保字体的可扩展性
为了提升网页可访问性，字体的可伸缩性至关重要。即，用户可以利用浏览器设置或放大功能来调整字体大小。这是必要的。
在构建网站时，当使用CSS等指定字体大小时，应使用相对单位例如‘em’或‘rem’而不是绝对单位‘px’，以便用户可以自由更改文本大小。
此外，设计的字体也应确保在不同设备中显示不会扭曲或错位，能够说它的可扩展性更高。例如，当在智能手机或平板电脑等小屏幕上查看在PC上整齐布局的网站时，要求字体不扭曲或崩溃地显示。
要点③是否支持屏幕阅读器
视觉障碍用户访问网页内容所使用的“屏幕阅读器”能够正常工作的字体的选择也很重要。
在字体方面，并没有明确的屏幕阅读器支持或不支持的规范，但是，过于华丽的字体，或者包含符号和表情符号的特殊字体，可能无法被屏幕阅读器正确识别。因此，使用简单的无衬线字体或标准字体（如 Arial、Verdana 等），可以减少在屏幕阅读器中造成阅读混乱的风险。。
同时，通过使用适当的页面结构、HTML标记和替代文本等，可以确保屏幕阅读器正常工作。如需了解更多屏幕阅读器的信息，请查看以下文章。
相关链接：解释如何使用屏幕阅读器以及五种典型工具。
关于这些字体的选择方法，基于 WCAG 的网页无障碍性措施的具体方法等的相关内容，请参考以下的《网页无障碍性导入指南》（数字厅出版）详细汇总，因此建议设计师和工程师们务必确认一遍。
参考：网页无障碍性导入指南
接下来，我们将解释提高字体可读性的具体技巧。
提升易读性的三种实用技巧
在实际使用字体时，需要注意一些重要的要点。这里介绍三种实用技巧，以改善字体的可读性，并具体说明哪些方法有效。
技巧①调整行间距和字距
行间和字间的适当调整是显著提高文本可读性的重要因素。如果行间太窄，文字会显得拥挤，视线移动不顺畅。因此，会给读者带来负担，使阅读变得困难。相反，如果行间过宽，则失去文章的一致性，集中阅读变得困难。。
下面是使用同样大小的字体（Meiryo）写的文章，仅调整了行间和字间。
◆行间和字间的可读性差异
| 行间和字间适当的文章 | 行间和字间不当的文章 |
 |
 |
一般来说，行间理想的范围在1.5倍到2倍之间。(上图左是行间1.5倍)，这是非拥挤且舒适可读的设置。同样，字间（字距）也需要调整。如果字母之间距离太近，会看起来混在一起，在小字体大小的情况下，视觉识别能力会下降。适度的字距能够清晰地区分每个字符，帮助保持可读性。
在保持行间和字间的余裕的基础上，适当的换行和缩进可以进一步提高字体的可读性和可读性。
技巧②对比度和配色的调整
字母与背景的对比度是影响可识别度的主要因素。高对比度的组合，例如黑色文字配白色背景，是可识别度最高的，对所有人都易于阅读。相反，背景色与文字色相近，或低对比度组合（例如浅灰色背景上的白色文字）会导致文字变得难以看清，特别是对于低视力等视觉受限的用户来说，内容的理解变得困难。
以下是将色调相同的图像以不同对比度进行比较的结果，可以明显看出，高对比度的内容更易于观看。。
◆对比度差异的视觉效果
此外，考虑到色彩感知特性用户的配色选择也很重要。应避免红色与绿色的组合，并根据 WCAG 指导原则，保持 4.5:1 以上的对比度保持使整体配色具备可访问性是提高字体可读性的要素。
在进行设计时，保持适当的对比度，可以使用“对比度检查器”这个工具，效率会更高。有用的对比度检查器在下面的文章中有介绍，有兴趣的人可以查看。
技巧③字体的一致性和区分
在网站和印刷材料中，保持字体的一致性对读者顺利理解信息至关重要。如果在整篇文章中使用许多不同的字体，会造成视觉混乱，并导致文本难以阅读。特别是在主内容和标题中使用统一的字体，可以使信息流更清晰，保持设计的一致感。
另一方面，区分字体在某些情况下也是有效的。例如，在标题和正文中使用不同的字体，可以提供视觉区分，使重要信息更容易被注意到。但要注意，如果过多使用字体可能会降低可读性，且还可能阻碍顺畅理解。因此，选择时要谨慎。
到目前为止，我们详细介绍了易读的字体。接下来，将介绍一些实际使用这种可访问字体的网站。
实践“易读字体”的三个网站
这里介绍的几个网站通过优质的可读性和可访问性字体，提高了整个网站的网页无障碍性的三个网站将被介绍。这些网站因可访问字体的选择和设计而受到肯定。
网站①数字厅
数字厅的官方网站采用了注重可访问性的设计。字体是，使用了关注可读性和可访问性的开源字体“Noto Sans JP”。
此外，为了适应屏幕阅读器用户，优化了标题结构，并提升了 PDF 文件的朗读能力，进行了许多可访问性改善。通过这些举措，视觉障碍者也能享受方便的使用体验。
◆数字厅官网
网站②Apple
重视其产品和服务的可访问性的苹果官方网站是一个得到许多用户高度评价的易读网站的典型例子。通过适当的配色、字体大小和充足的留白确保了可读性和可访问性。
在基于高对比度的黑白配色的简单而清晰的设计中，采用了无衬线体（哥特体），以非常易读的方式提供产品信息和支持信息。
◆苹果官方网站
网站③BBC
BBC 网站在提供新闻内容时，特别关注字体的可读性。使用的字体为名为“Reith”的原创字体，呈现出正式的印象，同时确保了可读性。
该网站还具备字体对比度和字体大小调整功能，为用户提供了舒适的使用环境。此外，BBC 一直以来遵循 WCAG 标准进行可访问性措施，也被提及为模范网站。
◆BBC 官方网站
总结
选择易读字体时，重要的要点是在“可识别性”和“可访问性”之间取得平衡。如果可识别性高，那么每个人都可以快速识别文字，也可以顺利访问信息。另一方面，如果保障可访问性，视觉受限的用户、阅读障碍的用户或老年人也能够舒适地阅读文本。
接下来设计师和工程师们应努力做到的第一步是，基于 WCAG 指导原则选择字体可被强调。通过注意对比度和字体大小，可以减轻用户的视觉负担。此外，设计时还应确保不同设备中的文字不会出现错位。
在此基础上，通过屏幕阅读器测试、用户测试和 A/B 测试，确定用户对字体的实际可读性感受，并有必要采取适当的修改措施。
未来的网站必须考虑到所有用户都能舒适地使用网站和应用程序，因此选择可访问的字体至关重要。
