1

Chrome is truncating the display of Segoe UI when used with a line-height of 1.15 (default setting of normalize.css) This behaviour does not occur on Firefox

This is best illustrated via a screenshot (zoomed in instead of using larger fonts)

enter image description here

You can see a JSFiddle here

Why is Chrome truncating the g character? Why would the problem get worse as you decrease the line height then moving in the same direction get better?

Please note adding padding to the input does not address the issue

wal
  • 17,409
  • 8
  • 74
  • 109
  • Possible duplicate of [Text input on Chrome: line-height seems to have a minimum](https://stackoverflow.com/questions/33185205/text-input-on-chrome-line-height-seems-to-have-a-minimum) – gekkedev Oct 02 '19 at 12:55
  • @gekkedev could you explain how it is a duplicate? there is no mention of truncating text – wal Oct 02 '19 at 13:38
  • After some experimenting, it appears to me that Chrome has a minimal line-height which creates the relation in my eyes. When you use values like 0.5, it will even get bigger again. That question has some deeply explanatory answers with some workarounds. – gekkedev Oct 02 '19 at 14:26
  • FF 60.0.2 / Chrome 77.0.3865.90 Same issue, `Segoe UI` requires `25px` height wise to account for every descender `p,g,y` etc..., basically `line-height:1.5` to be safe – Rainbow Oct 02 '19 at 14:58

0 Answers0