Deep dive into type rendering in web browsers.
TypeRenderingOutlinesHintingANTIALIASINGsub-pixel antialiasingRasterizers CoreTextweb fontsGDIDirectWriteSampling BLACK & WHITEgrayscalecolor filteringLCDpixelsTrueTypeSVG WOFFBezieropentypeClearTypeDesignResponsiveSmoothingTypographytwitter.com/@bram_stein
View Slide
TTF, OTF, SVG(WOFF, EOT)
OpenType
OutlinesBASELINEX-HEIGHTCAP HEIGHT
Hinting
Antialiasing
SubpixelAntialiasing
Brian Wotherspoon - flickr.com/photos/brian_digital/
Black and White Grayscale Subpixel
Browsers
BrowsersPlatform
OSX iOSChrome Sub-pixel / Grayscale GrayscaleFirefox Sub-pixel / Grayscale n/aOpera <= 12 Sub-pixel / Grayscale n/aSafari Sub-pixel / Grayscale Grayscale
Linux Android Firefox OS ChromeOSChrome * Grayscale n/a GrayscaleFirefox * Grayscale Grayscale n/aOpera <= 12 * Grayscale n/a n/aSafari n/a n/a n/a n/aAndroid n/a Grayscale n/a n/a
Windows XPTTFWindows XPCFFWindows XPTTF ClearTypeWindows XPCFF ClearTypeIE6 Grayscale - Subpixel -IE7 Grayscale - Subpixel -IE8 Grayscale ?? Subpixel ??Chrome Grayscale GrayscaleSubpixel /GrayscaleGrayscaleFirefox Subpixel Grayscale Subpixel GrayscaleOpera <= 12 Grayscale Grayscale Subpixel Grayscale
Windows Vista Windows 7 Windows 8 Windows PhoneIE7 Subpixel (GDI) n/a n/a n/aIE8 Subpixel (GDI) Subpixel (GDI) n/a ??IE9 Subpixel (DW) Subpixel (DW) n/a Grayscale (DW)IE10 n/a Subpixel (DW) Grayscale (DW) Grayscale (DW)ChromeSubpixel /Grayscale (GDI)Subpixel /Grayscale (GDI)Subpixel /Grayscale (GDI)n/aFirefox Subpixel (DW) Subpixel (DW) Subpixel (DW) n/aOpera <= 12 Subpixel (GDI) Subpixel (GDI) Subpixel (GDI) n/a
ResponsiveTypography
html {font-family: “Proxima Nova”, Verdana, sans-serif;font-weight: 300;}
html.tr-aa-none {font-family: Verdana;}!html.tr-gdi {font-weight: 400;}
typerendering.com
OutlinesHintingANTIALIASINGsub-pixel antialiasingRasterizersCoreTextweb fontsGDIDirectWriteSamplingBLACK WHITEgrayscalecolor filtering LCDpixelsTrueTypeSVGWOFF BezieropentypeClearTypeDesignResponsiveSmoothingTypographyResolutionDPIMobileTypekitRequestfinThank youtwitter.com/@bram_stein