Web排版的缩放

作者：大漠 日期：2014-01-20 点击：1644
Responsive
typography

本文由大漠根据的《A More Modern Scale for Web Typography》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://typecast.com/blog/a-more-modern-scale-for-web-typography，以及作者相关信息

——作者：

——译者：大漠

Web排版的缩放

在RWD(Responsive Web Design)中，有关于body，header和设备之间的比例和规律，正如margin、float和media queries是值得大家观注。Jason Pamental对H+W设计做出详细的解说，你可以通过示例演示来了解缩放比例变化。

我是一名响应式设计的忠实粉丝。我始终认为，为不同的设备提供不同的布局效果，给用户最好的体验，响应式设计是最好的实现方式。但在大多数情况之下，你会发现有关于响应式设计都会忽视文本排版相对缩放性。

我个人认为他们很不协调，就我个人经验来说，不同设备下，字号和间距都应该不是绝对的，而是相对的，他们应该根据设备进行一定的比例缩放。所以我提出一个新的话题，我们应该为页面的文本在响应式设计下提供一个相比缩放比例，提供一个更好的可读页面，给用户一个更好的体验。

设置缩放

对于很多人来说，在我们的设计中为可读性和排版设置好初始的比例之后更多关注的是为不同的断点提供不同的浮动和布局的宽度。

我们常会错过他们的比例是什么。在每一个设备上，h1的字号相对于body的3倍(3em)，h2是2.25倍(2.25em)，其他的依此类推。

Web排版的缩放

在所有视窗下给所有元素设置相比的缩放，阻碍其平衡性和可读性。

问题是，随着屏幕尺寸变小，和更少的内容可见。元素之间的比例显得有些夸张。现在需要的是更多的细节性和灵活性，以保持更佳平衡性和更好的可读性。

一个现代的缩放比例

Robert Bringhurst开创了一套行之有效的排版风格，在此基础上我花了不少时间完善不同设备下效果。在此保留了他的精神，让排版可以缩放过渡，在跨屏幕显示过程更能平衡。(这是我完成后的CSS代码)。

Body Font Size Line Height Characters
Print 12pt 1.25em 60-75
Desktop (lg) 1em (16px) 1.375em 60-75
Desktop 1em (16px) 1.375em 60-75
Tablet (lg) 1em (16px) 1.375em 60-75
Tablet (sm) 1em (16px) 1.25em 60-75
Phone 1em (16px) 1.25em 35-40 
body {
  font-size: 100%;
}
body, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
}
/* Body Content */
#page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25;
  /* equivalent to 20px */
}
@media (min-width: 43.75em) {
  #page {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.375;
    /* equivalent to 22px */
  }
}
H1 Font Size Line Height
Print 36pt 1.25em
Desktop (lg) 3em (48px) 1.05em
Desktop 3em (48px) 1.05em
Tablet (lg) 2.5em (40px) 1.125em
Tablet (sm) 2em (32px) 1.25em
Phone 2em (32px) 1.25em 
h1 {
  font-size: 2em;
  /* 2x body copy size = 32px */
  line-height: 1.25;
  /* 45px / 36px */
}
@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em;
    /* 2.5x body copy size = 40px */
    line-height: 1.125;
  }
}
@media (min-width: 56.25em) {
  h1 {
    font-size: 3em;
    /* 3x body copy size = 48px */
    line-height: 1.05;
    /* keep to a multiple of the 20px line height 
    and something more appropriate for display headings */
  }
}
H2 Font Size Line Height
Print 24pt 1.25em
Desktop (lg) 2.25em (36px) 1.25em
Desktop 2.25em (36px) 1.25em
Tablet (lg) 2em (32px) 1.25em
Tablet (sm) 1.625em (26px) 1.15384615em
Phone 1.625em (26px) 1.15384615em 
h2 {
  font-size: 1.625em;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615;
  /* 30px / 26px */
}
@media (min-width: 43.75em) {
  h2 {
    font-size: 2em;
    /* 2x body copy size = 32px */
    line-height: 1.25;
  }
}
@media (min-width: 56.25em) {
  h2 {
    font-size: 2.25em;
    /* 2.25x body copy size = 36px */
    line-height: 1.25;
  }
}
H3 Font Size Line Height
Print 18pt 1.25em
Desktop (lg) 1.75em (28px) 1.25em
Desktop 1.75em (28px) 1.25em
Tablet (lg) 1.5em (24px) 1.25em
Tablet (sm) 1.375em (22px) 1.13636364em
Phone 1.625em (26px) 1.13636364em 
h3 {
  font-size: 1.375em;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364;
  /* 25px / 22px */
}
@media (min-width: 43.75em) {
  h3 {
    font-size: 1.5em;
    /* 1.5x body copy size = 24px */
    line-height: 1.25;
  }
}
@media (min-width: 56.25em) {
  h3 {
    font-size: 1.75em;
    /* 1.75x body copy size = 28px */
    line-height: 1.25;
  }
}
H4 Font Size Line Height
Print 14pt 1.25em
Desktop (lg) 1.125em (18px) 1.22222222em
Desktop 1.125em (18px) 1.22222222em
Tablet (lg) 1.125em (18px) 1.22222222em
Tablet (sm) 1.125em (18px) 1.11111111em
Phone 1.125em (18px) 1.11111111em 
h4 {
  font-size: 1.125em;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}

