Change Width with Real Faces, Never Distortion
Never stretch, squish, or skew type with CSS transforms or width hacks; distortion destroys the designed stroke proportions, thinning verticals and thickening horizontals. Need narrower or wider text? Use a condensed or extended cut, or a variable font's width axis. Use condensed faces for headlines and tight UI labels (navigation, badges, tags) where you control line breaks, never for body copy: narrow letterforms cut readability at small sizes. Extended cuts are rarely needed but work for stylistic effect at large sizes.
Incorrect (CSS distortion, or condensed used for body):
h1 {
font-family: 'Inter', sans-serif;
transform: scaleX(0.8); /* squished, stroke weights now uneven */
}
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px; /* narrow letterforms at reading size */
}Correct (real width variants):
body {
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
h1 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 48px;
letter-spacing: -0.01em;
}
/* Or a variable font's width axis */
h1 {
font-family: 'Inter VF', sans-serif;
font-stretch: 85%; /* real condensed rendering */
}Exception: deliberate distortion inside a logo, as an explicit design choice on a fixed piece of artwork. Re-tune size, line height, letter-spacing, and padding after any width swap; a metrically compatible replacement swaps in more easily but still needs the pass.