Rendering

Text Rendering

Utilities for fine tune optimization by suggesting to the browser as to how it should render text on the screen.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
text-optimize-auto	text-rendering: auto;
text-optimize-speed	text-rendering: optimizeSpeed;
text-optimize-legibility	text-rendering: optimizeLegibility;
text-optimize-precision	text-rendering: geometricPrecision;

Usage

<div class="text-optimize-legibility">
  ...
</div>

HTML

.dummy {
  @extend
    .text-optimize-legibility;
}

SCSS