使用CSS改善文字可读性

Question

我正在尝试设计这支笔的样式，但我无法完全获得正确的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