使用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;
}

DEMO：http://codepen.io/anon/pen/ojaMEy

Answer 2

如果字体大小为24px，行高设置为1.5em，则文本将与您提供的示例非常相似。之后，将段落分解为易于阅读的块。 这似乎是最简单的答案，只要我不误解这个问题。