11
2010-04

网页排版设计模式和最佳实践!

 

广告

即使是一个相对有限的一套CSS中的选择, 活版印刷 可以千差万别使用纯粹的CSS语法。 Serif或无衬线?大或小的字体?线高度,间距,字体大小和填充...这样的例子不胜枚举的例子。

为了找到排版设计图案,在现代网页设计共同解决一些常见的排版问题,我们进行了50个事项的字体比平常更多的(或至少应该比平常更多的事情)热门网站广泛的研究。我们已经选择了流行的报纸,杂志和博客,以及各种字体的相关网站。

我们已经仔细分析了它们的字体和样式表和异同搜查。我们也成立了一个 电子表格的研究 显示的网站的各种值(例如,与行的高度和线路长度之比)。

最终,我们确定 13个一般印刷问题 印刷及有关设计问题,并试图通过我们的研究,以寻找他们的答案:

  1. 受欢迎的程度如何衬线和无衬线体复制和标题字体?
  2. 哪些是最经常使用的字体?
  3. 什么是平均字体大小?
  4. 什么是之间的标题和正文字体大小平均比例是多少?
  5. 什么是正文平均线的高度?
  6. 之间有什么行的高度和正文字体大小平均比率的副本?
  7. 什么是高线和线之间的长度在正文平均比例是多少?
  8. 什么是段落之间的间距平均金额?
  9. 什么是段间距平均比例在体内复制到行的高度?
  10. 如何链接样式?
  11. 如何每行的字符中是常见的身体副本?
  12. 往往是强调如何联系?
  13. 多久更换字体(sIFR那样,等)使用?

我们终止了坚实的数据,我们评估和这篇文章做好准备。根据统计,我们已确定了拇指几个“规则”对2型糖尿病的工作。请注意,这些规则往往可以,但不总是,被认为是最佳做法。

 

顺便说一下,[你知道我们有一个全新的自由 粉碎电邮通讯?立即订阅并获得新的短提示和技巧星期二!]

1。细体主场迎战无衬线字体

无论是设计人员应该使用衬线或无衬线字体用于正文是最讨论并从Web上的排版尚未解决的问题之一。有些设计师喜欢把他们的头条新闻衬线(这是在结束简短的信装饰线条笔划)给他们更多的吸引力。主要的原因为您的选择serif字体的标题是, 在大尺寸,衬线字体容易阅读,并期待很大。该 对比 之间的标题和正文为无衬线字体的衬线字体可以有趣的。

一些设计师喜欢身体副本衬线字体,因为他们相信在年底的信行招帮助引导读者从一个字母到下,使扫描和阅读更舒适。

Sans-headlines in Typographic Design Patterns and Best Practices

根据我们的研究,无衬线字体更比头条衬线字体的欢迎,尽管他们似乎已经流行近几年下降。

  • 60%的网站使用的标题的SAN - serif字体,主要是宋体中,Verdana龙力兰德和Helvetica。其中包括: 美国有线电视新闻网ArsTechnica石板英国广播公司NewScientist
  • 只有34%的网站使用一个正文衬线字体。其中包括: 纽约时报Typographica时间艾加新闻周刊
  • 对于最流行的serif字体的标题是格鲁吉亚(28%)和巴斯克维尔(4%)。
  • 对于人体复制最流行的serif字体是格鲁吉亚(32%)和时代新罗马(4%)。
  • 最流行的无衬线字体是Arial字体的标题(28%),黑体(20%)和Verdana(8%)。
  • 最流行的无衬线字体用于正文是宋体(28%),Verdana字体(20%)和很好的可读性,(10%)。

三分之二 我们调查的网站使用无衬线字体用于正文。主要的原因可能是因为,尽管先进的字体替换技术,如越来越受欢迎 Cufón大多数设计师坚持核心Web字体,基本上让他们只有两个可行的方案:格鲁吉亚和宋体。而由于重视宋体的耻辱(这往往使一个现代化的网站都显得过时了),他们只剩下格鲁吉亚。无衬线字体提供 更多元化 为Web选项。

Serif-body-copy in Typographic Design Patterns and Best Practices

2。哪种字体是最受欢迎?

奇怪的是,尽管字体替换技术的日益普及,越来越多的新的预安装的字体,例如Windows Vista和Mac的字体(可用性),在我们的研究设计,主要用于传统的,核心的Web字体中,唯一的例外是很好的可读性,(其中来自只有在Mac上安装),黑体和巴斯克维尔。

Most-popular-typefaces in Typographic Design Patterns and Best Practices

