When learning CSS basics, we tend to focus on the box model, how to position components on the page, and the design system elements, like font-family and font sizes. If we dive even deeper into how the font looks on the page, we need to take a look at font-kerning, the letter-spacing, and the word-spacing property. These fine details are what will take a website from being average to professional.
Font Kerning
Font-kerning is how the spacing is determined between two distinct characters. Fonts that are considered well-kerned have better visual appeal because of more uniform spacing between the letters. The CSS font-kerning property has three possible values: none, normal, auto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
</style>
</head>
<body>
<div id="kern">AV Ta</div>
<div id="nokern">AV Ta</div>
</body>
</html>
Auto determines if font-kerning should be used or not. Some browsers will disable kerning on small fonts because the readability will suffer, according to the MDN. Normal means that kerning will be applied if the font has it – none of course means kerning won’t be applied. Run the code in the editor above. You’ll see the CSS property most visible on ‘AV’ and ‘Ta’. The spacing from the end of one serif to the beginning of the serif on the next letter determines if kerning is applied to the text or not.
Letter-Spacing
In contrast to kerning, the letter-spacing property is the uniform spacing across all letters in a line of text. It takes a length value in px, rem, or em. These values can be positive or negative.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#big-spacing {
letter-spacing:5px;
}
#little-spacing {
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="little-spacing">Hello World</div>
<div id="big-spacing">Hello World</div>
</body>
</html>
Word-Spacing
Just like letter spacing, word-spacing literally means spacing between words. The default is 0.25em, but can take a positive or negative length.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#big-spacing {
word-spacing:5rem;
}
#little-spacing {
word-spacing: 1rem;
}
</style>
</head>
<body>
<div id="little-spacing">Hello World</div>
<div id="big-spacing">Hello World</div>
</body>
</html>
In this article we learned the difference between font-kerning and letter spacing as well as between letter spacing and word spacing. Browser support for all of these properties is widespread. Font kerning is not available in Internet Explorer.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