@media (min-width: 43.75em) {
  h4 {
    line-height: 1.22222222;
    /* (22px / 18px */
  }
}
Blockquote Font Size Line Height
Print 24pt 1.45833333em
Desktop (lg) 1.5em (24px) 1.45833333em
Desktop 1.5em (24px) 1.45833333em
Tablet (lg) 1.5em (24px) 1.45833333em
Tablet (sm) 1.25em (20px) 1.25em
Phone 1.25em (20px) 1.25em 
blockquote {
  font-size: 1.25em;
  /* 20px / 16px */
  line-height: 1.25;
  /* 25px / 20px */
}
@media (min-width: 43.75em) {
  blockquote {
    font-size: 1.5em;
    /* 24px / 16px = */
    line-height: 1.45833333;
    /* 35px / 24px */
  }
}

尺寸的相对缩放都是基于<body>标签，当你设置字体大小为100%时，浏览器的下的字号大小为16px。大多字体都遵守(ISH)标准，基于<body>标签。我们也可以使<p>继承标准上的字号，让其按比例显示。

重要的是，虽然在每个断点上都保持自己自己状态，当您改变断点时，尺度的变化也是有必要的。

缩放的意义何在

为什么一个宽度不够？

我们都知道“66字符”规则：Bringhurst推荐的直线长度是最清晰的、可读性强和打印最适合（Richard Rutter在他的Web适应性中也赞成Bringhurst的方法在Web中更为精准）。在Web中，16px(1em)的文本，所中的字符是60~70个，而标题应该是48px(3em)。

这些建议是基于很多原因上的：

  • 人们是如何阅读？
  • 从一行的末尾到下一行的开始，难易程度不一样；
  • 快速了解副本块之间各标题相对的重要性

它的工作，让人感觉和谐。它的运用具有显著的优势，这也是我们必须得记住的，基于单列打印或桌面布局。

Web排版的缩放

上图展示每行66个字符分别在PC机和移动端设备上的效果。

不幸的是，当屏幕大小改变时，从根本上会打破“66字符”规则。Bringhurst讨论过，多栏设计情况(如报纸)更匹配小的视窗，他建议的字符长度是“40~50”个。但这也不是绝对的，当你设置了1em的margin之后，每行"40~50"个字符让用户阅读感觉比较辛苦。

Web排版的缩放

上图展示了在移动设备上每行“40~50”字符与每行“35~40”字符的效果对比。

每行出现多少最大字符数必须要有一个权衡。经过大量的实验证明，就我个人经验而言，智能手机上每行显示“35~40”个字符是最佳状态。可以提供更清晰和可读的文本。

当然，一旦你开始改变线长度（line length），很多属性都会受到影响。

从顶部开始

不要忘记了，标题也要多注意，一个简单的缩放在所有视窗下并不会起作用。

Web排版的缩放

如上图所示，标题使用同一个比例是比较愚蠢的，这里就是在所有的媒体查询中设置了h1的值为3em。

例如，在桌面（Desktop）中标题相对于body设置了3em看起来很正常，也很适合。但在一个小屏幕上浏览就变得难看了，因为他没有合理的用好空白的间距。

在我的代码中，正文和标题都采用了他们的变化比率，比如，我们从桌面移动智能手机上时，标题h1从3em变到2.5em到2.0em。

Web排版的缩放

打开示例，调整视窗大小，查看标题的缩放比率。

创建了一个简单的示例页面让你查看效果（你也可以下载示例代码）。如果你调整视窗大小，你可以看到标题会随着视窗缩放进行改变(如果你将右上角的开关设置为"off"状态，不管在哪个断点下，标题大小都一样，不会做任何的改变)。

在更小的断点上，标题看上去没有等级之分，然而字体大小只是设计的一个因素。你可以通过改变颜色或者字体，创建良好的视觉层次和对比度。

Web排版的缩放

还记得，标题包含了桌面上的效果，但也要考虑小屏幕设备中的效果。所以你得考虑为标题采用适当的行高，否则标题和后面的文字之间会有一个超大的间距，看起来有点难看。

考虑空白间距

相对于较短的行(line length)可以考虑严格的line-height，但必须为视窗添加更多的文本。然而，更小的视窗需要适配设计，往往要保留背景和原始设计元素。这样直接导致相当大的空间提供给设计中的背景图像或纹理，阴影等。结果是没有足够的空间，也导致内容两侧没有足够空间，从而使阅读体验更差。

通过降低主要内容区域（如当有一个背景图像或纹理和主要内容区域，他们每个都有外边距）的外边距之外，你可以给内容更多的空间，每行允许显示更多的文本字符。对于小屏幕，我更倾向于不在body设置颜色和纹理，让内容更靠近边缘——设置一个简单单一的外距。如在320px有宽度下，我们需要显示更多的文本。

实现我自己的缩放

你可以根据不同的媒体查询给你的CSS样式设置正确的缩放比例。根据你的设计，给不同的断点提供需要的比例。

请注意，在我的示例文件中，我也试着使用一个高于或低于行高的外边距，用来维持一个合理的垂直方向的距离。给标题设置行高也是如此。里面的注释说明了计算的方式。

总结

响应式设计是一个大问题，你的排版是你的设计中最起来注目的一个元素。你有工具，不要为不同的设备设置一个相同的缩放比例，导致主体瘦长，标题大，看不到正文，以及两者之间存在怪异的间距。当然不同的设计师，采用的字体不一样。所以我们不会做一个模板应用于所有的项目之上。但它可以给你一个好的开始，当屏幕发生变化之时，可以帮助你保证你的设计有层次结构。因此，有了它之后，可以让你的响应式更完美。如果你有更好的想法或者相关经验，希望在下面的评论中参与讨论，我们可以一起学习。

扩展阅读

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

英文原文：http://typecast.com/blog/a-more-modern-scale-for-web-typography

中文译文：http://www.w3cplus.com/css3/a-more-modern-scale-for-web-typography.html

返回顶部