it-swarm.cn

是否有最佳字体大小?

对于我参与过的大多数网站项目,批量文本的字体大小通常为12px-13px,但是我想知道这是否合适。我记得曾经读过一篇文章,指出网站上的字体大小应该更大,批量文本要与打印的字体大小相匹配,大约为17px。

是否有最佳字体大小。什么时候对于普通用户来说太大/太小?

小/中/大字体是否有优点/缺点?

更新:
我想获得您的实际测试用户反应等方面的经验。这很容易,这个大小太大或太小,但我了解到用户有时会感到惊讶,并且做出的反应与专家意见

更改字体大小的能力也是一个很好的讨论,但这不是这里所要求的。我有兴趣了解的更多信息是用户如何对不同的字体大小做出反应,而不是他们应该如何进行更改。

56
googletorp

这是一个广泛争论的话题。我见过的最好的解释之一是来自Idan Gazit的演示文稿 面向开发人员的设计:使前端吸得更少

这具有以下幻灯片: alt text 这是普通屏幕上的16px文本,书中是12pt的文本。传达的信息是12pt非常适合读书,但通常也比屏幕更靠近读者。考虑到距离,屏幕上的16px和书中的12pt似乎大小相同。 纸上12pt =屏幕上16px

有各种各样的例外情况,首选较小的文本。但是为了获得较长文本的最佳可读性,我同意16px。

建议将em等可缩放单位更改为ptpx等固定大小单位。阅读更多: CSS字体大小:em vs. px vs. pt vs. percent

34
user745

没有最佳字体大小之类的东西。寻找一个意味着您忘记了一些重要的东西:文本的可读性不仅仅是大小的产物。

在过去的五年中,我已经建立了大约十二个网站作为UI设计师,它们的受众群体各不相同。我发现的一件事是尺寸并不是最大的因素。它是与显示文本相关的不同方面的组合:

  • 对比
  • 字体系列
  • 行高
  • 在页面上的位置

结合使用这些将得出总体可读性的粗略指标,我发现这是文本最重要的设计目标。

作为测试的一个趣闻(自您询问以来):我在一个每月访问70万次的社区站点上工作,该站点的主要受众是不懂计算机的用户。我们将12px Verdana用于正文类型,将14px-16px Arial用于标题。有时,对于不太重要的文本,我们会将灰色的Verdana降至11px。在网站上进行可用性测试时,我们收到的反馈不是关于文本的大小,而是关于设计的周围颜色如何使您感觉就像盯着灯一样。我们将其解释为该站点太亮,并将整个设计的对比度调整为不太亮。部分原因是这些变化,部分原因是导航结构的变化,我们发现每位访问者的浏览量环比显着增加。

关于小字体,要记住的一件事是它们有一个目的:当您需要比其他字体小的东西时(du!)。但是作为UI设计人员,请务必记住您的工作是在界面中创建清晰度和可用性(以及其他功能),并通过去强调UI的某些元素,可以提高其可用性。由您决定应按比例缩小哪些元素,以及应修改文本的哪些方面(来自上面的列表)。

20
Rahul

12px对于大多数人来说似乎可以正常工作。像素为17像素时会更难阅读,而像素低于10像素时也更难阅读。我认为12-13px是一个很好的指导原则。

但实际上,您应该将文本大小设置为1em。这是因为如果以像素为单位设置文本,某些浏览器将不允许用户调整文本的大小。无论您使用什么大小的文字,锐利的眼睛都会使文字变小以便可以阅读更多,而视力不好的人会使文本变大。

只需将时间设置为1em,然后让其他人及其浏览器就能完成其余工作。

最好用不同的字体大小测试页面,以查看布局是否可管理。

9
Vincent McNabb

根据最近的科学证据:

  • 18分和22分将显着提高客观可读性(使用眼动仪测量)
  • 10分和12分将导致理解力严重受损(以理解力问题衡量)
  • 越大越好,因为随着字体大小的增加,客观可读性不断提高。

不要相信我的话。阅读 科学论文 中的详细信息。

7
Martin

最佳字体大小是单个的,由用户的OS /浏览器设置。因此请勿更改

如果您需要放大字体(例如标题),请相对进行(例如200%或2em)。

切勿缩小字体大小,并始终保持良好的对比度以保持可读性。

5
George Pavelka

没有。
...以像素为单位

表示最佳尺寸的正确单位(如果有)将为视网膜对角

如果您正在查看px,则仅查看确定可读性所需的三个因素之一1个

点距或“分辨率”(像素/距离)的正确定义是从px转换为实际距离的方式。

当然,您需要阅读距离,因为相同尺寸的字符到处都不是一样可读。

...当然,可读性与:

  • 较高的px
  • 点间距较高(或分辨率较低)
  • 较低的阅读距离

1个还有文本颜色,背景颜色,字体等。(白底黑字的字体要比橙色底黄字的斜体小一些),但是px,点距和阅读距离可以覆盖您需要仅基于dimension的决定。

3
A.M.

