How do I space or size HTML text so that blurriness is mininized?
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:
- 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?
- 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.