Typography
Typography Scale
Generate harmonious type scales based on musical ratios
Type Scale Preview
text-base16px / 1rem
Typography
9xl
Aa
283.41px8xl
Aa
212.61px7xl
Aa
159.5px6xl
Aa
119.66px5xl
Aa
89.76px4xl
Aa
67.34px3xl
Aa
50.52px2xl
Aa
37.9pxxl
Aa
28.43pxlg
Aa
21.33pxbase
Aa
16pxsm
Aa
12pxxs
Aa
9pxScale Values
| Name | px | rem | Line H |
|---|---|---|---|
| 9xl | 283.41 | 17.713 | 425.12 |
| 8xl | 212.61 | 13.288 | 318.92 |
| 7xl | 159.5 | 9.969 | 239.25 |
| 6xl | 119.66 | 7.478 | 179.48 |
| 5xl | 89.76 | 5.61 | 134.65 |
| 4xl | 67.34 | 4.209 | 101.01 |
| 3xl | 50.52 | 3.157 | 75.78 |
| 2xl | 37.9 | 2.369 | 56.85 |
| xl | 28.43 | 1.777 | 42.65 |
| lg | 21.33 | 1.333 | 31.99 |
| base | 16 | 1 | 24 |
| sm | 12 | 0.75 | 18 |
| xs | 9 | 0.563 | 13.51 |
Font Weights
Aa
Thin
100
Aa
Light
300
Aa
Normal
400
Aa
Medium
500
Aa
Semi Bold
600
Aa
Bold
700
Aa
Black
900
CSS Variables
1/* Typography Scale - Perfect Fourth (1.333) */2:root {3 --text-xs: 0.563rem;4 --text-sm: 0.75rem;5 --text-base: 1rem;6 --text-lg: 1.333rem;7 --text-xl: 1.777rem;8 --text-2xl: 2.369rem;9 --text-3xl: 3.157rem;10 --text-4xl: 4.209rem;11 --text-5xl: 5.61rem;12 --text-6xl: 7.478rem;13 --text-7xl: 9.969rem;14 --text-8xl: 13.288rem;15 --text-9xl: 17.713rem;16}
Tailwind Config
1// tailwind.config.js2module.exports = {3 theme: {4 extend: {5 fontSize: {6 'xs': ['0.563rem', { lineHeight: '1.5' }],7 'sm': ['0.75rem', { lineHeight: '1.5' }],8 'base': ['1rem', { lineHeight: '1.5' }],9 'lg': ['1.333rem', { lineHeight: '1.5' }],10 'xl': ['1.777rem', { lineHeight: '1.5' }],11 '2xl': ['2.369rem', { lineHeight: '1.5' }],12 '3xl': ['3.157rem', { lineHeight: '1.5' }],13 '4xl': ['4.209rem', { lineHeight: '1.5' }],14 '5xl': ['5.61rem', { lineHeight: '1.5' }],15 '6xl': ['7.478rem', { lineHeight: '1.5' }],16 '7xl': ['9.969rem', { lineHeight: '1.5' }],17 '8xl': ['13.288rem', { lineHeight: '1.5' }],18 '9xl': ['17.713rem', { lineHeight: '1.5' }],19 },20 },21 },22}