Utilize 'font-stretch' with variable fonts to fine-tune the width of your text, optimizing readability in various viewport sizes or constrained UI components. It offers more control than scaling font-size, maintaining aesthetic quality while improving text fit and overall user experience. Experiment with values from 'ultra-condensed' to 'ultra-expanded' or numerical percentages like 75% for subtle adjustments.
.responsive-heading { font-family: 'MyVariableFont', sans-serif; font-stretch: 100%; /* Default normal width */ } @media (max-width: 768px) { .responsive-heading { font-stretch: 85%; /* Slightly condense for smaller screens */ } } .compact-label { font-family: 'MyVariableFont', sans-serif; font-stretch: 60%; /* Very condensed for tight UI elements */ white-space: nowrap; /* Prevent wrapping if condensing */ overflow: hidden; text-overflow: ellipsis; }