正如人们所期望的, 宋体,格鲁吉亚和Verdana 用于复制的身体今天的多数。在我们的研究中,大约80%的网站使用这三种字体。至于其余的20%,设计师的最爱 黑体 是一种流行的选择,是 具有很好的可读性

有了这样的Verdana和Arial作为秋季的挫折,设计者可用选项确实没有理由不指定其他非标字体,以达到最好的效果。你可以了解在弥敦道福特的文章字体栈更先进的CSS 更好的CSS字体书库 和CodeStyle的 建立更好的CSS字体书库

Jontan in Typographic Design Patterns and Best Practices
乔恩谈 用衬线字体巴斯克维尔的标题和正文为衬线字体格鲁吉亚。

Verdana是用最小的头条新闻。只有10个网站用身体将它复制到开始,只有4个使用它的头条新闻。主要的原因是Verdana字体放在一个字母之间的间距,这使得它不是在一个整洁看大尺寸很多。如果你要使用它的标题,你可能想利用CSS的优点 字母间距 财产。格鲁吉亚和Arial 最流行的字体 作标题。

最后,我们注意到,“另类”的字体用于比正文标题等等。设计师似乎更 愿意尝试 比与主体的标题。如果你想使你的下一个设计的一些排版的变化,标题可能是最容易开始的地方。

3。光或暗的背景?

我们很想了解在何种程度上愿意与设计师暗背景色实验。我们看出去的任何版式为导向的网站,有一个黑暗的配色方案和惊讶地发现没有一个。

Ny in Typographic Design Patterns and Best Practices
纽约客 已与宋体浅色计划,用于标题和正文。

纯白色背景 身体复制赢得了压倒性的胜利。然而,许多设计上避免了纯白色纯黑色高对比度,文本颜色,往往是有点轻于纯黑色。设计师明确地侧重于可读性和避免与背景色试验。黑色在白色的反差容易阅读和是,至少在这些网站的现状。

4。平均为标题的字体大小

当然,对标题的字体大小的选择取决于在设计中使用的字体。在任何情况下,我们的研究目前最流行的字体大小介于18至29像素的18至20个像素和24至26像素是最流行的选择。

Font-size-headlines in Typographic Design Patterns and Best Practices

我们的研究没有取得任何明显的赢家。平均为标题的字体大小是25.6像素。但请注意,18日和29日之间的任何大小可以有效像素,它取决于你如何毕竟标题适应, 网站的整体设计。不过,您可以尝试使用尺寸较大的试验,因为显示器总是越来越大,因为是显示分辨率。

一个明显的异常是 威尔逊迈纳 (下面的截图),谁使用他的标题是48像素大量的字体大小。他的网站是一个特例,但因为他的职位都极短的冠军,只有几句话。

Miner in Typographic Design Patterns and Best Practices

5。平均体字体大小复制

你还记得两年前当网页设计了7个微小的,几乎没有可读的元素,和身体的副本设置为8像素塔霍马?小字体大小了,而且越来越多的设计师正在转向现代的大字体的大小。从我们的样本大小,我们看到一个明显的趋势走向大小介于 12和14像素。最流行的字体大小(38%)是13像素14像素略超过12像素受欢迎。整体而言,身体平均拷贝字体大小为13像素。

Body-copy-font-size in Typographic Design Patterns and Best Practices

我们注意到(正如人们所期望的那样)越来越受到重视,获得最小的排版细节。破折号,引号,脚注,作者姓名,介绍性文字和段落都经过精心设置,并在考虑到最佳的清晰度。类型设置通常是非常一致的,与白色的空间很大,领导和填充。

Turning in Typographic Design Patterns and Best Practices
Typographica 使用其文章的引言段大字体大小,然后恢复到了正常大小的文本的其余部分。

标题正文字体尺寸比

为了更好地了解和身体之间的标题字体大小的关系,我们除以它的身体字体大小每个网站的标题的字体大小。我们把这些比率平均所得一 经验法则 为你工作:

标题的字体大小÷正文字体大小= 1.96

总的价值,那么,是1.96。这意味着,当你选择了你的身体复制字体的大小,您可能希望 它乘以2 让你的标题的字体大小。这当然取决于你的风格,经验法则不一定会带给您为您的特定设计的最佳大小。另一种方法是使用传统的规模(6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72)或斐波纳契序列(如16 - 24 - 40 - 64 - 104),以获得自然的排版效果。

6。车身高度线的最优复制

