|
Pixel Ambacht
[Roel Nieskens]
Dutch site mainly concerned with font technology. Interesting sub-pages: - An article on multicolor fonts.
- An article on multicolor icons.
- An article on an 8-bit multicolor font, Compyx, developed by the writer, and freely available for download. It hearkens back to the original pixel fonts that hackers used to love---Compyx is the name of a famous Commodore 64 graphician. It is a three-color font created in a scalable manner by a very clever hack: We have four SVG files per character, each file representing one color. We're going to use Fontlab's TransType 4 to create the multicolor font, but TransType can't work with a bunch of SVGs. It takes regular singlecolor fonts, and allows us to overlay and color them, and export them as a multicolor font. So, first we need to create four regular fonts, each one containing all the characters belonging to the same color layer. Since I don't need control over typographic details like kerning or hinting---Compyx is a lot simpler in design than a proper typeface like Helvetica---I simply used trusty old Icomoon. We import all characters belonging to the same color layer, and turn those into a regular TTF. You'll end up with four files: font-color1.ttf, font-color2.ttf, font-color3.ttf and font-color4.ttf. We can then fire up TransType 4 and import all four fonts. TransType allows you to overlay these fonts and give each layer a color, creating basic multicolor fonts. We do this with the method "Overlay fonts", which allows us to determine the order and color of each layer. When everything looks good, we export the combined font with the Opentype TT settings. You'll end up with font files for three of the four proposed formats. We now have true multicolor fonts! Now, for the last step we take the rather big TTF font (628Kb in the case of the Compyx font) and crunch it to a more reasonable 104Kb WOFF file. I used the sfnt2woff tool for this.
|
EXTERNAL LINKS
Pixel Ambacht
MyFonts search
Monotype search
Fontspring search
Google search
INTERNAL LINKS
Multicolor typefaces ⦿
Dutch type design ⦿
Web fonts ⦿
Icon fonts ⦿
Pixel/bitmap fonts ⦿
Sites with only a few free fonts ⦿
SVG typefaces ⦿
|
