OpenType-SVG colour fonts what you need to know and why I love them
OpenType-SVG fonts are a thing now. What are you talking about I hear you say? Colour fonts are here, full colour for each glyph, its a thing now—and it’s called OpenType-SVG.
For font designers, it’s kind of a big deal.
We have been stuck with black & white fonts since forever. Now we can make full-colour fonts (with the help of FontSelf) right inside Photoshop or Illustrator—and that has blown my tiny little mind.
The next big thing
While still very new and cutting-edge colour fonts are creating quite a stir in the creative community.
Many designers don’t see the point and think it’s a flash in the pan. They see the bubble bursting once the initial excitement dies down.
Others, like me, think it could be the next big thing—I’m being cautious here with could be.
Inside I’m like a child with a new toy, super excited and wondering how hard I can push this new technology.
It might be much ado about nothing for most people, but Font designers are jumping on board and creating some killer colour typefaces.
Who knows how it will pan out. With Adobe offering full support I class that as a significant moment.
OpenType-SVG Color fonts the low down
OpenType-SVG fonts are generally available in two flavours. Full bitmap colour fonts and full-colour vector fonts. It is more complicated, but let’s leave it at that for now.
The OpenType-SVG font format was originally created by Adobe and Mozilla. It became industry standard in 2016, so it’s still very new. It was helped along when Google and Microsoft agreed on a single format. Everyone knows how awkward Microsoft can be, so It’s so good they are onboard with everyone else. I’m hoping that they don’t throw their toys out of the pram and help bring full-colour bitmap fonts to Windows users.
While support at the moment is limited, Mac designers who are using Photoshop CC and Illustrator CC can use them right now. They also work in many native Mac apps, but for me adobe software is king.
The fontself chaps have written a more in-depth article about OpenType-SVG fonts.
What are the benefits of colour fonts?
Traditionally fonts are made from vectors. They have 1 colour—black. You could say they are not full colour, they are black.
In your design application, you can change the colour, but then it just contains that 1 solid colour.
An OpenType-SVG bitmap font contains bitmap images will full transparency and full colour. It contains full colour— full-colour people!
Still underwhelmed? Let me break that down for you
- Each glyph can contain any full colour image
- Each glyph can have millions of colours
- Each glyph can have transparency
Colour bitmap fonts can contain so much more detail. They are not restricted by vector points—in fact, they don’t contain any vector information at all.
The more creative type designers often start with a real paintbrush on real paper. Their design contains so much lovely detail that gets lost when they convert it to a single colour. You just can’t convert a watercolour letter to a black vector letter and say it’s the same. It’s not the same. I know this as I tried to create a watercolour font called Teardrop years ago.
Since creating Teardrop font I have been trying to get as much detail into a traditional typeface as I could.
Now, the technology has caught up with my ambition and that’s why I’m so excited.
It offers so many creative possibilities for typefaces.
The downside of OpenType-SVG fonts
One downside is the file size. A bitmap font is inevitably much bigger—as it contains a whole bunch of images. These images are only around 700-800 pixels. So they will only scale to a certain point before they become pixilated. A scaled colour vector font does not suffer from this as its still a vector, it may still be much larger in terms of file size.
Ironically the colour could be a downside. Once a colour glyph is created that colour is locked in. Unless you are using the font in Photoshop. This may be a downside for some designers.
The limited support for colour fonts is also a drawback. We are not quite there yet for Windows users, but I’m hoping Microsoft and Adobe will sort this out.
Anyway enough talk let’s see some examples
Colour font examplesGet Fierce font Get Hello Monday font
That is all.