您不应该尝试设置字体大小。您可以使用+ N表示“使其大于基线”(或使用-N使其小于基线)。您指定的任何大小在某些情况下都是错误的;不需要用户对您的网站采取纠正措施的唯一可行选项是让浏览器决定。

2
Monica Cellio

您应该从不使用像​​素作为字体大小。尝试在支持Full HD分辨率的12英寸屏幕上阅读14px字体,将以1-2毫米高的字符显示文本(而麻烦的时间不到一个小时)。

2
JanC

12px很好,但重要的是用户可以自行增加字体大小,并且在这种情况下您的网站不会损坏。

2
Ryan Shripat

在此主题中有一些奇怪的帖子和误解。看来,许多人希望忽略我们阅读和理解文本的科学和经过深入研究的方面。碰巧的是,我正在研究关于这个主题的新标准,所以这里有一些最新技术:

艺术科学

现有研究已经定义,对于正常视力的人来说,具有最大对比度的字体的最佳阅读速度是x高度,介于0.2°和2°视角之间。 X高度是字体的小写字母x的实际垂直大小。显然,实际字体大小将根据观看距离而变化,但是幸运的是CSS参考像素px是基于视角的。 0.2°的可视角度称为临界打印尺寸,因为这是实现最大读取速度的点。 (在2°以上,它会回落。)

1 px是0.0213度或1.278分钟的弧度。这是基于像素密度为96dpi @距离28英寸的设备。因此,设备制造商可以使用参考px来基于预期/预期的视距来设置大小。 W3C CSS标准对此进行了讨论。设备制造商使用参考像素px根据预期的观看距离设置实际的光栅化大小。 16px不一定是16个设备像素。例如,在像素比例为2:1的iPhone上,它将是32个设备像素。

因此,卷筒纸的临界打印尺寸是9.4像素的x高度。根据特定的字体设计,这与介于17像素到20像素之间的字体有关。这导致了可访问性标准,该标准指示18px是所需的最小字体大小。

但是等等

还有一个关键对比度。上述字体大小与最大对比度有关。但是如何降低对比度呢?许多设计师使用较低的对比色严重影响其网站的可读性。部分原因是WCAG 2.0无法指定相对于空间频率的正确对比度。 4.5:1超出了大标题的要求,但4.5:1不足以显示小的薄体文字。

对于正常人而言,在对比敏感度函数的峰值处出现大的肥胖标题时,临界对比度可能低至10%。但是在小型细字体的空间频率很高的情况下,对比度需要提高20倍以上。参见下图,其中所有文本都使用相同的CSS颜色(这甚至没有讨论抗锯齿处理文本对比度超出所有识别范围的方式)。

contrast sensitivity curve sowing relation to text size

因此,字体大小以及对比度和许多其他设计功能一起可以提供“最易读”的文本。无论如何,此线程中的许多海报推荐的12px字体大小实在是太小了,任何人都猜到了这个数字。您可以使用诸如12px之类的内容作为版权声明,也可以使用不希望任何人阅读的内容,但是12px绝对不是内容文本的适当大小。

字形有它

官方建议的最小大小为18像素,不过某些字体(例如Verdana(专为网络使用设计的字体))在16像素以下也可以正常使用。但是,Times New Roman的x高度非常小,而且可读性通常很差,因此绝对不应设置为小于18像素(感谢Microsoft,ugh)。对于Microsoft改头换面的另一种字体,让我们尽量不要使用“ Courier New”,Microsoft会采用这种字体,这种字体通常是可读的等宽字体,然后又变得太薄和太轻。就像,他们在想什么?

对于关于字体的可访问性和可读性的一些一般性考虑,我在研究门户帐户中拥有此初步PDF),您可以免费下载: https://www.researchgate。 net/publication/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

最重要的结束语

比设置字体大小更重要的是,允许用户将文本缩放到所需的任何大小而不会破坏内容。当前标准指定200%的缩放比例而不会中断,但这还不够。从用户的角度来看,500%更为合理。

考虑:

20/20是平均视力。我上面提到的字体大小(18像素)基于这个平均20/20用户。 20/40需要相同大小的两倍大小。 20/200用户需要该大小的10倍(即,他们可能希望缩放1000%)。我提到的最低要求是500%,因为考虑到页面上有较大字体以及设备物理尺寸这一事实的含义。

目前正在研究中的一项缺少的技术是放大最小的字体,但缩小较少的大字体,因此大标题不会对可读性太大。

同时,只要考虑到正在阅读您的站点的大多数人没有一个像您一样出色的显示器,并且视力也不如您自己。如果您想了解一些不太幸运的人如何看待您的网站,请购买便宜的,笨拙的,小型的,低分辨率的显示器(您可能有一个显示器),并将其设置为3到4英尺远(例如,一米远)。您会阅读您的网站吗?现在缩放文本-您的站点是否由于小型监视器的限制而中断?

这是许多用户在许多站点上遇到的问题。仅仅因为您具有20/15的视力和漂亮的32英寸视网膜显示屏,并不意味着您的用户具有几乎同等水平的视觉适应能力。

-安迪

0
Myndex

我同意Erik,16pt似乎是可读性最好的标准。在此处阅读更多信息: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell