Logo Windi CSS

Typography

Font Family

Utilities for controlling the font family of an element.

sans
serif
mono
CSS
 Customizing 
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['ui-sans-serif', 'system-ui'],
        serif: ['ui-serif', 'Georgia'],
        mono: ['ui-monospace', 'SFMono-Regular'],
        display: ['Oswald'],
        body: ['Open Sans'],
      },
    },
  },
}

Font families can be specified as an array or as a simple comma-delimited string:
{
  // Array format:
  "sans": ["Helvetica", "Arial", "sans-serif"],
  // Comma-delimited format:
  "sans": "Helvetica, Arial, sans-serif",
}

Note that Windi CSS does not automatically escape font names for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
{
  // Won't work:
  "sans": ["Exo 2", /* ... */],
  // Add quotes:
  "sans": ["\"Exo 2\"", /* ... */],
}

Font Size 
Utilities for controlling the font size of an element.
xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    fontSize: {
      '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',
    },
  },
}

You can provide a default line-height for each of your font-sizes using a tuple of the form [fontSize, lineHeight] in your windi.config.js file.
windi.config.js
export default {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form [fontSize, { letterSpacing, lineHeight }] in your windi.config.js file.
windi.config.js
export default {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    },
  },
}

Font Smoothing 
Utilities for controlling the font smoothing of an element.
antialiased
subpixel-antialiased
CSS
Font Style 
Utilities for controlling the style of text.
italic
not-italic
CSS
Font Weight 
Utilities for controlling the font weight of an element.
thin
extralight
light
normal
medium
semibold
bold
extrabold
black
400
600
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    fontWeight: {
      'hairline': 100,
      'extra-light': 100,
      'thin': 200,
      'light': 300,
      'normal': 400,
      'medium': 500,
      'semibold': 600,
      'bold': 700,
      'extrabold': 800,
      'extra-bold': 800,
      'black': 900,
    },
  },
}

Font Variant Numeric 
Utilities for controlling the variant of numbers.
normal-nums
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
CSS
Hyphens 
The hyphens utilities specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
none
manual
auto
CSS
Letter Spacing 
Utilities for controlling the tracking (letter spacing) of an element.
tighter
tight
normal
wide
wider
widest
0px
2px
0.5em
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.25em',
    },
  },
}

Line Height 
Utilities for controlling the leading (line height) of an element.
none
tight
snug
normal
relaxed
loose
0
1
2
3
4
5
6
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
      },
    },
  },
}

Tab Size 
The tab-size utilities are used to customize the width of tab characters (U+0009).
default
0
2
4
8
7.5px
2rem
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

Text Alignment 
Utilities for controlling the alignment of text.
left
center
right
justify
CSS
Text Color 
Utilities for controlling the text color of an element.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    textColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Decoration 
Utilities for controlling the decoration of text.
Text Decoration Type 
Utilities for controlling the type of text decoration.
underline
overline
line-through
no-underline
CSS
Text Decoration Color 
Utilities for controlling the color of text decoration.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Decoration Style 
Utilities for controlling the style of text decoration.
solid
double
dotted
dashed
wavy
CSS
Text Decoration Thickness 
Utilities for controlling the thickness of text decorations.
auto
from-font
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Text Decoration Offset 
Utilities for controlling the offset of text decoration.
auto
1
2
3
4
5
6
7
8
0.6rem
8.5px
0.5em
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Text Decoration Opacity 
Utilities for controlling the opacity of an element's decoration color. This is a fallback of Text Decoration Color beginning with WindiCSS v3.4.0.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Text Indent 
Utilities for controlling the indentation of text.
default
xs
sm
md
lg
xl
2xl
3xl
1.8rem
2em
1/2
-xs
-1em
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

Text Opacity 
Utilities for controlling the opacity of an element's text color.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Text Shadow 
Utilities for controlling the shadow of a text element.
default
sm
md
lg
xl
none
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

Text Stroke 
Utilities for controlling the stroke of a text element.
Text Stroke Width 
Utilities for controlling the width of text stroke.
default
none
sm
md
lg
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Text Stroke Color 
Utilities for controlling the color of text stroke.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Transform 
Utilities for controlling the transformation of text.
uppercase
lowercase
capitalize
normal-case
CSS
Text Overflow 
Utilities for controlling text overflow in an element.
truncate
overflow-ellipsis
overflow-clip
CSS
Vertical Alignment 
Utilities for controlling the vertical alignment of an inline or table-cell box.
baseline
top
middle
bottom
text-top
text-bottom
CSS
Whitespace 
Utilities for controlling an element's white-space property.
normal
nowrap
pre
pre-line
pre-wrap
CSS
Word Break 
Utilities for controlling word breaks in an element.
normal
words
all
CSS
Writing Mode 
The writing-mode utility sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).
normal
vertical-right
vertical-left
CSS
Writing Orientation 
The writing-orientation utility sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
mixed
upright
sideways
CSS
 Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.