Leverage variable fonts with font-variation-settings to adapt typeface weight, width, and other optical properties contextually within your UI. This allows for unparalleled design flexibility and improved readability across diverse screen sizes and content densities, boosting the overall user experience. Experiment with different axes like 'wght' for weight, 'wdth' for width, or custom axes provided by the font designer to create truly dynamic typography.
:root {
--font-weight-base: 400;
--font-width-base: 100;
}
body {
font-family: "Inter var", sans-serif; /* Example variable font */
font-variation-settings: 'wght' var(--font-weight-base), 'wdth' var(--font-width-base);
}
h1 {
/* Dynamic weight and width for headings */
font-variation-settings: 'wght' 700, 'wdth' 120;
}
@media (max-width: 768px) {
h1 {
/* Adjust for smaller screens to improve readability */
font-variation-settings: 'wght' 600, 'wdth' 100;
}
}
.hero-text {
/* Apply optical size and a very bold weight for display text */
font-variation-settings: 'wght' 850, 'opsz' 18;
font-size: 3em;
}