SDF Font Rendering
signed distance fields are popular for font rendering because they allow smooth scaling and effects like outlines and drop shadows. however, SDFs have known limitations, especially with sharp angles at high magnification.
the problem with sharp corners
SDF fonts store distance-to-edge, not the actual edge shape. when a glyph has sharp corners (like the letter W, M, or V), the distance field "rounds off" these corners. at small scales this is invisible, but at high magnification the rounding becomes obvious.
interactive demo
this visualization shows the letter W converted to a signed distance field using 8SSEDT. the chunky rendering shows the actual SDF grid cells.
- drag to pan the view
- pinch (two fingers) or scroll wheel to zoom
- watch how the sharp angles at the bottom of the W become rounded at high zoom
why this happens
the SDF stores the euclidean distance to the nearest boundary pixel. at a sharp corner, the distance field forms a circular arc rather than a sharp point. this is mathematically correct for distance-to-boundary, but visually incorrect for the intended sharp corner.
solutions
- multi-channel SDF (MSDF) - stores distance to each edge separately, preserving corners
- higher resolution SDF - reduces but doesn't eliminate the problem
- vector rendering - direct curve evaluation, no SDF artifacts