HTML or CSS Letter Spacing Property Syntax and Code Example

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.

CSS Letter Spacing Example with p element
Fig.1 – Letter Spacing Example with p 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.

HTML Letter Spacing Example with p tag
Fig.2 – HTML letter spacing example on p tag with condensed text effect
You can leave a response, or trackback from your own site.

One Response to “HTML or CSS Letter Spacing Property Syntax and Code Example”

  1. 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.

Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape