The font-kerning property controls the use of the kerning information stored in a font. Kerning defines the spacing of the letters.
Kerning specifies how the letters are spaced. It makes character spacing more pleasant to the eye and easier to read.
Initial Value | auto |
Applies to | All elements. It also applies to ::first-letter and ::first-line. |
Inherited | Yes. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | object.style.fontKerning = "none"; |
Syntax
font-kerning: auto | normal | none;
Example of the font-kerning property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 20px;
}
div.example1 {
font-kerning: normal;
}
div.example2 {
font-kerning: auto;
}
</style>
</head>
<body>
<h2>Font-kerning property example</h2>
<div class="example1">The text is with font kerning.</div>
<div class="example2">The text is without font kerning.</div>
</body>
</html>
Values
Value | Description |
---|---|
auto | It depends on the browser if font-kerning should be set or not. This is the default value of the property. |
normal | Sets the font kerning. |
none | Does not set the font kerning. |
Browser support
|
|
|
|
|
---|---|---|---|---|
33.0+ 29.0-32.0 -webkit- |
✕ | 34.0+ |
9.1+ 7.0-9.0 -webkit- |
20.0+ 16.0-19.0 -webkit- |
Practice Your Knowledge
What is Font-Kerning in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.