How Browser Draws Letters

Sometimes fonts look " ragged " or too bold on the site. CSS allows hinting to browser how to smooth them.

1. text-rendering

• optimizeLegibility: Browser enables ligatures (letter connections fi, fl) and kerning (smart spacing between letter pairs). Essential for headings.
• optimizeSpeed: Disables everything extra for fast rendering.

2. Smoothing (Mac/iOS only)

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

This makes text thinner and neater on high-resolution screens (Retina).