Letterspacing & Kerning

Apr 06 2017- POSTED BY projecth 0 Comment

Letterspacing

Letterspacing Rules:

  1. Headings can usually use a little tighter letterspacing.
  2. Do not letterspace body text unless it’s absolutely necessary to aid legibility.
  3. Don’t letterspace your type out too much, as words and spaces will get muddled.

Kerning

Letterspacing affects the spacing of the text as a whole.
Whereas kerning deals with the space between specific pairs of letters.

Use the following CSS code for your body tag to enable kerning and ligature to enhance the look of text on your project.

body {
  font-feature-settings: "kern", "liga";
  -moz-font-feature-settings: "kern", "liga";
  -moz-font-feature-settings: "kern=1", "liga=1";
  -ms-font-feature-settings: "kern", "liga";
  -o-font-feature-settings: "kern", "liga";
  -webkit-font-feature-settings: "kern", "liga";
}

Kerning can be achieved on the web today through the help of jQuery plugins like LetteringJS, and by setting text-rendering to OptimizeLegibility