The geometricPrecision property allows for more fluid scaling. When SVG font is scaled, the browser calculates pixel size, then rounds to the nearest integer. Certain aspects of fonts-such as kerning-don’t scale linearly, so geometricPrecision can make text using those fonts look good.

geometricPrecision – The browser emphasizes geometric precision over rendering speed and legibility.

This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.

optimizeLegibility – The browser emphasizes legibility over rendering speed and geometric precision.

optimizeSpeed – The browser emphasizes rendering speed over legibility and geometric precision when drawing text.

Be aware that different browsers interpret this value differently. auto (default) – The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.You can learn more about type rendering systems and operating systems on the Typekit blog. Not to mention that different browsers each have their own text rendering defaults, so there is no guarantee that your font treatments will be displayed as intended on the user’s system. However, Gecko/WebKit/Blink browsers let you apply this property to HTML elements.īe aware that Windows, Linux and OS X each (may) have different text-rendering engines. The text-rendering property is not defined in any CSS standard.

Sometimes the result is just straight up better kerning: You can see some before/after examples here. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen.

Mac make text cleaner