无障碍字体指南:如何让字体更为友好

无障碍字体指南:如何让字体更为友好


字体/字型是无障碍阅读的体验基线。


无障碍字体指南:如何让字体更为友好
当我们希望让我们的信息尽可能的无障碍时,选择一种可以帮助视力不佳、学习障碍、失语症、失读症或者低识字率的阅读者提高易读性*(Legibility )和可读性*(Readability)的字体是至关重要的。
但想要让字体真正具备无障碍性则需要结合其他的最佳视觉原则;同时如果没有选择一个好的字体,仅用颜色对比这类的方法的效果也只是有限的。

易读性*:

描述的是在文字排版设计过程中,观者对每一单个文字的辨识程度,常与文字的印刷、尺寸和外观相联系,文字的易读性高低决定了观者是否能够准确地辨识出文字内容。

可读性*:

说的是在一段内容中文字、句子构造的复杂度。在这背后的假定前提是复杂的句子比简单的更难分解和阅读。一般描述为可以轻松进行阅读的阅读能力。

下文所列出的原则不是影响字体无障碍的唯一因素,但它们是基于神经科学和形成性研究的用户数据所总结出的提升阅读体验的基础。有一些字体自称对不同的用户类型都是“无障碍的”,但其根据只是一些假设和传闻。所以在你使用字体/字型前请检查一下字体声明。

~01

BBC Reith & Qalam

在开发和测试BBC Reith和Qalam时,项目团队包括聘请了神经科学家Alessia Nicotra博士(神经学和神经生理学博士)作为专家顾问。这是为了帮助团队了解不同类型的人群是如何阅读的。这不仅为开发Reith的方法提供了依据,也为可读性测试提供了方法(其中参与测试的用户群体包括重度视力障碍者,阅读障碍者和没有任何症状的对照组)。
无障碍字体指南:如何让字体更为友好

~02

这里是一级标题

我们在开发BBC Reith和Qalam所进行的实验让我们总结出了一些原则。使用这些方法可以为有学习障碍、视觉障碍、失语症、失读症的人提供更友好的字体(typeface)设计和字型(font)选择方案,同时可以保持我们网站或app的品牌完整性和一致性。
我们要注意的一点是,阅读障碍并不是一种视觉疾病,而是一种一种大脑综合处理视觉和听觉信息不能协调的神经发育疾病。还有很多其他的认知特征和症状会影响到很大一部分人(即使他没有阅读障碍),比如镜像书写症*( letter mirroring),敏感性综合症*(Irlen syndrome)和视觉不适(偏头痛)。
同样值得注意的是,语言的透明*也会影响到阅读障碍的发生概率。因此,像德语或意大利语等语言的阅读障碍病例明显低于英语或法语。我们可以提供一些类似较低对比度色系或特定的颜色组合来提高一些对非阅读障碍症核心病征的视觉处理需求。

镜像书写症*:

是脑部疾病引起的一种特殊类型的书写障碍,它是指书写时出现字体及笔画顺序的逆转.即书写的字左右颠倒,像照在镜子里一样。

敏感性综合症*:

又称艾伦综合症,是视觉感知的问题,由于用于解释视觉信息的大脑区域功能障碍,人们难以处理文本。在患有艾伦综合症的人中,在各种情况下(尤其是在强光下)以及文本出现在白色或浅色背景下时,文本都变得难以阅读。文本可能显示为模糊,乱码或乱码。(有观点称该症状是一种伪科学,是一种因为利益所捏造出来的症状)

透明语言*:

像德语或意大利语属于所谓的透明语言,这意味着字母和发音是对应的。然而英语和法语属于不透明的类别,同一个字母读起来可能会有几个音。


这些是你可以用到的字体设计原则:
  1. 适合读者的字体样式
  2. 避免相似的字母形状
  3. 确保没有镜像字母
  4. 字母之间更容易区分
  5. 在小尺寸中使用人文主义字体
  6. 足够的字母间距
  7. 大写字母和升部之间的高度应有明显区别
  8. 在具体场景中测试字体的可用性

##1.选择适合读者的字体
对于正在学习阅读的儿童或者阅读能力较低的成年人来说,形状不太复杂的无衬线字体更有助于字符的识别。
衬线字体可以消除字符形状所带来的误解,给进阶读者提供更流畅的可读性。在进行长阅读的时候,可以带来更好的阅读流,减少用户的疲劳感,提高阅读速度和离解能力。
但无衬线字体可以帮助初级读者(例如儿童,识字率低或学习困难的成年人)识别单个字符。举个例子,单层的“ a”(Comic Sans )比双层的变体“a”更容易被认出来。
无障碍字体指南:如何让字体更为友好
Comic Sans的这种随意的视觉风格在致力于与儿童交流或与儿童有关的组织中很受欢迎。然而,如果组织的形象是正式的或潮流的,那么这种选择可能会破坏它的形象和品牌完整性。
无障碍字体指南:如何让字体更为友好
但对于进阶读者来说,单层“a”可能会干扰阅读的流程,因为它与“o”、“c”甚至“d”等其他字母形状相似。一旦适应了双层的“a”,那么它会提供更好的区分和阅读流。
随着孩子的成长,他们的阅读能力也在提高。从学习单个字符的形状和发音开始,然后他们可以识别分组,完整的单词,最终掌握扫读。在扫视的过程中,眼睛/大脑注视着单个字符,在左边拾取两到三个,在右边拾取三到四个,然后跳到下一个焦点。但请注意,你的目标读者他们的扫读能力不一定相同。
在某些情况下,字体/字型的无障碍性可能被视为用户可以切换的“替代选项”。或者像BBC Reith一样,有额外的字符或变体字体。那么此时,默认字体可以为儿童阅读或困难阅读的语境显示(被压缩的数据表)进行优化。

