Text not aligning with large font-size
css, html
Solution
Each glyph in a font, sits within a bounding box. The glyph is usually not hard up against any of the edges of that box, and each glyph (or letter) will have differing amounts of space around it to help space it naturally when it is combined with other glyphs to form words.
Have a look at http://www.freetype.org/freetype2/docs/glyphs/glyphs-3.html to get a feel for some of the intricacies of type design.
I'm not aware of any text or font properties in CSS that can eliminate that space, and in any case that space will be different for each glyph, and different between the same glyphs in different fonts.
Problem
I'm building a periodic table in HTMl/CSS and I cant get the text inside the large `.element-symbol` to align left with the `.atomic-weight`, `.element-name` and `.atomic-symbol` without an arbitrary `text-indent`. I guess this is just to do with the width of the letters, but is there a way of having the first letter in `.element-symbol` start hard left? i.e against the red border Markup: ``` <div class="cell"> <div class="atomic-number"><span>2</span></div> <div class="element-symbol"> <abbr>He</abbr> </div> <div class="element-name"><span>Helium</span></div> <div class="atomic-weight">4.002602</div> </div> ``` CSS: (red borders to show alignment issue) ``` * { padding: 0; margin: 0; box-sizing: border-box; line-height: 1; } .cell { border: 1px solid black; font-family: sans-serif; width: 280px; height: 280px; margin: 20px auto; padding:10px; background-color: #4DBCE9; } .element-symbol { font-size: 173px; border: 1px solid red; font-weight: 400; /*text-indent: -12px; dont want to use this*/ } .atomic-number, .atomic-weight, .element-name { font-size: 25px; border: 1px solid red; } ``` Example in codepen