Signed distance field

A normal glyph texture stores coverage: each texel says how much ink is here. Blow it up and the answer is blurry, because the in-between texels were never recorded. A signed distance field stores something else at each texel, the distance to the nearest edge of the shape, negative inside and positive outside. That field is smooth even where the shape has a hard edge, so interpolating between two texels gives a believable distance rather than a smeared color, and the edge can be recovered at any size by asking the shader a single question: is the interpolated distance past zero? One 32 by 32 texel field can render a letter at 12 pixels and at 400 with the same crispness, from one texture lookup and one comparison. That was the point of Valve’s 2007 paper: vector sharpness at bitmap cost, in a pipeline that only knows how to sample textures.

UI meets this mostly through renderers rather than through CSS. Game engines set their entire interface type from SDF atlases, which is why Unity ships TextMeshPro and why a game’s HUD can scale to any resolution without a font rasteriser in the loop. Map renderers do the same for labels: vector map libraries pack glyph fields into atlases so a label can be rotated, scaled, and given a halo on the GPU, the halo being nothing more than a second threshold at a different distance. The technique also carries icons, where being a field rather than a bitmap buys outlines, glows, and rounded joins for free. The classic failure is a sharp corner, which bilinear interpolation of one distance channel rounds off; the fix is a multi-channel field (MSDF), which encodes several edge distances in the red, green, and blue channels and recovers corners by taking the median.

Where the analogy stops matters, because SDFs have become a fashionable phrase. This is not the same technique as a gooey effect, which is a blur plus an alpha contrast curve applied to ordinary shapes: both live under the same mathematical roof of implicit surfaces, and neither one is doing the other’s work. It is also not the raster versus vector trade a Lottie animation makes, since a field is still a bitmap, just a bitmap of the wrong quantity on purpose. And it is not something a stylesheet can turn on: on the web, text stays the browser’s own rasteriser’s business, and you meet distance fields when you step into canvas or WebGL, or when you export an icon set for an engine that wants one.