How to Space Words When Making a Web Page
HTML itself does not offer many ways to space words on a web page. Headers and paragraphs get some default spacing in all browsers, but only the no-break space character -- -- exists to add space between letters. In Cascading Style Sheet code, though, Web designers can use the "letter-spacing" and "word-spacing" properties to get fine-tune control over the appearance of words on web pages.
Other People Are Reading
Instructions
-
-
1
Open the HTML file for your Web page in your code editor of choice. Add your text if you still need to do so, and then wrap the text in an HTML tag such as <h1> for a large heading or <p> for a paragraph. Add a "class" attribute to your tag so you can target it in CSS and re-use the class name for other chunks of text that will use the same style.
<p class="spaced">Your text goes here.</p>
-
2
Scroll to the top of your HTML file and look for <style> tags between the <head> and </head> tags. Add your CSS between <style> and </style> tags. You can also add CSS code to an external style sheet if your site uses one. Here is an example of CSS code for the <p> tag with a "class" of "spaced":
p.spaced {
font-family: sans-serif;
color: grey;
}
The above code styles any <p> tag with a "class" attribute value of "spaced" with the default sans-serif font, in the color gray.
-
-
3
Space words using the "word-spacing" property in CSS. This is a CSS 2.1 property, and it is compatible with all popular browsers. You can define pixel values with "px" or em values with "em" for this property. Some designers prefer "em" because it is a relative measure.
p.spaced {
word-spacing: 3px;
}
In the code above, all words get three pixels of space between them. This spacing is regardless of the font size, so use it with caution. When using "em," 1-em is equal to the current font size. Three ems would then equal three character widths dependant on the size of the characters being spaced. The "letter-spacing" property in CSS works the same way and is also compatible in every browser.
-
1
Tips & Warnings
If your word-spacing is not working, check the "text-align" property for your text. If "text-align" is set to "justify," then change it to "left" to see your word spacing in action.
References
- Photo Credit Jupiterimages/Photos.com/Getty Images
