Web排版的缩放

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

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

——作者:

——译者:大漠

Web排版的缩放

在RWD(Responsive Web Design)中,有关于bodyheader和设备之间的比例和规律,正如marginfloatmedia queries是值得大家观注。Jason PamentalH+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
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/a-more-modern-scale-for-web-typography.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部