Letter Spacing

Utilities for controlling the tracking (letter spacing) of an element.

Usage

Control the letter spacing of an element using the letterSpacing={size} utilities.

<x.p letterSpacing="tighter">Computers have lots ...</x.p>
<x.p letterSpacing="tight">Computers have lots ...</x.p>
<x.p letterSpacing="normal">Computers have lots ...</x.p>
<x.p letterSpacing="wide">Computers have lots ...</x.p>
<x.p letterSpacing="wider">Computers have lots ...</x.p>
<x.p letterSpacing="widest">Computers have lots ...</x.p>
<x.p letterSpacing="20px">Computers have lots ...</x.p>

Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property letterSpacing={{ md: "wide" }} to an element would apply the letterSpacing="wide" utility at medium screen sizes and above.

<x.div letterSpacing={{ md: 'wide' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Letter Spacings

If you'd like to customize your values for letter spacings, use the theme.letterSpacings section of your theme.

  // theme.js
  export const theme = {
    letterSpacings: {
+     tightest: '-.075em',
      tighter: '-.05em',
-     tight: '-.025em',
      normal: '0',
-     wide: '.025em',
      wider: '.05em',
-     widest: '.1em',
+     widest: '.25em',
    },
  }

If you don't want to customize it, a set of letterSpacings is already defined in default theme:

const defaultTheme = {
  // ...
  letterSpacings: {
    tighter: '-0.05em',
    tight: '-0.025em',
    normal: '0em',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em',
  },
}

Styled bindings

Automatic

Using xstyled's styled, all letter spacings defined are automatically bound to letter-spacing attribute:

import styled from '@xstyled/...'

const Title = styled.h4`
  letter-spacing: wide;
`

To learn more about styled syntax, read styled syntax documentation.

Manual

It is possible to manually bind a letter spacing using th.letterSpacing utility:

import styled from '...'
import { th } from '@xstyled/system'

const Title = styled.h4`
  letter-spacing: ${th.letterSpacing('wide')};
`

Hooks

Get a font size in any component using useLetterSpacing hook:

import { useLetterSpacing } from '@xstyled/...'

function Title() {
  const letterSpacing = useLetterSpacing('wide')
}