##2.避免设计出相似形状的字母
有些字体的设计中,很多字符在形状上几乎是相同的。字符“I1l”( Gill Sans中大写的i,数字1,小写的L)就是很好的例子。为了避免这个问题,选择在大写字母“I”的顶部和/或底部都有明显特征的字体,以及在数字“1”的顶部有一个短但明显的字臂*(arm)。
无障碍字体指南:如何让字体更为友好

字臂*:

也叫横线(bar),一端或者两端开放的水平笔画。如大写字母T和F;或是大写字母K和Y上部的笔画。


##3.确保没有镜像字母
所有视力正常的幼儿都会把字符水平翻转,这是他们早期神经发育的一部分。但在大约六岁的时候,这种神经特征会随着持续生理发育的自行消失。但在一些幼儿中,这种消失不会发生。因此,对于他们来讲镜像书写症是终身的。d和b,q和p,字符形状需要是明显有差异的,特征不能是糢糊的。举个例子,BBC Reith(左)设计了独特的字符形状,而Public Sans(右)采用了镜像的设计。
无障碍字体指南:如何让字体更为友好

##4.字母之间更容易区分
如果字符形状过于封闭,或者它们的字怀*(counter)太小,或者开口*(aperture)过于封闭那么我们就会感觉它们十分相似。这也就是为什么对于中度到重度视力障碍的人来说,o、c、e、a这些字符很容易搞混,这让单词对于他们更难识别。故而,在字体设计使用更开放的字怀可以更好地强调字符形状的特征来增加易读性。
无障碍字体指南:如何让字体更为友好

字怀*:

字母所包含的内部空间,无论是否封闭,也就是字碗的内部区域。比如H或者n两个竖画之间的区域。

开口*:

指的是类似于a,c这种字母的开口。开口越大,清晰度越高。


##5.在小尺寸中使用人文主义字体而不是怪诞字体
人文主义字体(Humanist typefaces)[1]往往有多种字符宽度,这有助于避免字符形状的糢糊性,从而帮助快速和准确的识别字符。不同的字符宽度可以帮助不同阅读能力的人识别字符。
无障碍字体指南:如何让字体更为友好

##6. 确保足够的字母间距
即便是对于视力和阅读能力良好的人来说,紧密的字符间距对于也会降低文本的可读性。对于阅读障碍者而言,随着字符间距变紧,对单个字符的分辨能力将会降低。他们会感觉字符是连在一起的,比如“ol”、“lo”或“vv”,或者只是因为过于紧密而然字符在单词中难以辨认。如果是重度障碍者,字符间距过窄会造成视觉拥挤,使他们很难集中注意力和识别单个字符。
无障碍字体指南:如何让字体更为友好

##7.大写字母和升部之间的高度应有明显区别
糢糊会让字符变得难以识别,从而影响字符的快速和正确解码(降低易读性)。让升部*(ascenders)明显高于大写字母和其他特征可以大大提高单个字符的被识别能力(如图中右侧字体 Public Sans)。
无障碍字体指南:如何让字体更为友好

升部和降部*:

像小写字母b、d、f、h、k、l这样从x字高向上延伸的部分成为升部,其高度成为升部高,升部顶部的对齐线称为升部线。像小写字母g、j、p、q、y这样从基线向下延伸的部分称为降部(descenders)。



~03

在具体场景中测试字体的可用性

在选择网站或app中所使用的字体/字型时,请测试候选字体之间的可读性和易读性。上述规则1-7为测试和专家走查提供了一个起点。然而和所有的设计指南一样,这都是技术性的,实际的可用性和有效性只能通过真实得,对广泛的用户的(不管是否残疾)测试来验证。建议重点关注阅读困难,中度到重度视力障碍,失语症以及成年学习障碍者群体。同时请确保独立对字体进行可用性测试,避免字体的组合或实际应用效果对测试者产生负面影响。并且字体要有良好的呈现和排版。


##相关阅读

[1] 字体分类的故事

http://www.comdesignlab.com/typochina/english/archives/22

[2] 字体 | 字母剖析

https://www.jianshu.com/p/7fcfae454cde

[3] 可读性小组

https://www.thereadability.group/


原文名称:A Guide to Understanding What Makes a Typeface Accessible

原文作者:Gareth Ford Williams

原文链接:https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0

*已获得作者授权,若有翻译问题,欢迎一起交流~
*封面图来源Dribbble,设计师 Ricardo Santos


本篇文章来源于微信公众号: MicroUX

UI/UX

家装行业服务感知力升级

2022-5-19 11:56:33

UI/UX

大屏数字人设计实践

2022-5-19 12:17:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索