Senior LevelCSS & Modern Layouts
How do variable fonts work and what CSS axes are available?
❓ Interview Prompt: Explain variable font technology, registered axes (wght, wdth, ital, slnt, opsz), and animation.
Variable fonts contain an entire type family (all weights, widths, slants) in a single file, enabling continuous value selection instead of discrete font files:
Registered Axes:
•
`wght` (Weight):
font-weight: 100 to font-weight: 900. Any value in between.•
`wdth` (Width):
font-stretch: 75% to font-stretch: 125%.•
`ital` (Italic):
font-style: italic (binary: 0 or 1).•
`slnt` (Slant):
font-style: oblique -12deg (continuous angle).•
`opsz` (Optical Size): Automatically adjusts design details for small/large sizes.
Custom Axes:
Font designers define custom axes using font-variation-settings: "CASL" 1 (e.g., Recursive font's "Casual" axis).
Code Implementation Example
css
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900;
}
/* Continuous weight values */
h1 { font-weight: 750; } /* Between Bold and ExtraBold */
p { font-weight: 380; } /* Between Regular and Medium */
/* Animate weight on hover */
.heading {
font-weight: 400;
transition: font-weight 0.3s ease;
}
.heading:hover {
font-weight: 700;
}💡Variable font with continuous weight values and animated weight transitions.
🎯 Interview Key Takeaway
Variable fonts reduce HTTP requests and enable continuous weight/width values with smooth CSS transitions.
#Variable Fonts#Typography#Performance#Senior
Back to all CSS & Modern Layouts Questions→