CSS font-kerning

The word kerning means an adjustment of spacing between letters or characters. And the CSS font-kerning property is used when we need to define how letters are spaced. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #mydiv{font-kerning: normal;}
   </style>
</head>
<body>
   
   <div id="mydiv">
      <h2>The font-kerning Property</h2>
      <p>This is an example of font-kerning property in CSS.</p>
   </div>
   
</body>
</html>

Output

The font-kerning Property

This is an example of font-kerning property in CSS.

The "font-kerning" property specifies whether kerning information stored in a font is used or not. Kerning is the process of adjusting the space between specific pairs of characters to create aesthetically pleasing typography.

In this example, the CSS rule sets the "font-kerning" property of the "mydiv" element to "normal", which means that the font's kerning information will be used to determine the spacing between characters.

In addition, the HTML code includes a "div" element with the ID "mydiv" that contains a heading and a paragraph of text. Because they are contained within the "mydiv" element, these elements will inherit the "font-kerning" property from the CSS rule.

CSS font-kerning syntax

The syntax of the font-kerning property in CSS is:

font-kerning: x;

The value of x should be any of the following:

normal: used to apply the normal kerning
auto: used to allow the browser to determine whether the font-kerning should apply or not. This is the default value.
none: used not to apply the font-kerning

Advantages of the font-kerning property in CSS

By adjusting the kerning, you can enhance the overall typography of your text and make it easier to read and more aesthetically pleasing.
By reducing the distance between some character pairs that might otherwise appear too far apart, the kerning can be changed to make the text more readable.
You can alter the spacing between characters to suit your design and brand thanks to the ability to change the kerning.

Disadvantages of the font-kerning property in CSS

Because not all browsers support the "font-kerning" property, your kerning changes may not appear on all devices or platforms.
Too much kerning can make the text look uneven and difficult to read, so it's important to use this property sparingly and with caution.
Because adjusting the kerning may affect text legibility for users with certain visual impairments, it's critical to ensure that your design is accessible to all users.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!