编程技能 · CSS

CSS 让文字排版更易读

同样一段文字，行高、字号、段落间距不同，阅读感受会差很多。CSS 负责「看起来怎么样」。

三个常用属性

body {
  font-size: 16px;
  line-height: 1.7;
  color: #1c2430;
}

p {
  margin-bottom: 1em;
  max-width: 40em;
}

为什么限制行宽

一行太长，眼睛来回扫动会累。max-width 把段落收在舒适宽度内，对笔记和说明类页面尤其有用。

• 先保证对比度：深字浅底，或反过来，避免灰上灰。
• 标题与正文拉开字号差，层次会立刻清楚。
• 改样式时一次只动一个变量，方便对照效果。