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:

Advantages of the font-kerning property in CSS

Disadvantages of the font-kerning property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!