Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS font-kerning Property

The font-kerning property in CSS asserts the use of the kerning information that is stored in a font. Kerning process defines how the letters are spaced.

In well-kerned fonts, this property makes the character spacing more uniform and pleasant to read than it would be. This property is specified as one of the keyword values like- auto, normal, and none.

Syntax for font-kerning property

Following is the syntax for the font-kerning property.

font-kerning: auto|normal|none;

Example: CSS font-kerning property

Here in the example below, we are using the font-kerning property with different border styles, colors, and different values. In this case, we have given the font-kerning property value as none or normal.

<!DOCTYPE html>
<html>
<head>
	<title>The font-kerning property in CSS</title>
	<style type="text/css">
		div {
		  font-size: 2rem;
		  font-family: serif;
		}
		
		#nokern {
		  font-kerning: none;
		}
		
		#kern {
		  font-kerning: normal;
		}
	</style>
</head>
<body>
	<div id="kern"></div>
	<div id="nokern"></div>
	<textarea id="input">AV T. ij</textarea>
</body>
</html>

Output:

Example 2: CSS font-kerning property

Here in the example below, we are using the font-kerning property with different border styles, colors, and different values. In this case, we have given the font-kerning property value as auto. The CSS styling is done inside the opening and closing head tags of the HTML.

<!DOCTYPE html>
<html>

<head>
	<title>The font-kerning property in CSS</title>
	<style type="text/css">
		div {
		  font-size: 2rem;
		  font-family: serif;
		  color: deeppink;
		}
		
		#nokern {
		  font-kerning: auto;
		}
		
		#kern {
		  font-kerning: auto;
		}
	</style>
</head>

<body>
	<div id="kern">AV T. ij</div>
	<div id="nokern">AV T. ij</div>
	<textarea id="input">AV T. ij</textarea>
</body>

</html>

Output:

Live Example

Here in this live example, you can test the code and execute the example using different values or even edit the code example.

Browser Compatibility

There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser

Background size

contain and cover

Chrome

33

33

Edge

79

79

Firefox

32

32

Internet Explorer

no

no

Opera

20

20

Safari

9

9

Webview Android

4.43

4.43

Chrome Android

33

33

Firefox Android

32

32

Opera Android

20

20

IOS Safari

9

9

Samsung Internet

2.0

2.0

Conclusion

The initial value for the font-kerning property in CSS is auto. This property is applicable to all elements and also to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.