SDF and MSDF Text: Preserve Glyph Edges Across Display Sizes

Store a boundary, then reconstruct coverage

A signed distance field stores distance to a shape boundary instead of directly storing pixel coverage. A shader converts that distance into the opacity appropriate for the displayed edge. This helps a glyph atlas remain useful across sizes, while allowing outlines and other distance-based effects. Valve's original work explains the representation and its limits at sharp corners. [1]

Match the decoder to the atlas

A conventional SDF uses one distance channel. MSDF encodes different edges across channels and reconstructs the distance using their median, improving corner preservation. The channels are numerical data and must not receive an sRGB color conversion. The decoder also needs the encoded distance range expressed in output pixels; a fixed softness in texture units changes appearance as text scales. [2]

Preserve the generator's metrics and coordinate conventions. Glyph bounds, advance and baseline placement are different quantities. A tight visible rectangle does not replace the layout metrics.

Worked example: decode one edge sample

Suppose an illustrative MSDF sample is (0.49, 0.54, 0.56). Its median is 0.54. With the boundary at 0.5 and a distance range of 8 output pixels, the signed screen distance is (0.54 - 0.5) * 8 = 0.32 pixels.

Using the simple reconstruction opacity = clamp(distance + 0.5, 0, 1) gives opacity 0.82. This calculation assumes positive distance inside the glyph and the stated encoding. It is a decoder check, not a universal filter choice. If text size changes, update the output-pixel range; retaining the old value changes edge softness even when the atlas sample is unchanged.

Validate the whole text path

Start with a few glyphs containing curves, acute corners and narrow strokes. Inspect them at the smallest and largest intended sizes, then under perspective if the game uses world-space labels. Compare filled glyphs before enabling outlines or shadows. Reserve atlas margins for the encoded range, filtering and requested effects so neighboring glyphs cannot leak into each other.

Then test complete strings. Text shaping maps character sequences to suitable glyph forms and positions; it remains a separate requirement. HarfBuzz provides shaping for multiple writing systems. [3] Include combining marks, ligatures and the scripts actually shipped, and verify fallback fonts and missing-glyph behavior.

Recognize the remaining limits

Distance fields remain sampled representations. Small counters, thin strokes and extreme reduction can lose detail; increasing softness cannot recover an absent feature. Large outlines can exceed the stored distance range. Judge readability at the final display size, and use an appropriate alternative rasterization path where that produces better small text. Track atlas memory and update behavior as the supported glyph set grows.

Sources

• [1] Improved Alpha-Tested Magnification for Vector Textures and Special Effects — Chris Green, Valve.
• [2] msdfgen: Multi-channel signed distance field generator — Viktor Chlumsky, original implementation.
• [3] What does HarfBuzz do? — HarfBuzz contributors, official manual.