改善阅读体验的最佳字体


13

我正在建立一个主要目的是提供内容(立法机关)的网站,并且希望为用户提供最佳的阅读体验。您可以在以下位置查看示例页面:

http://iura.cl/cc/44

如您所见,我已经删除了目前使用Telex webfont的所有内容。我还有一个夜间阅读选项,可以减少眩光:

http://iura.cl/cc/44?estilo=nocturno

我想知道我是否应该考虑选择哪种字体以确保它清晰易读,是否有任何遵循的指南?


2
“您推荐什么字体”这个问题太笼统了,我们无法回答。还要注意,尽管字体无疑是某种东西的“可读性”的主要部分,但还有很多其他变量(列宽,行距,颜色,提示,布局等)
DA01,2014年

@ DA01也许有您可能推荐的指南?
2014年


1
问题似乎没什么问题-这不是“字型你推荐什么”,它的“如何选择高可读性的字体网站 ” -标准堆。
user56reinstatemonica8 2014年

Answers:


10

其实有一些非常简单的原则,如果你的号码一个标准是高可读性的字体网站

  1. 想主流。多亏了@font-face可以从成千上万的字体中进行选择-但较不流行或较新的字体通常在浏览器和操作系统之间有时会出现渲染问题,即使它们来自受人尊敬的创始人。如果可读性是您的重中之重,并且您不想进行大量的跨浏览器跨OS测试,则可以安全地使用它,并使用可靠,经过尝试和测试的字体。老式的网络安全字体喜欢Verdana和喜欢,Georgia因为它们被广泛使用,因此即使在较为罕见的浏览器/操作系统设置中也已经过测试。另外,熟悉有助于提高可读性。
  2. 高x高,宽。您不知道阅读器屏幕的质量或像素密度是什么,因此,如果您优先考虑可读性,请确保字母的重要区别特征特别清晰。为提高网页可读性而设计的字体,例如VerdanaGeorgia,在字母关键细节所在的x高度处使用尽可能多的像素,在一个或两个像素凸起足以轻松实现的上升或下降位置使用最少的像素bo或告诉p
  3. 不太轻。轻型字体在印刷或高像素密度的屏幕上看起来不错-但是有充分的理由说明,直到ios7才很少在屏幕上使用它,甚至在那时还是引起争议的:如果观看者不是在最佳条件下观看,例如稳定的高质量屏幕室内照明,具有可读性。两人一起去了良好稳固的规则权值的字体-我提到VerdanaGeorgia

有大量的满足比其他这些标准字体VerdanaGeorgia,当然,有时这两个被认为是有点枯燥的,因为直到2009年左右的时候@fontface被广泛使用,他们已经去到字体为许多网站的。

但是您真的不会错-它们是为提高Web可读性而设计的,并且每种浏览器和操作系统的组合都已经过测试,可以很好地显示它们。


编辑:当网络类型的卖方和创始人确实要进行测试以提高可读性时,他们可能会在营销中大喊大叫。例如,网络类型“阅读边缘”系列克里斯·伯顿在这里提到的技巧)。不过,请进行广泛测试。


1
我不是设计师,我的眼睛有些问题。我喜欢阅读一些立法机关的文本,但我认为巴西的网站有时会很痛,所以我采纳了您的建议(Verdana),并放入了一个名为stylish的插件,该插件的行高为1.5,字体大小为16px,颜色为黑色。现在对我来说很舒服。
Fabio Montefuscolo

5

好吧,我将继续对此发表想法。没有最终的“最佳字体”,也没有,因为选择字体取决于许多不同方面。可能存在一种“选择字体的最佳方法”。

因此,需要考虑一些因素以帮助为您的项目选择最佳字体。

媒体:如何显示字体,纸张,画布,在线,便携式设备等。您要确保选择的字体与要在其上显示的媒体相对应,例如Times New Roman块。对于打印的文档来说可能不错,但是在屏幕上(尤其是小屏幕上),很难阅读一整块Times New Roman。如果您只限于Web字体,您还想了解可用的内容,例如Google字体之类的资源可以在这里为您提供帮助。 (摘自Wikipedia:“ Web安全字体Web安全字体是可能在广泛的计算机系统上使用的字体,Web内容作者使用它来增加内容以其所选字体显示的可能性。如果访问Web的人,网站没有指定的字体,他们的浏览器会根据作者指定的后备字体和通用系列来尝试选择类似的替代字体,或者使用访问者操作系统中定义的字体替换。”)

