Increasing The Text Size Of Unicode Symbol Occupies Too Much Margin

I want to use a unicode symbol and I want to make really large. But when I do this it takes a lot of margins and padding that I'm not able to control. Even when I set the margins a

Solution 1:

This kind of spacing is embedded within the font glyph itself, and cannot really be overcome with CSS except by line height properties.

If you want a vectorised glyph, I would use an SVG element instead.

Solution 2:

The empty space is neither margin nor padding but part of the glyph design, by the font designer. Glyphs are normally designed so that consecutive glyphs do not touch each other and so that that even when text is set solid (in CSS terms, when line-height is 1), glyphs usually do not touch glyphs on other lines.

This means that if you want a glyph to appear in a minimal rectangle that encloses is, which seems to be the goal here, you have to fight against typographic design. There is no simple way to do that. For a specific character and specific font, assuming that the font will always be used (which is usually an unrealistic assumption on the web), you can find out (with experimentation) suitable values needed to displace a character. Example:

<style>
.tight {
  font-size: 180pt;
  font-family: Lucida Sans Unicode;
  background: #aaf;
  display: inline-block;
  position: relative;
  width: 0.537em;
  height: 0.63em;

}
.tight span {
  position: absolute;
  left: -0.059em;
  top: -0.385em;
}
</style>           
<span class=tight><span>&#x2135;</span></span>

Result (when Lucida Sans Unicode is available):

The idea here is to place the glyph inside a span element which is inside an outer span element so that the outer element has the desired background color and has its width and height set to match the dimensions of the visible part of the glyph, obtained experimentally. The inner span element is displaced from its natural position using “absolute” positioning, which really means positioning it relative to the outer element.