HTML

Structure of content on the web

  • Web APIs

    Interfaces for building web applications

  • Learn
  • HTTP Observatory

    Scan a website for free

  • CSS
  • Your first website: Styling the content
  • Challenge: Styling a biography page
  • Combinators
  • Sizing items in CSS
  • Styling tables
  • Challenge: A cool-looking box
  • Styling links
  • Introduction to CSS layout
  • CSS grid layout
  • CSS reference
  • Modules
    1. CSS basic user interface
    2. CSS cascading and inheritance
    3. CSS conditional rules
    4. CSS display
    5. CSS fonts
    6. CSS images
    7. CSS masking
    8. CSS namespaces
    9. CSS paged media
    10. CSS ruby layout
    11. CSS scroll-driven animations
    12. CSS shapes
    13. CSS text decoration
    14. CSS view transitions
    15. -moz-float-edge
    16. -moz-force-broken-image-icon
    17. -moz-image-region
    18. -moz-orient
    19. -moz-user-focus
    20. -moz-user-input
  • -webkit-*
    1. -webkit-border-before
    2. -webkit-box-reflect
    3. -webkit-mask-box-image
    4. -webkit-mask-composite
    5. -webkit-mask-position-x
    6. -webkit-mask-position-y
    7. -webkit-mask-repeat-x
    8. -webkit-mask-repeat-y
    9. -webkit-tap-highlight-color
    10. -webkit-text-security
    11. -webkit-touch-callout
  • align-items
  • anchor-name
  • animation-*
    1. animation-direction
    2. animation-name
    3. animation-range
    4. animation-range-end
    5. animation-range-start
    6. animation-timeline
    7. backdrop-filter
    8. background-blend-mode
    9. background-origin
    10. background-repeat
    11. border-block
    12. border-block-end-style
    13. border-block-start-style
    14. border-bottom
    15. border-bottom-style
    16. border-end-end-radius
    17. border-image-repeat
    18. border-inline
    19. border-inline-end-style
    20. border-inline-start-style
    21. border-left
    22. border-radius
    23. border-right-width
    24. border-style
    25. border-top-right-radius
    26. bottom
    27. box-*
      1. box-align
      2. box-direction
      3. box-flex
      4. box-flex-group
      5. box-lines
      6. box-ordinal-group
      7. box-orient
      8. box-pack
      9. break-before
      10. clear
      11. clip-*
        1. clip
        2. color-interpolation
        3. column-fill
        4. column-rule-style
        5. columns
        6. contain-*
          1. contain-intrinsic-inline-size
          2. container-name
          3. counter-increment
          4. cx
          5. display
          6. field-sizing
          7. fill-*
            1. filter
            2. flex-*
              1. flex-flow
              2. float
              3. font-family
              4. font-optical-sizing
              5. font-smooth
              6. font-stretch
              7. font-synthesis-position
              8. font-variant
              9. font-variant-emoji
              10. font-variation-settings
              11. grid
              12. grid-auto-rows
              13. grid-row
              14. grid-template-areas
              15. height
              16. image-orientation
              17. image-resolution
            3. inset-block
            4. inset-inline-end
            5. interpolate-size
            6. justify-self
          8. line-break
          9. line-height-step
        7. list-*
          1. list-style-type
        8. margin-*
          1. margin-block-start
          2. margin-inline-start
          3. margin-trim
        9. marker-*
          1. marker-start
        10. mask-*
          1. mask-border-outset
          2. mask-border-width
          3. mask-mode
          4. mask-size
          5. math-shift
          6. max-inline-size
          7. min-inline-size
          8. object-position
          9. offset-*
            1. offset-path
            2. order
            3. outline-offset
            4. overflow-anchor
            5. overflow-wrap
            6. overlay
            7. overscroll-*
              1. overscroll-behavior-x
              2. padding-block-end
              3. padding-inline-end
              4. padding-top
            8. page-*
              1. page-break-after
              2. page-break-before
              3. page-break-inside
            9. place-content
            10. position
            11. position-anchor
            12. position-area
            13. position-try
            14. position-try-fallbacks
            15. position-try-order
            16. position-visibility
          10. resize
          11. ruby-align
          12. scale
          13. scroll-*
            1. scroll-margin-block-end
            2. scroll-margin-inline-end
            3. scroll-margin-top
            4. scroll-padding-block-start
            5. scroll-padding-inline-start
            6. scroll-snap-align
            7. scroll-timeline
            8. scroll-timeline-axis
            9. scroll-timeline-name
          14. scrollbar-*
            1. shape-image-threshold
            2. speak-as
            3. stroke-dasharray
            4. stroke-miterlimit
            5. table-layout
            6. text-*
              1. text-box
              2. text-decoration
              3. text-decoration-skip
              4. text-emphasis
              5. text-indent
              6. text-rendering
              7. text-size-adjust
              8. text-spacing-trim
              9. text-wrap
              10. timeline-scope
              11. transform-box
              12. transition-behavior
              13. transition-timing-function
            7. user-modify
            8. view-timeline
            9. view-timeline-axis
            10. view-timeline-inset
            11. view-timeline-name
            12. white-space-collapse
            13. word-break
            14. y
            15. Attribute selectors
            16. Universal selectors
          15. Combinators
            1. Column combinator
            2. Selector list
            3. :-moz-broken
            4. :-moz-drag-over
            5. :-moz-first-node
            6. :-moz-handler-blocked
            7. :-moz-handler-crashed
            8. :-moz-handler-disabled
            9. :-moz-last-node
            10. :-moz-loading
            11. :-moz-locale-dir(ltr)
            12. :-moz-locale-dir(rtl)
            13. :-moz-only-whitespace
            14. :-moz-submit-invalid
            15. :-moz-suppressed
            16. :-moz-user-disabled
            17. :-moz-window-inactive
          16. :blank
          17. :current
          18. :disabled
          19. :first-child
          20. :focus-within
        11. :has()
        12. :hover
        13. :is()
        14. :left
        15. :local-link
        16. :nth-child()
        17. :only-child
        18. :out-of-range
        19. :placeholder-shown
        20. :read-write
        21. :scope
        22. :target
        23. :target-within
        24. :visited
        25. ::-moz-color-swatch
        26. ::-moz-focus-inner
        27. ::-moz-list-bullet
        28. ::-moz-list-number
        29. ::-moz-meter-bar
        30. ::-moz-progress-bar
        31. ::-moz-range-progress
        32. ::-moz-range-thumb
        33. ::-moz-range-track
      12. ::-webkit-*
        1. ::-webkit-inner-spin-button
        2. ::-webkit-meter-bar
        3. ::-webkit-meter-even-less-good-value
        4. ::-webkit-meter-inner-element
        5. ::-webkit-meter-optimum-value
        6. ::-webkit-meter-suboptimum-value
        7. ::-webkit-progress-bar
        8. ::-webkit-progress-inner-element
        9. ::-webkit-progress-value
        10. ::-webkit-scrollbar
        11. ::-webkit-search-cancel-button
        12. ::-webkit-search-results-button
        13. ::-webkit-slider-runnable-track
        14. ::-webkit-slider-thumb
      13. ::cue
      14. ::first-line
      15. ::part()
      16. ::spelling-error
      17. ::view-transition-image-pair
      18. @color-profile
      19. @document
      20. @import
      21. @namespace
      22. @position-try
      23. @supports
      24. -moz-image-rect
      25. anchor-size()
      26. anchor()
      27. attr()
      28. calc-size()
      29. color-mix()
      30. cos()
      31. cubic-bezier()
      32. element()
      33. fit-content()
      34. hwb()
      35. inset()
      36. lch()
      37. log()
      38. min()
      39. oklch()
      40. palette-mix()
      41. scale3d()
      42. scroll()
      43. sin()
      44. steps()
      45. translateZ()
      46. view()
      47. <angle-percentage>
      48. <blend-mode>
      49. <color-interpolation-method>
      50. <custom-ident>
      51. <display-inside>
      52. <display-outside>
      53. <frequency-percentage>
      54. <hex-color>
      55. <image>
      56. <line-style>
      57. <overflow>
      58. <position-area>
      59. <resolution>
      60. <shape>
      61. <time-percentage>
      62. Guides
      63. Animations
        1. Box alignment in block layout
        2. Introduction to the CSS basic box model
        3. Using relative colors
        4. Basic concepts of multi-column layout
        5. Handling content breaks in multi-column layout
      64. Conditional rules
        1. Using container size and style queries
      65. CSSOM view
        1. Introduction to formatting contexts
        2. Basic concepts of flexbox
        3. Controlling ratios of flex items along the main axis
        4. Variable fonts guide
      66. Grid
        1. Grid template areas
        2. Grids, logical values, and writing modes
        3. Masonry layout
      67. Images
        1. Basic concepts of logical properties and values
        2. Using CSS math functions
      68. Media queries
        1. Printing
      69. Nesting style rules
        1. Understanding z-index
      70. Scroll snap
        1. Basic shapes with shape-outside
        2. Using CSS transitions
      71. Center an element
      72. List group with badges
      73. Color picker tool
      74. Learn more
      75. See full compatibility

    • The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

    Try it

    letter-spacing: normal;

    letter-spacing: 0.2rem;

    letter-spacing: 1px;

    letter-spacing: -1px;

    <section id="default-example">
  <p id="example-element">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

    @font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: Amstelvar;
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: Amstelvar;
}

    Syntax

    css
    /* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

    Values

    normal

    The normal letter spacing for the current font. Unlike a value of 0, this keyword allows the user agent to alter the space between characters in order to justify text.

    <length>

    Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

    Accessibility

    A large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

    Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

    Internationalization concerns

    Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.

    شسيبتنمك

    Formal definition

    Inheritedyes
    |
    <length>

    Examples

    Setting letter spacing

    HTML

    html
    <p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

    CSS

    css
    .normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}

    Result

    Specifications

    Specification
    Scalable Vector Graphics (SVG) 2
    # LetterSpacingProperty

    Browser compatibility

    BCD tables only load in the browser

    See also