Responsive Font Calculator
Generate fluid typography using CSS clamp() function and viewport units for responsive font sizes.
Font Size Configuration
Viewport Breakpoints
Font Sizes
Typography Scale
16px
Font Size Preview
320px1200px
Current: 768px
Small - 16.1px
The quick brown fox jumps over the lazy dog
Body - 20.1px
The quick brown fox jumps over the lazy dog
H6 - 25.1px
The quick brown fox jumps over the lazy dog
H5 - 31.6px
The quick brown fox jumps over the lazy dog
H4 - 39.1px
The quick brown fox jumps over the lazy dog
H3 - 49.2px
The quick brown fox jumps over the lazy dog
H2 - 61.2px
The quick brown fox jumps over the lazy dog
H1 - 76.8px
The quick brown fox jumps over the lazy dog
/* Typography Scale */
.text-small {
font-size: clamp(13px, 16.00px + 0.6818vw, 19px);
}
.text-body {
font-size: clamp(16px, 20.00px + 0.9091vw, 24px);
}
.text-h6 {
font-size: clamp(20px, 25.00px + 1.1364vw, 30px);
}
.text-h5 {
font-size: clamp(25px, 31.50px + 1.4773vw, 38px);
}
.text-h4 {
font-size: clamp(31px, 39.00px + 1.8182vw, 47px);
}
.text-h3 {
font-size: clamp(39px, 49.00px + 2.2727vw, 59px);
}
.text-h2 {
font-size: clamp(49px, 61.00px + 2.7273vw, 73px);
}
.text-h1 {
font-size: clamp(61px, 76.50px + 3.5227vw, 92px);
}clamp(16px, 10.1818px + 1.8182vw, 32px)
• Minimum: 16px (font won't go below this)
• Preferred: 10.1818px + 1.8182vw (scales with viewport)
• Maximum: 32px (font won't go above this)
Mobile
320px
16px
Tablet
760px
24.0px
Desktop
1200px
32px