radix-typography

To generate pixel-perfect typography CSS for Radix UI, use the vite-plugin-capsize-radix in a Vite project to integrate Capsize metrics, overriding Radix typography variables for deterministic font rendering and spacing.

Inconsistent font rendering in Radix UI often stems from unmanaged font metrics. Applying Capsize metrics generates metric-aware font stacks with deterministic fallbacks, ensuring predictable vertical alignment and spacing across components.

Configure responsive font sizes and line heights by defining your fonts and metrics in the vite-plugin-capsize-radix options within your Vite project, specifying an outputPath to generate the responsive CSS automatically.

Yes, you need a Node.js environment with a Vite project to execute the generation. You must install dependencies like @capsizecss/core, @capsizecss/metrics, and mustache to produce the CSS output.

You override Radix theme typography variables by configuring the vite-plugin-capsize-radix to process Capsize metrics, then importing the generated CSS file after your Radix base styles in your React app.

Using vite-plugin-capsize-radix in a Vite project is the best way to build deterministic font stacks for body, headings, and code, eliminating manual CSS tuning and ensuring consistent layout scaling.