Semantic Icon Fonts

single glyphs2 1338477358

The latest version of Unicode (6.1) contains hundreds of newly encoded symbols, an advance which enables designers to specify images in icon fonts with specific Unicode values (if the fonts are correctly encoded). This means that instead of coding the icons using images (which search engines can’t read) or arbitrary codepoints, designers can use semantic information understandable by humans and computers alike. Greta Symbol is a collection of thousands of symbols and alphanumerical characters available as icon fonts. Most of the symbols come in a range of 10 weights, and all glyphs which have Unicode specifications are correctly encoded.

In combinations with Typotheque’s webfont service, you can benefit from these latest developments, creating tiny fonts which include just the symbols you need. You can create custom subsets of fonts by using the Unicode values of the symbols by simply formatting the value starting with 0x and separating all glyphs with a comma, semicolon or space. For example, to use the Unicode character ‘Fire’, which has the value 1F525, enter 0x1F525, followed by a comma.

When using the custom subset font on your webpage, you will need to enter the Unicode character as an HTML hexadecimal numeric entity. You can do this by entering &#x before the Unicode value. For the Fire symbol enter 🔥. The resulting subset font is only 4kb, over 100 times smaller than the original file size of the full font (458kb). See this simple sample page, and unlock the semantic power of the web.