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

Question

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]

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 )

Please open the quill editor here https://quilljs.com/docs/formats/ and type V V V V and V V V V for Lato font — Mark Timothy, Jul 02 '20 at 22:00
since you already typed the code, why not doing a copy past here instead of providing a screenshot? you are required to do so: https://stackoverflow.com/help/minimal-reproducible-example — Temani Afif, Jul 02 '20 at 22:07
@Ruzgar The solution should work for other characters as well, I tried both word-spacing and letter-spacing, please replace V with B and check. With B character, there's no any issue, so adding letter spacing is not a solution. Thanks for the suggestion though. All I want to know is if this is a Lato font bug or not. — Mark Timothy, Jul 02 '20 at 22:33
@TemaniAfif Please check https://codepen.io/mark-t-m/pen/eYJyEMm and please let me know your opinion. — Mark Timothy, Jul 03 '20 at 04:07
@Ruzgar I can reproduce this issue with some other fonts as well, is there a solution for this ? — Mark Timothy, Jul 03 '20 at 04:18

score 1 · Accepted Answer · answered Jul 03 '20 at 18:09

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

Hi Anne, Thank you so much for the information. I can accept this as the answer, This is what I was looking for. font-kerning CSS solved my issue. `font-kerning: none;` https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning — Mark Timothy, Jul 03 '20 at 18:59

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

1 Answers1