html - 使用 CSS 提高文本可读性

Question

我正在尝试设计 this pen而且我无法为文本找到正确的 CSS 以使其更具可读性并且看起来不拥挤。

核心 CSS:

p{
    color: #000;
    font-size: 16px;
    line-height: 1.25em;
    padding: 0 0 1em 0;
    text-align: justify;
}

我计划将改进后的 CSS 用于普通桌面版和移动版。这是我认为是移动设备可读性的一个很好的例子的屏幕。

Answer 1

line-height, font-size, color 都不错。我通常使用 color: #333 或 color: #777 来减少白色背景和黑色字母之间的对比度。

您可能还想考虑 letter-spacing ，这会在文本字符之间产生更多的空白，从而营造出更“通透”的感觉:

h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: .05em
}

p {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
  letter-spacing: .03em;
}

演示:http://codepen.io/anon/pen/ojaMEy