Letter spacing

Letter spacing, which is also known as tracking, is the technique of increasing or reducing the standard space displayed between letters and words.

Using this CSS technique allows space to be increased or reduced relative to the default spacing between words and letters initially defined by the original type designer.

The letter spacing technique can be used with any CSS text style, although it is mostly used to adjust the space between letters and words within display headings such a H1 style.

In the days of metal type and before the introduction of digital typesetting, the tracking technique could only be used to increase the spacing between letters and words. This was achieved by a typesetter placing thin metal spacers known as shims between individual type characters.

However, with the development of digital typesetting, the technique can also now also be used to reduce the spacing between letters and words, even to an extend where the letters in a word overlap each other.

The examples below, demonstrate the results of different amounts of tracking applied using an inline CSS style. Also, the H1 heading style displayed near the top of each page within this website, uses tracking defined within this websites style sheet, to increase the space displayed between letters in the headings.

This is a H3 heading

The example above shows a standard H3 heading for this website, without any additional letter spacing.

This is a H3 heading

The above H3 heading displays with some additional letter spacing added.

While the following example has even more letter spacing added.

This is a H3 heading

The code used within a Raw html block to display the first example with spacing is shown below.

<h3 style="letter-spacing: 0.5em;">This is a H3 heading</h3>

You can copy the code shown on the line above and insert it into a Raw html block within your website page editor. Then, experiment with adjusting the spacing dimension and preview the page to identify a suitable setting for use within your website.

The spacing dimension is shown in the example code as 0.5em. You could change that setting to say 0.2em, and preview the page to see the results of your adjustment.

Note that only the information required to adjust the spacing is displayed within the inline code.

This is because other specifications that relate to styling the H3 headings are defined within the main style sheet for this website, and that styling is already automatically applied to each instance of the H3 heading.

Word-spacing is a related CSS technique that can also be used with websites. This technique is however rarely used. To use word spacing, simply replace the expression letter-spacing with the expression word-spacing in the example code shown above.

Note that when experimenting with code such as that described on this page, there is some value in creating a test.html page and setting that page to not be indexed or followed by the search engines.

You can then experiment with, preview and build the test page without it affecting other pages at your website.

Please note that the use of inline CSS code is not generally recommended for reasons discussed elsewhere at this site.

Inline code is only used here as an easy to apply example of how CSS styling can be used to change the visual appearence of elements within a website, and to provide the code for you to experiment with.

All CSS styling code should ideally be located within your website style sheet and applied to appropriately identified elements within your website pages.

If you do create a test.html page at your website, be certain NOT to drag a Raw html block onto a site wide dot in Solo Build It's BB2 editor. Otherwise when you build the test page, the results of your experimental code will display within each page at your website.

Elsewhere within this website, we will teach you why the em unit of measurement is used in preference to the px or pt units of measurement.

I will also teach you how to add styling information such as that shown above to your website style sheet using Solo Build It's Custom CSS Styles window. All instances of the new or edited style will then be applied automatically throughout the entire website.

Return to the top of the letter spacing page.

Return to the website styles page.

Article by ©