![]() The second step was the hardest one for me. All paths of the bevel layer were “flattened” so you’d be able to set its value to 0 and essentially hide it. The script is really not really flexible for other projects, but I plan to improve that in the future. To do that, I wrote a little script which basically flattens a path in itself. I already had it as a static layer, all I needed was to make it interpolate between two stages. Preparing the bevel layer was probably easier than I anticipated. To keep my sanity, I divided this process into four general steps: preparing the bevel layer, preparing the shadow layer, exporting variable fonts, and merging them all together into a single variable color font. I soon found out converting 400+ glyphs into a variable color font format is no trivial task. As they are regular OpenType fonts with a couple of additional tables, making them variable is much easier. Only after seeing David Jonathan Ross’ Merit Badge I really understood their potential. This format was introduced by Microsoft (they use it for the emoji on Windows), but no other software giant seemed to be interested in its elegance. What took me back at the time was its limited software support. In theory, you’d also be able to create custom color palettes directly in you graphics software, but no app has an interface for this yet. ![]() A color font of this format can have 1, 20 or 50 color palettes with very little difference in file size. These fonts work pretty much like your regular OpenType fonts but with additional “layers” for each glyph plus information on color palettes. COLR/CPAL, meet variable fontsīefore going all in on SVG, I remember having a good feeling about COLR/CPAL fonts. This means you’d be stuck with all the glyphs you don’t need when using it on the web and with no way of shrinking it down. To give you an idea, Rocher-Regular.otf is 64KB, while an SVG version of Rocher with the same character set is at least 872KB, depending on the color palette.Īdding insult to injury, SVG fonts cannot be easily subsetted. OpenType-SVG fonts require embedding an SVG file for each one of its glyphs. However, all that power comes with its caveats. OpenType-SVG fonts are very powerful: gradients, animations, mixing vector and bitmaps are some of their best features. All these fonts combined total well over 12MB. While certainly eye catchy, these OpenType-SVG fonts don’t offer much flexibility and come only in huge file sizes. I’m confident I made the right decision, though. To be honest, I already had 13 working OpenType-SVG fonts when I ditched it. I then proceeded to spend a considerable amount of time into this only to abandon it later. This is the direction Adobe has taken, and I was really excited about having a color version of Rocher working on their apps. Not to be confused with the deprecated SVG fonts, OpenType-SVG is font format that packs SVG files for all or some of its glyphs in a regular OpenType font. I then redirected my attention to SVG color fonts. This means large file sizes and a single fixed color palette per font. These formats basically store PNG files for each glyph and are mainly used for emoji. I didn’t know much about this technology back then, so throughout that year I’ve researched the four formats of color fonts: CBDT/CBLC, sbix, SVG and COLR/CPAL.įrom the start I wasn’t much inclined to make CBDT/CBLC or sbix fonts. ![]() I first considered making real color fonts out of Rocher shortly after releasing it in April 2017. Rocher is now a variable color font! All the paths I didn’t take Merit Badge, by David Jonathan Ross, was the typeface that inspired me to go into this rabbit hole and release Rocher Color. ![]() On top of that, variable fonts technology has opened up another plethora of possibilities. Support for color fonts has seen a considerable increase in the last couple of years. Things have been changing rapidly since then. On the other hand, I so excited about it I couldn’t keep myself from releasing it even knowing the user experience would be subpar. I was well aware of this when I designed Rocher. Stacking multiple fonts on top of each other is a makeshift solution for creating multicolored text in digital media. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |