Problems would occur when the font embedding failed, ending up with strange letters in random places that didn’t make sense. This made it easy to see the character-to-symbol conversion simply by typing. Typing a “w” would produce a picture of a globe, typing an “m,” an envelope. Many of the early symbol font services mapped the graphic to a letter in the ASCII range. When it comes to accessibility, symbol fonts are in the conflicted situation of working poorly as images, yet quite well as text. This convergence of technologies-font embedding, high-resolution displays, and browser support-has created a new opportunity to further optimize performance and user experience. Fonts are vectors and all web browsers, even IE6, have the ability to render embedded fonts in an HTML page. PDF and SVG are possible, but create interoperability problems. This results in something that looks more “blocky.” Vectors never have this problem, scaling endlessly up or down for any resolution.Įmbedding vector graphics into HTML has had limitations in the past. This is important because rasterized images are designed to work at a specific resolution, so at higher pixel densities, like those found in today’s high-resolution displays, the images must be scaled up to appear the same size. Symbol fonts trade blocky raster images for smooth vector images in your HTML. One of the best-known examples is GitHub, which has improved both its speed and its user experience by dropping all its tiny icon files in favor of Octicons, a single, custom symbol font file. A smooth experience #section2Īs the number of fonts designed for use as icons, glyphs, and decorations increase, several high-traffic websites have replaced all the images on their site with a single symbol font. In this article, I’ll walk you through some of the advantages and issues you’ll encounter when using a symbol font. This has the same caching and file size benefits as a CSS sprite, as well as some additional benefits we’re only now realizing with high-resolution displays. Now it’s time we embrace the third epoch in performance optimization: symbol fonts.Įmbedding a symbol font lets us move some of those tiny icons into a single font file rather than a sprite. 3 days of design, code, and content for web & UX designers & devs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |