Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

CSS and Spacing

Kerning and tracking are two related and frequently confused typographical terms. Both refer to the adjustment of space between characters of type.

Kerning is Selective Letter Spacing

Kerning is the adjustment of space between pairs of letters. Some pairs of letters create awkward spaces. Kerning adds or subtracts space between letters to create more visually appealing and readable text.

Tracking is Overall Letter Spacing

Tracking differs from kerning in that tracking is the adjustment of space for groups of letters and entire blocks of text. Use tracking to change the overall appearance and readability of the text, making it more open and airy or more dense.

NOTE: The terms letter spacing and character spacing may refer to kerning or tracking, depending on the software application.

CSS is used to change the spacing between letters or words.

Letter Spacing Closer Together

This is an example - Can you see the difference?
<p><span style="letter-spacing:-0.2em">This is an example</span> - Can you see the difference?</p>

Letter Spacing Further Apart

This is an example - Can you see the difference?
<p><span style="letter-spacing:3em">This is an example</span> - Can you see the difference?</p>

Word Spacing

This is an example - Can you see the difference?
<p><span style="word-spacing:10em">This is an example</span> - Can you see the difference?</p>

It is better to use relative unit sizes instead of absolute length units for the letter-spacing and word-spacing unit values because users can change the font sizes of their browsers. Relative units like em scales along with the resizing of the text. If a fixed width value of 3 points was intended for font size at 12 pixels will still be 5 pixels even if the user resizes the text to a larger value. In other words, the 5-point spacing between letters is barely going to be noticeable when the font size is set to, say, 72 pixels or larger.

top of page

Page last updated: May 31, 2012 10:25 AM