Make the font more concise with CSS

Question

Is there a way to bring letters together using CSS? I know that we can adjust the linear height, but I did not know if there is anything that compresses the font closer to each other.

Answer 1

Are you looking for letter-spacing

 #id { letter-spacing: -1px; } 

Reference

Answer 2

The answer depends on what you mean by “font,” “condensed,” and “compress.”

You can select a more compressed font (a specific font) for a font (from the font family) using the font-stretch property. But he does not compress anything; he just picks up a font that was designed more condensed. Fonts commonly found on people's computers do not have such fonts; some downloadable fonts (web fonts). And basically you can use them in a more cross-browser mode, using only a specific font name, as if it were the name of a font family, for example. font-family: Arial Narrow . (Note: Arial Narrow is only available on some computers, much less often than the main Arial.)

You can use some CSS methods to suggest kerning if the font used is kerning in OpenType format. Most fonts commonly used on web pages do not have this information. (Exceptions: Palatino Linotype, Times New Roman, and Microsoft C fonts such as Calibri and Cambria.) Suitable ads:

 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 small. This does not mean “squeeze” in any rough sense. Rather, it modifies the rendering in a subtle way so that it is better in typography; the width of the text may decrease slightly, but this is just a random byproduct.

If you use negative letter-spacing , this means gross compression. Sometimes this may make sense, for example. for sans-serif text of large size with small values, for example letter-spacing: 0.03em . Even then, the result should be evaluated, especially paying attention to combinations of letters that may appear blurry during compression (for example, "rl" or "te"). And basically, if you think that the letters are too far apart, or the text becomes too wide, given the use of a different font, rather than interrupting the normal display of the font.

Answer 3

You can specify the distance between all letters using

 letter-spacing: 0.1em; 

but you cannot attach individual letters unless you wrap each letter in the gap

Answer 4

Recommended

IF the font option contains narrow versions that you can use font-stretch: condensed;

Not recommended

If not, then you can use scale () transform: scale(.8,1);