网页的字体大小和行高

时间:2009-07-19 16:13:52

标签: html css

在可读性方面,字体大小和行高的最佳值是什么?

我自己更喜欢巨大的字体大小和更高的线条高度,就像Dive into Python 3中使用的那样。

4 个答案:

答案 0 :(得分:7)

与世界上其他“最好的”问题一样,答案就是“没有'最好的'”: - )

对于font-size,可以说“最好”是用户自己选择的任何一种,无论是默认值还是最小值。换句话说,只为主体副本保留字体大小,并仅为标题增加它。对于非关键内容,可能会考虑将其减少非常小的金额。 16px通常是浏览器的默认值。

对于行高,通常建议使用介于1.3和1.5之间的值以获得良好的可读性,尽管这会因字体面和行长而异。

答案 1 :(得分:7)

根据W3C推荐的内容,始终使用相对字体大小(em)。

使用

h1 { 
    font-size: 2em;
    line-height: 2.5em;
}

而不是

h1 { font-size: 24px; line-height: 30px; }

因此用户始终可以覆盖默认字体大小。

答案 2 :(得分:2)

没有“最佳”字体大小和行高。

这一切都取决于网站的类型。

如果它主要是以文章为主要内容的网站,那么更大的字体和行高可能会更好。

如果是WEB应用程序,那么巨大的字体大小将阻止您构建紧凑且功能强大的界面。因此,您必须采用典型的操作系统字体大小。

一切都取决于。

答案 3 :(得分:-1)

实际上,就网页上的“段落可读性”而言,有最好的字体大小和行高。上述问题的目标很明确:可读性。他们没有要求最好的音乐或着装风格或其他能容忍各种不同口味的东西;他们没有要求我或你的口味或老人的最佳字体颜色,字体大小,但具体[可读性]的最佳字体大小和行高,并且最好的指导方针是最佳实践目的。这不是品味问题,而是光学问题和机械阅读方式;它也需要排版知识。将此简化为“无论你和我喜欢什么”都是味道和效率,颜色和健康之间的混淆。

我将假设问题不是询问标题的字体大小,而是询问屏幕上的段落(因为这是我们在网上主要阅读的内容)。

即使我们礼貌地将现有指南标记为“推荐”,它们仍然为寻求“最佳”提供了答案。在我分享我所知道的内容之前,请注意如果你不是一个排版设计师,或者至少在该领域进行过很好的研究,那么你就没有资格回答上述问题。有时人们确实需要优秀的专业人士向他们展示他们从未意识到的,可能的或存在的;有时人们不确定什么会感觉或看起来“最好”,直到你真正向他们展示并要求他们尝试并看看他们是否喜欢它或者它是否在它们上快速增长。有时候人们会习惯于错误的,不健康的或适得其反的做法,例如坐在懒散的背上或者阅读小时代新罗马的网页,直到错误的做法实际上让他们觉得“舒服”;它成了他们的舒适区!这是否意味着他们的“最佳”是他们习惯性选择的?显然不是;不一定。有时问题是[不]甚至是字体大小!意思是,选择增加字体大小的用户不会因为字体大小而这样做,但因为行长(段落或列宽)太长,或行高太紧,或者有没有任何段落(!),它只是一个文字墙,或者段落和背景颜色太相似,所以它们增加字体大小以弥补这些糟糕的设计问题,当他们会非常开心在设计合理的网页上使用相同的字体大小。

现在,关于段落的字体大小,特别是对于网络上的可读性,最佳或推荐的范围是12px到16px。如果您选择非传统字体,这可能会略有改变,但不建议网站使用。并且在px中指定大小可能比pt(例如,在Microsoft Word中使用的单位)更可取,因为当在px(像素)中指定大小时,浏览器的显示更高一致性; px用于屏幕,pt用于打印。

“无论用户自己选择了什么”的参数都是无效的,因为它假设典型的用户根本不更改浏览器设置中的默认字体大小;这样的假设是非常误导的,并且绝对不代表关于大多数百分比的实际数据或从不困扰更改默认浏览器字体设置的典型互联网用户。

我尊重W3C的建议,但今天大多数浏览器完全能够用Ctrl +(+)增加屏幕上字体的大小,即使大小是由px指定的,而Ctrl + 0也是为了让页面返回到原始尺寸。在大多数情况下,知情设计师实际上会指定段落,行高和宽度列的字体大小,以便它们互相补充并增强可读性。因此,仅由不知情的用户改变精心设计的页面的字体大小实际上可能会损害可读性而不是增强它,特别是对于长段落。可以理解的是,可访问性很重要,有时需要一些政府网站,但设计师仍然可以考虑,因此当用户增加字体大小时,列宽会增加;在这种情况下,您将使用em单位而不是px,范围将从0.75 em到1 em(除非基本字体大小被“body {font-size:62.5%;}”CSS语句攻击,那么范围是1 em到1.6 em)。

关于段落的行高,建议的绝对最小值为150%。在大多数情况下,你不需要超过175%。

再次对于网络可读性,sans-serif字体(如Verdana)对于段落而言比serif字体更受推荐(例如' Times New Roman')。对于印刷,情况正好相反。

在网络上使用的两种最推荐的字体是Verdana和Georgia。为了获得最佳效果,请将它们进行对比:最佳组合是段落的Verdana和标题的格鲁吉亚。

您还应该考虑您的内容列宽:它应该适合平均每个生产线75到85个段落字符(13到18个字)。如果行长于此行,则Web可读性会受到影响或减慢;比那更窄,你的段落看起来很尴尬。

对齐?不,传递它;它会减慢读取速度,从而影响可读性,特别是对于快速阅读器(并且您希望快速读者喜欢您的网站!)。坚持左对齐英语。

所有这些建议的原因都可以在任何流行的网页排版书中找到,并且可以由大多数排版设计师解释,如果你真的想要了解背后的智慧,以便确信这些建议(或“最好的”) “练习指南”有很好的理由。太大(或巨大)的字体,可读性实际上[没有]增强,但对大多数普通读者而言是妥协的;太小的字体,同上。为什么?同样,您可以使用我分享的关键字进行研究。

总结一下,对于段落的网络可读性:Verdana(sans-serif),12-16px(非pt,0.75 em到1 em,当可访问性非常重要时),行高150%-175%,75每行-85个字符(控制列宽)。