TextShaper

Appearance

Playground ​

Test TextShaper's functionality directly in your browser. Load a font and explore all features below.

Load a Font ​

Drop font file here or click to browse

Text Shaping ​

Shape text with OpenType features and see glyph positioning.

Select a font above to start shaping text.

Variable Fonts ​

Load a variable font to explore axis controls.

The selected font is not a variable font.

Try loading Inter Variable or Recursive to see variable font controls.

Glyph Inspector ​

Inspect individual glyphs, their outlines, and metrics.

Select a font above to inspect glyphs.

Rasterization ​

Preview glyph rasterization with different settings.

Select a font above to preview rasterization.

SDF Rendering ​

Signed Distance Field rendering for GPU text.

Select a font above to preview SDF rendering.

MSDF Rendering ​

Multi-channel Signed Distance Field for sharp corners at any scale.

Select a font above to preview MSDF rendering.

Synthetic Effects ​

Apply synthetic bold, italic, and condensed transformations.

Effects

0.2 = typical italic (~11°)
< 1.0 = condensed, > 1.0 = expanded
Select a font above to preview synthetic effects.

Blur & Gradients ​

Apply blur filters and gradient fills to glyphs.

Blur Settings

Standard Gaussian blur - high quality, O(n) per pixel.

Select a font above to preview blur and gradient effects.

Outline Transforms ​

Apply 2D and 3D transformations (rotation, scale, shear, perspective) to glyph outlines using vector or raster rendering.

2D Transform Controls
3D Perspective
Select a font above to preview transforms.

Asymmetric Stroke ​

Generate stroked outlines with independent X and Y border widths.

Stroke Controls
Display
Select a font above to preview asymmetric stroke.