How do I space or size HTML text so that blurriness is mininized? [closed]

Question

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

---

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.

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.