受众:考虑谁会阅读它。一个年轻的孩子可能会做的更好,而不基于serif字体,或一个单一的故事“A”,而不是一个双重的故事“A”。但是,如果说是结婚请柬,那么爱德华七世时代的字体等字体在这种情况下就很受欢迎,因为让我们面对它的衬线越多,装饰越好-根据一些新娘的说法;)即使装饰物仍然主要用于标题,而不是全部内容。作为明智的ol

对比度/颜色:同样,这是您的项目要考虑的事项。当然,您不希望因对比度太高而使人失明,也不想因斜视效果差的东西而起眼睛而使人皱纹-这是显而易见的。但是,根据您的配色方案,您可能需要摆弄亮度和对比度设置。你会发现,GD.SE例如没有完全黑,全白(如询问和回答在这里) -它具有比对比度较低,因此它很容易看看这个网站,供比较的时间非常长的时期看着对比度更高的东西-您的眼睛会很累!

重量:在十一点比一些较重的更为清晰可辨一般较轻加权的字体,这是进一步讨论在这里与可读性的其他方面,你可能会发现有用的一起。

数量:您可能要根据媒体,受众和内容选择几种字体。我建议对此保持警惕。您最肯定不希望混淆内容。字体的全部目的是传达某些信息,而您正在寻找的是最有效地做到这一点的方法。太多的字体可能会令人困惑,尽管单个字体有时可能很无聊。通常,倾向于将粗体/斜体和大小与可能的两种字体混合使用。配对字体在这里讨论得更多。

如果您一无所获,这些是您应该缩小的一些方面,但是尽管有很多方面需要考虑,但是还不错。在项目早期选择正确的字体的价值无与伦比!在此处选择字体时,还有更多因素需要考虑

一个很好的类比是,就像穿衣服一样,这里讨论一个简单的概念。

因此,随着我的回答的格式自然下降,您想要首先弄清楚它的作用和含义,然后又想弄清通信方式,哪种字体:),因为这不是一个没有丰富的链接珍娜-答案,这是进一步讨论在这里

我强烈建议阅读我提供的链接,这些链接将非常有帮助,并且将帮助您为您的项目选择合适的字体,这将改善读者的体验。字体不仅仅涉及易读性,还涉及整个上下文,更不用说一种美学,一种足够易读的字体可能会在外观相同且易读的情况下完全脱离一种设计,但是更合适的一种字体可能会不被注意,从而使字体更加美观。设计和信息最突出的东西。我认为花时间去做是非常必要的。

希望我对您有所帮助,而且没有做得太多,我对正确的字体有点热情:)祝您的项目好运。


2

我认为,Serif字体在较长的阅读时间内会更容易出现。为了获得更好的阅读体验,我认为像Adobe Garamond这样的衬线字体效果很好。它不像《纽约时报》那样“傻”。衬线中有一些有趣的曲线,有助于使衬线字体更“纯净”。

在此处输入图片说明

这是一篇我同意的文章:

Serif vs. Sans:最后一战


1
没有确凿的证据表明衬线字体的面孔比无衬线字体的面孔更具可读性。一个例外是在屏幕上,在这种情况下,较低分辨率的显示可能会更难呈现衬线脸的细节。
DA01 2014年

1
Garamond可能很漂亮,但如果将其用作身体字体,则其较低的事前比率会损害其易读性。高度较高的衬线字体包括Georgia,Bitstream Charter和Charis SIL。
加文·普兰

@ GavinR.Putland您能详细说明一下进出口比率吗?仅当行距太小=错误时,它才可能会损害可读性。建议至少140%的行距。
Mikhail

@ DA01我注意到人们提到某些“证据”论证的趋势。作为专家,我可以说Garamond样的字体最易读,而其他字体专家也可以告诉您。这对您来说不是“证据”吗?
Mikhail V'7

@MikhailV不是证据。那是意见。那里有什么证据(极少)倾向于“最可读的面孔是人最熟悉的面孔”
DA01,2016年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.