领导(或行高)将始终取决于你选择的字体大小和测量(或线的长度)。一般来说,时间越长,措施,时间越长,领导应该是。因此,提出了在像素领导就没有意义在这里,最流行的选择图表。更适当的将是你使用,如EM或百分比值相对单位,这决定了领导和措施之间的关系与领导和字体大小。

根据我们的研究:

  • 行高(像素)÷正文字体大小(像素)= 1.48
    请注意,1.5是一个常在经典印刷书籍的推荐值,所以我们的研究支持这一经验法则。很少有网站使用任何少一些。该网站的1.48下降到上面你得到这个值进一步的数目。
  • 线的长度(像素)÷行的高度(像素)= 27.8
    平均线长度为538.64像素(不包括利润和填充),这是相当大,考虑到许多网站仍然使用自己的身体复制的字体大小为12至13像素。
  • 段落之间的空间(像素)÷行的高度(像素)= 0.754
    我们被这样的结果感到惊讶。原来,段间距(即一个段落之间的和未来的第一行)的最后一行的空间很少等于领导(这将是完美的垂直节奏的主要特征)。更多的时候,段落间距只有75%的领导段。其原因可能是领导通常包括采取下伸了空间,因为大多数字符没有下伸,额外的空白下创建的路线。

Aiga in Typographic Design Patterns and Best Practices

艾加 是一个很好的例子最佳领先。其字体大小为13.21像素(从环境管理体系转换),其高度为19.833像素线(从环境管理体系转换)。事实上,19.8333 ÷ 13.2167 = 1.5011。

所以,一旦你决定在你的身上复制的字体大小,这个值乘以1.5会给你的最佳路线的高度。一旦你有,你可以乘以27.8这个新的价值得到您的最佳路线的长度。请注意,布局还需要排水沟,利润率和padding让身体呼吸的副本。

Newsc in Typographic Design Patterns and Best Practices

新科学家 有20个段落之间的间距像素。

7。每行的字符如何?

据网络版式,55至75个经典的规则是每行字符的最佳数目。出人意料的是,我们的研究表明,大多数网站已经有了较大的数字。我们计算可以容纳多少个字符在一个设计使用的默认字体大小一致。结果,这是一个平均 88.74 每行字符(最大),是非常高。当然,这是最大的数目从每行,在75至85个不等的一般每行字符的字符的平均数目不同。尽管如此,上述范围的传统范围的方式 - 非常特殊。

Characters-per-line in Typographic Design Patterns and Best Practices

每行73至90个字符是一间设计流行的选择,但我们也发现异常值: 单片眼镜 (每行47个字符) 框和箭头 (每行125个字符)。为了获得一个更准确的阅读每个网站,你将需要采取一 平均字符数 从多个行。

其他调查结果

  • 46%的网站在强调自己的身体复制的联系,而其他突出了一个大胆的字体颜色或重量只有。
  • 6%的网站所使用的一些图像的标题或正文(如更换种类 单片眼镜纽约客新闻周刊)。
  • 96%的网站没有理由的文本。
  • 网站给了他们的文本左填充平均11.7像素(左内容区域边界点票)。

结论

研究表明一个共同的做法和网页设计类型设置一套明确的指导方针。但是请注意,这些结果是不是科学,应该只能是粗略的准则:

  1. 无论是衬线或无衬线字体是正文和标题的罚款,但无衬线字体更是为流行。
  2. 为标题的共同选择是格鲁吉亚,Arial和黑体。
  3. 身体常见的选择是格鲁吉亚的副本,宋体,Verdana和很好的可读性。
  4. 最流行的标题的字体大小是18至29范围内的像素。
  5. 最流行的正文字体大小的副本是12至14范围内的像素。
  6. 标题的字体大小÷正文字体大小= 1.96。
  7. 行高(像素)÷正文字体大小(像素)= 1.48。
  8. 线路长度(像素)÷行的高度(像素)= 27.8。
  9. 段落之间的空间(像素)÷行的高度(像素)= 0.754。
  10. 每行字符的最佳数目是55至75,但75至85个字符,每行更受欢迎,
  11. 正文文本是左对齐,图像更换很少使用和联系,是不是强调或突出了大胆的或颜色。

当然,这些“规则”不是一成不变的。相反,它们是一组 粗略指引 你可以使用它作为一个用于设置字体的基础。每个网站都是独一无二的,你可能需要修改你的设计在每一个阶段的选择,以配合您的布局。您也可以 看一看在研究电子表格外观 和出口的数据作进一步分析。

« 上一篇下一篇 »

相关文章:

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。