Letter Spacing
CSS provides the ability to adjust the letter spacing within your text. In other words, when creating a web page or blog, you can specify the space between each letter in your text. In desktop publishing, this is known as "tracking". This article shows you how to adjust the letter spacing in your HTML documents.
To adjust the letter spacing of your text, you need to use the CSS letter-spacing
property. The value that you provide determines the space between the letters.
Below are some examples using different values for the letter-spacing
property.
Letter Spacing Examples
Here are examples of the different value types that you can specify on the letter-spacing
property. For example, if you write letter-spacing:3px;
, you are specifying that there should be 3 extra pixels between each letter.
Source Code | Result |
---|---|
Normal text: This text does not have its letter-spacing specified. Therefore it uses a default value. Adjusted letter-spacing: This text has got letter-spacing value of 3 pixels. Adjusted letter-spacing: This text has got letter-spacing value of 0.1 centimeter. Adjusted letter-spacing: This text has got letter-spacing value of 0.3em. Adjusted letter-spacing: This text has got letter-spacing value of negative 1 pixel. Adjusted letter-spacing: This text has got letter-spacing value of negative 0.05 centimeter. Adjusted letter-spacing: This text has got letter-spacing value of negative 0.1em. |