Skip to content
Related Articles

Related Articles

Improve Article

CSS text-rendering

  • Last Updated : 27 Nov, 2020

Text-rendering is a property that allows you to choose what to optimize when rendering text. It sends the information to the rendering engine about what to optimize for while rendering text. 

It’s actually not a CSS property and is not defined in any CSS standard. It’s an SVG property but Gecko and Webkit browsers allow you to apply this property to the HTML elements. In doing so compromises among other aspects like speed, legibility(Clarity), and geometric precision.

Syntax:

text-rendering : auto | optimizeSpeed | 
                 optimizeLegibility | geometricPrecision;

Values:

  • auto: Browser makes predictions about when you can adjust speed, readability, and geometric accuracy while drawing text. Different browsers respond with different values.
  • optimizeSpeed: Browser prioritizes more the rendering speed compared to legibility and geometric precision while drawing text. It disables kerning and ligatures.
  • optimizeLegibility: Browser prioritizes more legibility compared to rendering speed and geometric precision while drawing text.  It enables kerning and optional ligatures.
  • geometricPrecision: The browser prioritizes more geometric precision compared to rendering speed and legibility while drawing text. Certain aspects of fonts like kerning, don’t scale linearly hence it can make text using those fonts look even better.

 Example :



HTML




<!DOCTYPE html>
<html>
   <head>
      <title>Geeks For Geeks</title>
      <style>
         .auto {
         text-rendering: auto;
         }
         .optimizeSpeed{
         text-rendering: optimizeSpeed;
         }
         .optimizeLegibility {
         text-rendering: optimizeLegibility;
         }
         .geometricPrecision{
         text-rendering: geometricPrecision;
         }
      </style>
   </head>
   <body>
      <h2 style="color:#3FBF3F">text-rendering</h2>
      <p class="auto">Welcome to GFG</p>
  
      <p class="optimizeSpeed">Welcome to GFG</p>
  
      <p class="optimizeLegibility">Welcome to GFG</p>
  
      <p class="geometricPrecision">Welcome to GFG</p>
  
   </body>
</html>

Output: 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :