Line Height

Utilities for controlling the leading (line height) of an element.

Relative line heights

Use the "none", "tight", "snug", "normal", "relaxed", and "loose" utilities to give an element a relative line-height based on its current font-size.

<x.p lineHeight="none">Lorem ipsum ...</x.p>
<x.p lineHeight="tight">Lorem ipsum ...</x.p>
<x.p lineHeight="snug">Lorem ipsum ...</x.p>
<x.p lineHeight="normal">Lorem ipsum ...</x.p>
<x.p lineHeight="relaxed">Lorem ipsum ...</x.p>
<x.p lineHeight="loose">Lorem ipsum ...</x.p>

Fixed line-heights

Use the lineHeight={size} utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element's final size.

<x.p lineHeight={3}>Lorem ipsum ...</x.p>
<x.p lineHeight={4}>Lorem ipsum ...</x.p>
<x.p lineHeight={5}>Lorem ipsum ...</x.p>
<x.p lineHeight={6}>Lorem ipsum ...</x.p>
<x.p lineHeight={7}>Lorem ipsum ...</x.p>
<x.p lineHeight={8}>Lorem ipsum ...</x.p>
<x.p lineHeight={9}>Lorem ipsum ...</x.p>
<x.p lineHeight={10}>Lorem ipsum ...</x.p>
<x.p lineHeight="3rem">Lorem ipsum ...</x.p>
<x.p lineHeight="20px">Lorem ipsum ...</x.p>

Responsive

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

<x.div lineHeight={{ md: 'relaxed' }}>{/* ... */}</x.div>

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

Customizing

Line Heights

If you'd like to customize your values for line heights, use the theme.lineHeights section of your theme.

  // theme.js
  export const theme = {
    lineHeights: {
      none: 1,
      tight: 1.25,
      snug: 1.375,
      normal: 1.5,
      relaxed: 1.625,
-     loose: 2,
+     'extra-loose': 3,
      3: '.75rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
+     12: '3rem',
    },
  }

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

const defaultTheme = {
  // ...
  lineHeights: {
    none: 1,
    tight: 1.25,
    snug: 1.375,
    normal: 1.5,
    relaxed: 1.625,
    loose: 2,
    3: '.75rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',

    // Match fontSizes
    xs: '1rem',
    sm: '1.25rem',
    default: '1.5rem',
    lg: '1.75rem',
    xl: '1.75rem',
    '2xl': '2rem',
    '3xl': '2.25rem',
    '4xl': '2.5rem',
    '5xl': 1,
    '6xl': 1,
    '7xl': 1,
    '8xl': 1,
    '9xl': 1,
  },
}

Styled bindings

Automatic

Using xstyled's styled, all line heights defined are automatically bound to line-height attribute:

import styled from '@xstyled/...'

const Title = styled.h4`
  line-height: loose;
`

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

Manual

It is possible to manually bind a line height using th.lineHeight utility:

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

const Title = styled.h4`
  font: arial 10px / ${th.lineHeight('loose')};
`

Hooks

Get a font size in any component using useLineHeight hook:

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

function Title() {
  const lineHeight = useLineHeight('loose')
}