Syntax

Text Rendering

Setting what to optimize when rendering text.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
text-rendering:valuetext-rendering: value;
text-rendering:autotext-rendering: auto;
text:optimizeSpeedtext-rendering: optimizeSpeed;
text:optimizeLegibilitytext-rendering: optimizeLegibility;
text:geometricPrecisiontext-rendering: geometricPrecision;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="text-rendering:auto:hover text-rendering:auto@sm text-rendering:auto@dark text-rendering:auto@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.