Letter Spacing with CSS uses both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). As you know from previous tutorials, HTML is the foundational code that is used to structure a web page and its content while CSS is used to enhance your web page with creative design aspects.
In this tutorial, we will explore how you can give your web page something extra by applying css character spacing to your text. We’ll examine what it takes to do a simple layout so that you feel comfortable creating shadows. All you need to start with is a simple code editor such as Notepad which is free.
The Essentials of CSS Letter Spacing
Letter spacing is simply defined by the amount of space you add between each character in a line or paragraph of text. You can use it for headings or for body text. Start out with any font you desire to use, and then apply letter spacing to that area of text to give it the look you want. Sometimes the letters are too close to each other. Spacing the letters apart can give style, and also make the text easier to read.
In your text editor, let’s add the HTML. We’re going to create a heading 1, heading 2, and heading level 3 to showcase what this looks like.
| <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html> |
Now let’s add the style to the HTML. We’ll need to add some CSS to define the letter spacing for each header.
| <!DOCTYPE html> <html> <head> <style> h1 { letter-spacing: 3px;} h2 { letter-spacing: 2px;} h3 { letter-spacing: -1px;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html> |
The resulting web layout looks like the following:
Now what happens when we want to apply letter spacing to a small paragraph? Let’s add some text and use <p> for paragraph to define the text.
First, let’s see what the text looks like before we define how much letter spacing we want to use. We will set the CSS with letter-spacing: 0px to have no special value.
| <!DOCTYPE html> <html> <head> <style> p { letter-spacing: 0px; font-size: 14pt;} </style> </head> <body> <p>Bitae none veritatibus. Officiisciae rerspis dolenda velendi picabo. Qui quis ad quae voluptatia dolorrum re volore, nemperum qui bereper natiberibus cus assimpo reperum quunti blaut et dollam ratem cus eiciendignit ma nimpossedis simendi ciusapedia eatur?</p> </body> </html> |
The result is as follows:
Now if we simply change the letter spacing to 3px as in letter-spacing: 3px; we will get something that looks and reads much differently.
Such a simple change in the total pixels to define your letter spacing can bring about quite a change in how your text displays to your audience.
The values you can use aren’t limited to positive values. Adding a negative value will bring your letters closer together, closer than they would normally appear had they never received a value at all. You can experiment with this but you may find that the text becomes more difficult to read.
You are also not limited to pixels, though pixels are nice to use because they provide small increments in the character spacing. You have available cm which as you will see, adds much more spacing between characters than pixels.
With only 1cm as in the following code change, you will see a drastic outcome.
| <!DOCTYPE html> <html> <head> <style> p { letter-spacing: 1cm; font-size: 14pt;} </style> </head> <body> <p>Bitae none veritatibus. Officiisciae rerspis dolenda velendi picabo. Qui quis ad quae voluptatia dolorrum re volore, nemperum qui bereper natiberibus cus assimpo reperum quunti blaut et dollam ratem cus eiciendignit ma nimpossedis simendi ciusapedia eatur?</p> </body> </html> |
The result is this. The text is now basically unreadable.
If you give a smaller number, less than 1 using cm, we might be able to pull the text back together again. Let’s try using the parameter of letter-spacing: .25cm; to see what happens.
This result is much better and the text becomes readable again.
Where to Next?
This introduction to Letter Spacing with CSS should provide a starting point for further inquiry into design, layout, and practical applications of HTML and CSS.
We’ll continue to explore other areas of design in the next blog. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>
