CSS Letter Spacing Property
CSS Letter Spacing property is used to change the distance or spaces between the letters of the HTML Text.
In the above given code and screenshot shows that how the letter-spacing property works.
Example 1 – Letter Spacing Property Syntax and Code Example with the p tag
<!DOCTYPE html> <html> <head> <style> .spacing { letter-spacing:normal; } .letter-spacing { letter-spacing:3px; } </style> </head> <body> <h2>Example</h2> <h3> Letter-Spacing Example with normal Spaces</h3> <p class="spacing">Lorem ipsum que senectus et netus et malesuada fames acut sit. Id venenatis a condimentum vitae sapien.</p> <h3>3px value Example</h3> <p class="letter-spacing">Lorem ipsum nunc id cursus metus aliquam. Ullamcorper dignissim cras tincidunt lobortis feugiat</p> </body> </html>
In the above code, we define the letter-spacing property to an HTML Paragraph Element.
Caution:You also specify negative values to the letter-spacing property. If you define the negative value to the letter-spacing property than the spaces between the letter are decrease or letters are overlapping with each other.
HTML Letter Spacing for Condensed Text Effect
Example 2 – Modification for p element spacing with negative values
<!DOCTYPE html> <html> <head> <style> .spacing { letter-spacing:normal; } .letter-spacing { letter-spacing:-1px; } .letter-spacing1 { letter-spacing:-2px; } </style> </head> <body> <h2>Example with negative values</h2> <h3> Letter-Spacing Example with normal Spaces</h3> <p class="spacing">Lorem ipsum que senectus et netus et malesuada fames acut sit. Id venenatis a condimentum vitae sapien.</p> <h3> Letter-Spacing Of -1px Example</h3> <p class="letter-spacing">Lorem ipsum nunc id cursus metus aliquam. Ullamcorper dignissim cras tincidunt lobortis feugiat</p> <h3> Letter-Spacing Of -2px Example</h3> <p class="letter-spacing1">Lorem ipsum nunc id cursus metus aliquam. Ullamcorper dignissim cras tincidunt lobortis feugiat</p> </body> </html>
In the above code, we define the letter-spacing property to an HTML Paragraph Element. But here we apply negative value of letter-spacing.
Hey I am so glad I found your site, I really found you by mistake, while I was looking on Askjeeve for something else, Anyhow I am here now and would just like to say cheers for a remarkable post and a all round interesting blog (I also love the theme/design), I don’t have time to go through it all at the moment but I have bookmarked it and also included your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the excellent work.