Style Rules affecting Accessibility/Readability

Line length

The style rule to shorten line lengths can be expressed:


  selector {
    margin-left: 20%;
    margin-right: 20%;
  }

Line height

The style rule to increase distance between lines can be expressed:


  selector {
      line-height: 200%;
  }

Word spacing

The distance between words can be increased to enhance the readability of the text.


  selector {
      word-spacing: 0.3em;
  }

Letter spacing

In the same way as for words, the distance between letters can be increased to enhance the readability of the text.


  selector {
      letter-spacing: 0.2em;
  }

Font size

In many user agents, the user is able to adjust the size of the text. However, it may sometimes be beneficial to provide a default font size that is somewhat increased.


  selector {
      font-size: 120%;
  }

Non-serifed fonts

Many users reading text with western characters prefer fonts without serifs. Font types can be set using the following property.


  selector {
      font-family: arial,verdana, sans-serif;
  }

Text color and Background color: contrast

Some users prefer reading text with inverted or adjusted colors, for example yellow text and black background. In either case, it is important to always keep a high contrast between foreground and background color.
Colors can be set using the following property.


  selector {
      color: yellow;
      background-color: black;
  }

Block-level separation: margin/padding

The separation of block level elements (by adding additional space), and the separation of text content from its surrounding box is controlled via the margin (outer space) and padding (inner space) properties.


  selector {
      margin-top: 2em;
      padding: 0.5em;
  }

practice

Create rules that increase the apparent readability of the sound proof book document.