Leverage 'font-optical-sizing: auto' to enable automatic font adjustments based on text size, ensuring sharper details in headlines and clearer forms in body text, especially with variable fonts designed to support this feature. This subtly improves legibility across your UI.
body {
font-family: 'Inter', sans-serif;
font-optical-sizing: auto; /* Enables browser to adjust font for optimal readability at different sizes */
}
h1 {
font-size: 3rem;
font-optical-sizing: auto;
}
/* Ensure your chosen font supports optical sizing for this to have an effect. */