main

 An introduction to kerning and character spacing

What is kerning? What is it used for? How can I apply this to Web pages? Many web designers and developers have asked for clarification on the subject. This article aims to help you better understand what kerning is, and what it is used for, and particularly how to use it to get the best out of your projects.

1. What is kerning?
Kerning is the adjustment of the blank space between two consecutive characters of a font to balance that space to best effect. These sequences of characters are called “character pairs” or ” glyph pairs” and they set two pairings (Such as VA and AV) to cover all possible combinations of the two. Stored within the font, these glyphs pairs are activated automatically when typing.

Kerning overview

 

2. What is kerning for?
Simply put, kerning improves the readability of words and the overall comfort when for example, reading long paragraphs. An unsuitable kerning may cause confusion, and sometimes dramatically, in the understanding a word. Important! Do not confuse spacing with kerning! Spacing is the initial space on the right and left side of a character.

 

Kerning pairs helps improve the legibility of long texts

Kerning pairs helps improve the legibility of long texts

3. What happens on the software side? Optical settings vs metric settings
Some software, such as InDesign or Illustrator, allows you to change the initially defined spacing of a font (metric
value) to a desired optical value (optical value). You will find these options in the characters panel. Think of this as an option to organize several words in a phrase, when you are not sure of their spacing. This option is inappropriate for large amounts of text. So I recommend retaining the original metric spacing so that the paragraphs remain legible.

Optical sapcing vs metric spacing in illustrator

4. Some tips for using the optical values in your designs
If you want to optimize the spacing of certain letters in a word (e.g. when creating a logo), don’t hesitate to turn the text upside down to see the word as “a group of letters” to better understand the spacing of the word.

turn the text upside down to see the word as “a group of letters” to better understand the spacing of the word

Although regular spacing is the enemy of kerning, be logical and consistent when spacing the same letters in a word! For greater readability, if you have two letters that are the same, be sure to keep the same spacing.

Finally, do not let your characters “collide” (unless you wish to do so as a special effect). Even when squeezing the text, leave a little space between the characters! Have an eye to set these spacing’s so that your creations are harmonious…

 

5. Spacing of small caps
Usually small caps are used in titles or at the beginning of phrases, small caps require additional inter-character spacing. Don’t worry! These spacing values are already defined in the font and are automatically applied when you use the uppercase.

small caps with additional letter spacingSmall caps without and with additional letter spacing

 

6. Using kerning on web pages
CSS font-kerning allows you to draw on the kerning information which is stored in the font. This property has 3 values: “auto”, “normal” and “none.” The “auto” value leaves the choice to the browser of whether or not to use kerning, the “normal” value forces the application to use kerning, and the “none” value prevents the browser from using the font’s kerning. The internet is full of examples and tutorials of how to apply the correct syntax in your code. I advise you to apply “auto” so that the browser manages font kerning following the displayed font size.

font-kerning: auto;
font-kerning: normal;
font-kerning: none;

 

7. Some details on the kerning of our fonts and our “pro kerning”
Adjusted and set by eye, the kerning of our fonts contains hundreds and hundreds glyph pairs so that they can be read optimally in over a hundred languages. They also contain an “anti-collision” function when using a very constricted text so that characters do not touch.

 

In conclusion
Set by eye, kerning is an important function of a professional font. Whether as titles, long texts, or phrases, whether in uppercase or small caps, our type designer has defined the best kerning, so that any text can be read as smoothly as possible … so trust him!

 

Typefaces used for this article
Interval Next, Strato Pro and Sofia Pro font family