letter-spacing Examples
Examples of How the letter-spacing CSS Property Works
Return to the letter-spacing information.
Changing the Letter Spacing
Sed do eiusmod tempor incididunt ut enim ad minim veniam, cupidatat non proident. Consectetur adipisicing elit, velit esse cillum dolore lorem ipsum dolor sit amet. Qui officia deserunt duis aute irure dolor ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Quis nostrud exercitation cupidatat non proident, in reprehenderit in voluptate.
<p style="letter-spacing:1em;">Sed do eiusmod tempor incididunt ut enim ad minim veniam, cupidatat non proident. Consectetur adipisicing elit, velit esse cillum dolore lorem ipsum dolor sit amet. Qui officia deserunt duis aute irure dolor ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Quis nostrud exercitation cupidatat non proident, in reprehenderit in voluptate. </p>
Return to the letter-spacing information.
Change the Letter Spacing in the Middle
Ut enim ad minim veniam, in reprehenderit in voluptate ullamco laboris nisi. Velit esse cillum dolore cupidatat non proident, ut aliquip ex ea commodo consequat. Mollit anim id est laborum. Quis nostrud exercitation sed do eiusmod tempor incididunt lorem ipsum dolor sit amet.
<p style="letter-spacing:1em;">Ut enim ad minim veniam, in reprehenderit in voluptate ullamco laboris nisi. <span style="letter-spacing:normal;">Velit esse cillum dolore cupidatat non proident, ut aliquip ex ea commodo consequat.</span> Mollit anim id est laborum. <span style="letter-spacing:normal;">Quis nostrud exercitation sed do eiusmod tempor incididunt lorem ipsum dolor sit amet.</span></p>
Return to the letter-spacing information.
Make the Letter Spacing Smaller
Ut enim ad minim veniam, eu fugiat nulla pariatur. In reprehenderit in voluptate excepteur sint occaecat ut aliquip ex ea commodo consequat. Velit esse cillum dolore duis aute irure dolor ut labore et dolore magna aliqua.
<p style="letter-spacing: -0.1em;">Ut enim ad minim veniam, eu fugiat nulla pariatur. In reprehenderit in voluptate excepteur sint occaecat ut aliquip ex ea commodo consequat. Velit esse cillum dolore duis aute irure dolor ut labore et dolore magna aliqua.</p>
Return to the letter-spacing information.
Kerning
Time to go
<p style="font-family:'Times New Roman', Times, serif;" ><span style="letter-spacing:-0.2em;">T</span>ime to go</p>
Notice how the i is below the head of the T. These letters have been kerned together.
Return to the letter-spacing information.
Jennifer Kyrnin