The image below are examples of two different methods that the letter,"J" is rendered:

enter image description here

When rendering text, letters seem to be, "warped", or offset by a fraction of a pixel. This causes the individual characters to become slightly more bolded on one area of the letter than another, causing it to appear uneven. (Consider the letter J in both of the colored portions of the HTML screenshot above). In order to fix this issue, I must answer two questions:

  1. Is this caused by a fractional distance between different characters, causing some of the letters to land in the middle of an individual pixel? If so, what is the optimal distance needed so that all of the characters land on the same portion of a pixel?
  2. If (1.) is not the cause of the offset, what is? Or, clarify if the issue is caused by an internal rendering system and is unfixable.
  • (Note: For the image above, zoom in on the letter J on both of the highlighted words in order to see the discrepancy).
    – Calcudev
    Jul 10, 2021 at 3:46
  • I wonder if any HTML specific adjustment will be possible here. It may be more relevant to ask if this is due to resolution, display driver, browser?
    – Harshal
    Aug 1, 2021 at 14:31
  • I want to move this out of UX site but not necessarily close them. There could be a good discussion had regarding the font kerning, their implementation etc. Probably on the main StackOverlow Site?
    – Harshal
    Aug 1, 2021 at 14:34

1 Answer 1


Whilst I think this is a bit off an off topic question, there are many things which influence how a font renders:

  • The font file itself, how it was made and what format it's being served in
  • CSS specific adjustments, including, font-size, letting-spacing, line-height, font-weight and emphasis (none of which would typically cause the type of issue you're describing
  • The browser rendering engine itself, obviously depends on browsers, also settings (either browser or specifically set values for things like font-smoothing/antialiasing
  • The physical screen it's rendered on, the resolution, the pixel density.
  • Client specific adjustments, including zoom levels, font-size adjustments etc

Not many of these you can control and realistically not many you should want to.

Short answer is that this is likely #2.

Not the answer you're looking for? Browse other questions tagged or ask your own question.