Text Rendering
Text Rendering
Prysm employs a heuristic-based system to determine the most efficient method for rendering text glyphs. This page outlines the specific rules and rendering techniques used to balance visual fidelity with performance.
SDF Glyph Rendering
Most text runs are rendered using Signed Distance Fields (SDF). This method allows the rendering library to scale text across various font sizes without regenerating glyphs, significantly improving performance.
To maintain visual clarity while managing memory overhead, Prysm utilizes an adaptive GPU SDF generation system. Glyphs are generated at three distinct size tiers, and the renderer automatically selects the closest larger size to ensure maximum detail.
| Size Tier | Generation Size | Default Spread (10%) |
|---|---|---|
| Small | 32 px | 4 px |
| Medium | 52 px | 6 px |
| Large | 72 px | 8 px |
Raster Glyph Rendering
For scenarios requiring pixel-perfect clarity, Prysm can utilize Raster Glyphs. Unlike SDFs, raster glyphs are generated on the CPU specifically for a fixed font size. If a single letter appears in three different sizes, the library generates three separate glyphs. This provides more accurate visual representation but increases performance costs and texture memory overhead.
Forcing Raster Rendering
You can disable SDF rendering for specific fonts using the coh-font-sdf: off property within a @font-face declaration:
@font-face {
font-family: 'ExampleName';
src: url('ExampleName.ttf');
coh-font-sdf: off;
}
This option should be used when visual clarity is preferred over performance and texture memory overhead. Raster glyphs can be especially advantageous when the given font has lots of intricate curves and details.
For more information, see the documentation on Font Usage in Prysm.
Large Scale Text
When text sizes exceed 256 px, the rendering library switches from SDFs to Path Tessellation. This ensures that extreme-scale glyphs maintain sharp edges and high visual clarity.
Path-based glyphs are regenerated per frame and are not currently cached. You can bypass path tessellation by using text-rendering: optimizeSpeed. DOM elements set to optimizeSpeed will never utilize path glyphs, defaulting instead to standard rendering methods to save processing time. The text-rendering: optimizeSpeed options should be used visual clarity for large text is not of utmost importance. Rendering the glyphs as paths comes with significant performance overhead compared with the standard SDF based scheme.