Font Size

Utilities for controlling the font size of an element.

React propsCSS Properties
fontSize={size}font-size: {size};


Control the font size of an element using the fontSize={size} utility.

<x.p fontSize="xs">Computers have lots ...</x.p> <x.p fontSize="14px">Computers have lots ...</x.p> <x.p fontSize="sm">Computers have lots ...</x.p> <x.p fontSize="base">Computers have lots ...</x.p> <x.p fontSize="lg">Computers have lots ...</x.p> <x.p fontSize="1.2rem">Computers have lots ...</x.p> <x.p fontSize="xl">Computers have lots ...</x.p> <x.p fontSize="2xl">Computers have lots ...</x.p> <x.p fontSize="3xl">Computers have lots ...</x.p> <x.p fontSize="4xl">Computers have lots ...</x.p> <x.p fontSize="5xl">Computers have lots ...</x.p> <x.p fontSize="6xl">Computers have lots ...</x.p> <x.p fontSize="7xl">Computers have lots ...</x.p> <x.p fontSize="8xl">Computers have lots ...</x.p> <x.p fontSize="9xl">Computers have lots ...</x.p>


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

<x.p fontSize={{ xs: 'sm', md: 'xl' }}>{/* ... */}</x.p>

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


Font Sizes

If you'd like to customize your values for font sizes, use the theme.fontSizes section of your theme.

  // theme.js
  export const theme = {
    fontSizes: {
-     'xs': '.75rem',
-     'sm': '.875rem',
+     'tiny': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
-     '3xl': '1.875rem',
-     '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
+     '7xl': '5rem',

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

const defaultTheme = {
  // ...
  fontSizes: {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
    '5xl': '3rem',
    '6xl': '3.75rem',
    '7xl': '4.5rem',
    '8xl': '6rem',
    '9xl': '8rem',

Styled bindings


Using xstyled's styled, all font sizes defined are automatically bound to font-size attribute:

import styled from '@xstyled/...' const Title = styled.h4` font-size: 2xl; `

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


It is possible to manually bind a font size using th.fontSize utility:

import styled from '...' import { th } from '@xstyled/...' const Title = styled.h4` font: ${th.fontSize('xl')}; `


Get a font size in any component using useFontSize hook:

import { useFontSize } from '@xstyled/...' function Title() { const fontSize = useFontSize('xl') }
Edit this page on GitHub