作为正文文本,哪些Web安全字体对眼睛更具可读性?不应使用哪些网络安全字体?

时间:2010-02-24 13:26:06

标签: css xhtml fonts usability accessibility

哪个web-safe fonts作为正文可以让眼睛更具可读性?不应使用哪种网络安全字体?

为了更好的可读性,<p>body text</p>的最小字体大小应该是什么?

我们应该为<H1/2/3/4/5/6><p> <ul><ol>使用什么字体?我们应该为<p><ul><ol><th> <td>使用相同的字体大小吗?

什么是平衡排版字体大小调整方案?

8 个答案:

答案 0 :(得分:8)

我发现Verdana对于大块文本来说非常容易。 然而,单独的字体系列不会带来重大改进。

您应该小心文本块的宽度。流行的用法表明,每行12到16个字之间的任何地方都很舒适。

还要确保具有平衡的线高,以便行之间的垂直距离提供足够的空白。将大块文本分成具有底部填充/边距至少是线条高度两倍的段落,使它们更加突出。

我不相信在标题上调整字体大小是一个灵丹妙药。我建议你使用弹性尺寸(em而不是px)字体。这使得内容更容易适应各种屏幕尺寸和分辨率。

无论你选择什么,你都应该注意标题大小以及字体重量或着色之间的明显区别。将标题之间的差异变得非常微妙通常是一个坏主意。

我建议h6,最后一个标题,至少比通用文本块大一些,并以粗体字体重。让它看起来与包裹在STRONG标签中的元素看起来一样令人困惑。

使P,OL,TH和TD的字体大小相同,我认为这部分是品味问题,但更重要的是范围问题。

如果您的TABLE显示定价选项,我肯定会使用更大的TH和TD元素字体,以吸引用户的注意力。

答案 1 :(得分:5)

Wichita State的Software Usability Research Lab已对字体进行了一系列研究,其结果可用于为您的目的选择正确的字体和大小。对于文本段落的原始可读性,12点Tahoma似乎consistently执行the best。坎布里亚可能更擅长阅读individual characters(他们没有对阅读段落进行测试,也没有直接对Tahoma进行测试)。

一般来说,12分优于10分,但14 is not better than 12,除非你在说elderly users

如果大小是区分标题的唯一方法,那么,根据MIL-STD 1472,每个级别应比下一个级别至少大25%。因此,如果你使用H1到H3和12点段落,则H3 = 15 pt,H2 = 19 pt,H1 = 24 pt(最小值)。但是,如果您使用其他方法来指示层次结构,例如缩进,粗体字或部分编号方案(例如#。#。#),那么某些级别可能与其他级别相同。

数字和未编号的列表应使用12磅,因为它们通常是句子。对于表格内容或数据字段,您可能可以使用较小的字体,可能小到9磅,因为用户通常一次只扫描和读取一个单词或数字,但我不知道任何实际比较扫描/滚动与可读性权衡的研究。

答案 2 :(得分:1)

尝试使用不同的字体制作不同版本的网站,并要求用户选择最容易阅读的版本。

关于字体的良好做法:

  • 不要使用太多不同的字体 一页
  • 使用相对字体大小,以便用户 可以在浏览器中放大字体大小 设置
  • 按钮“放大字体”和
    界面中的“缩小字体”和
    保存cookie中的用户设置

它自己的字体选择是美学的,你不能在这里得到正确的答案 - 你喜欢自己的那个。

对于网络安全字体,请尝试以下链接:http://en.wikipedia.org/wiki/Web_typography

答案 3 :(得分:1)

http://bigital.com/english/files/2008/04/web_legibility_readability.pdf

根据这项研究,Verdana提供更好的速度,舒适和理解力。此外,它表明最佳线长约为60-80个字符。

答案 4 :(得分:0)

IMO:避免使用Comic Sans,使用字体大小10+ pt。

答案 5 :(得分:0)

重读可读正文:今天,最倾向于给出的答案是使用无衬线字体(参见例如readability guidelines)。指南似乎也回答了大多数其他问题。

在五到十年的时间里,如果显示容量不断增加,答案可能是serif字体。

答案 6 :(得分:0)

你试过这个吗?

@font-face {font-family:Tahoma;src:url(/path/to/tahoma.eot);}
@font-face {font-family:Tahoma;src:url(/path/to/tahoma.otf) format("opentype");}
@font-face {font-family:Tahoma;src:url(/path/to/tahoma.ttf) format("truetype");}

这会强制浏览器使用您自己的字体。

答案 7 :(得分:0)

对我而言,这是一个三部分问题,所以让我把答案分解为这三个部分:

  1. 可读性:可读性的经过验证的字体组合是格鲁吉亚的标题和Verdana的正文。 Verdana也可以向另一个方向发展,它是标题和格鲁吉亚的无衬线字体,是正文的衬线字体。我认为“纽约时报”仍在使用“新时代的罗马时报”。为了一切。毕竟,它是一份报纸......
    • 这两种字体都是网络安全的&#39;并且可以在90%以上的设备上使用,因此您可以非常安全地使用它们。什么是网络安全而不推荐? Comic Sans MS,Papyrus,Chalkboard,基本上任何常见的嫌疑人,任何过度使用和难以阅读的字体......
  2. 强烈建议将您的body元素文本大小设置为100%,并相信它会将您的正文文本渲染为大约16px。如果您愿意,也可以强制它为16px。为了便于阅读,建议不要低于14px且不超过18px。使用rem或em设置可以帮助最终用户使用浏览器设置调整大小。
    • 根据经验,H1应该是p的两倍。如果你使用16px作为p,则将h1设置为32 + px。我使用因子0.87来改变h1~h6,所以最终得到36,32,28,24,21和&amp; 18全像素或rem单位。将p设置为16,菜单,ul,ol,dl,li,dt,dd,td,th等为14.将标题的行高设置为1.25,将列表和表设置为1.5,将段落设置为1.7。设置列表的边距和填充,并为段落设置margin-bottom以将它们分开。
    • 每行文本最多不超过60个字符,内容宽度约为960像素。这是相当平衡和可读的。
  3. 您可以做的另一件事是通过Google字体加载选择的字体。这样,您就可以为访问者提供所需的字体。您还可以设计您的网站,非常了解它将如何在屏幕上呈现,而不是如此关注他们将使用的内置字体。谷歌字体现在正在协助配对字体,这有助于。