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

如果字体大小为 24px，行高设置为 1.5em，则文本看起来很像您提供的示例。之后，只需将段落分解成易于阅读的块。只要我没有误解问题，这似乎是最简单的答案。

Answer 2

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

您可能还想考虑 letter-spacing，它会在文本字符之间使用更多的空格，从而营造出更 "airy" 的感觉：

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

使用 CSS 提高文本可读性

Improving text readability with CSS

html

css

usability

user-experience