HTML and CSS

What is letter spacing in CSS?

In CSS, letter-spacing is a property used to control the space between characters (letters) in a text. It allows you to adjust the spacing to make the text appear more spread out or more condensed.

How it works:

  • Positive values will increase the space between characters.
  • Negative values will decrease the space between characters.

Here are a few examples:

letter-spacing: normal
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
letter-spacing: 1px
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
letter-spacing: 0.1em
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
letter-spacing: 0.1rem
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
letter-spacing: -0.1rem;
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Arrow at the bottom Arrow at the bottom with a utf-8 character Arrow at the top of a container Aside Background color Blackboard design Breadcrumbs design Calendar design Checkboxes design Checkboxes as switch buttons design Circular image with border and shadow design Cursor Font Awesome pulled icons Gallery picture frame with a price ribbon Google pie chart Google web fonts Image caption Last child and not last child element Letter spacing List items with a Font Awesome icon Neon text Neon text with a flickering effect Notebook paper background Radio buttons design Radio buttons as stars Remove the glow effect from an input field Search bar with categories Track (audio/video subtitles) Web fonts Whiteboard design