menu
letter-spacing is the CSS property that adds or subtracts the amount of space between each character in your text element, which is helpful to adjust the readability and to add a decorative visual effect.
taught by Tina May
You can use the most common unit to set a letter spacing, which is the pixel (px). A positive values will increase the space between characters
letter-spacing:
Tip: Since pixel is an absolute unit, it will create the same gap between the space and the character regardless of the font size. So if your font size gets bigger, the proportion of that gap will break and the text might look ugly.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can make your text to have a tighter letter spacing, by adding a negative pixel value to it.
letter-spacing:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can use em which is relative to the font size of the element, which means that the letter-spacing will change proportionally as the font size changes.
letter-spacing:
Tip: When a word has all uppercase letters, the space between them is too tight and they normally need more spacing than a word with first-only uppercase letter.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can also set the letter-spacing back to normal (default):
letter-spacing:
Tip: We set this back to normal if we want to override different settings of letter spacing that we have set elsewhere.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
</div>What's brewing, good looking?
/* Change the letter spacing of the heading*/
h2 { letter-spacing: 0.1em; }
/* Change the letter spacing of the paragraph*/
p { letter-spacing: 2px; }
Try adjusting the spacing between letters in our heading and paragraph using different units like pixels and ems, or bring it back to default with normal.
Try these (or anything else!):
Copyright 2023