How to Make Letters Closer in CSS
When you code your Web pages, a browser automatically displays a certain amount of space between each letter, but you have the opportunity to make the letters closer using Cascading Style Sheets (CSS). Consider bringing your letters together if you have a font that provides too much expanse between the characters, or opt for this styling to create a more distinct content display. Use your computer's text editor application to apply the CSS that confines your letters to a smaller area, as you prefer.
Other People Are Reading
Instructions
-
-
1
Bring up your text editor application, and open the Web page file that has the letters you want to edit.
-
2
Enter the following CSS code after the opening "<head>" tag at the beginning of the page:
<style type="text/css">
<!--
-->
</style>
-
-
3
Position your cursor between the sets of double dashes and type the HTML element, such as "h1," that contains the letters you want to make closer together. Type a pair of curly brackets after the entry. To illustrate:
<!--
h1 { }
-->
-
4
Enter "letter-spacing: ;" inside the curly brackets and type a negative value, such as "-2," after this attribute. For example:
h1 { letter-spacing: -2; }
The negative number compacts the letters together.
-
5
Save your file, and then click the "Open" or "Open File" option under your browser's "File" menu to view your work. If you want your letters even closer, increase the negative value (for example, "-3") in your CSS rule. Save your document when satisfied.
-
1
References
Resources
- Photo Credit Jupiterimages/Photos.com/Getty Images
