Search code examples
htmlcssfontsword-spacingnon-breaking-characters

The width of non breaking space ( 160 ) and normal space ( 32 ) are different


enter image description here

The width of the first line is not equal to the second line and the reason is clearly the width of the &nbsp and normal space is different. The font is Lato and this occurs only for some characters only. Is this a Lato bug ? or is there any way to resolve this? no luck with letter-spacing or word-spacing CSS

  [codepen.io/mark-t-m/pen/eYJyEMm][2]

enter image description here

The spacing in black color text is non breaking space ( 160 ). The spacing in red color text on top of the black color text is normal space ( 32 ) . The font is Lato and this happens only for some characters only ( f, r, v, w, y )


Solution

  • When we talk about a font’s spacing, or letter fit, we’re referring to the amount of space between the characters, which in turn gives the typeface its relative openness or tightness. A font’s spacing is initially determined by the manufacturer or designer and is somewhat size-dependent. Text designs tend to be spaced more openly than display faces. The reason? The smaller the point size, the more space is needed between letters to keep the characters legible. Conversely, as a typeface is set larger, a snugger fit between letters creates word-shapes that are easier to read.

    Please check https://www.fonts.com/content/learning/fyti/using-type-tools/spacing-and-kerning-1