Is there anyway to make letters closer together using CSS? I know we can adjust line-height but I didn't know if there is anything that squeeze a font closer together.
4 Answers
The answer depends on what you mean by “font”, “condensed”, and “squeeze”.
You can select a more condensed typeface (specific font) for a font (from a font family), using the font-stretch
property. But it does not squeeze anything; it just picks up a typeface that has been designed more condensed. Fonts commonly available in people’s computers don’t have such typefaces; some downloadable fonts (web fonts) do. And mostly you can use them in a more cross-browser way by using just a specific typeface name as if it were a font family name, e.g. font-family: Arial Narrow
. (Note: Arial Narrow is available on some computers only, far less often than the basic Arial.)
You can use certain CSS techniques to suggest kerning, if the font used has kerning information in OpenType format. Most fonts commonly used on web pages have no such information. (Exceptions: Palatino Linotype, Times New Roman, and Microsoft C fonts like Calibri and Cambria.) Suitable declarations:
body {
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
font-feature-settings: "kern";
}
The effect of these settings, if any, tends to be rather small. It does not really mean “squeezing” in any brute sense. Rather, it modifies the rendering in subtle way to be typographically better; the text width may become slightly smaller, but that’s just a coincidental byproduct.
If you use a negative letter-spacing
, that means brute squeezing. It may occasionally make sense e.g. for sans-serif text in large size, with small values like letter-spacing: 0.03em
. Even then, the result should be evaluated, especially paying attention to letter combinations that may look odd when squeezed (eg., “rl” or “te”). And mostly, if you think letters are spaced too much apart, or the text gets too wide, considering using another font rather than disrupting the normal display of a font.
You can specify the distance between all letters with
letter-spacing: 0.1em;
but you can't kern individual letters unless you wrap each letter in a span
Recommended
IF the font variant contains narrow versions you can use
font-stretch: condensed;
Not Recommended
If not then you might end up using scale()
transform: scale(.8,1);
-
The scale method is certainly not ideal, but it helped me in a pinch. Thanks! Jan 23, 2021 at 17:23