I'll do my best to explain colour fonts in simple terms without diving into too much technical detail, so this post should be clear and easy to understand.
What Are Colour Fonts?
Colour fonts represent a significant advancement in digital typography, introducing vibrant graphical elements and colour within font files. Traditional fonts (or standard fonts) are pretty straightforward—they come in just one colour, and that's black. It's been that way for a long time—boring right?
What Sets the New Kid Apart?
Now, with the development and wide adoption of the OpenType-SVG font format, we can display multiple colours, gradients, textures, transparency and graphics in a single glyph—wowzer!
The new OpenType SVG format is a bit like ice cream – it's one format, but for the sake of simplicity, we can split it into two flavours:
- OpenType SVG font: It has multiple colours, gradients, textures and transparency—but no images.
- OpenType SVG bitmap font: It includes images, the images can have multiple colours, gradients, textures and transparency, but they are just images.
Both formats are essentially like traditional fonts but with added information that enables the display of graphical properties beyond just the character's outline shapes.
However, they do have some differences, particularly in file size, which I'll discuss in more detail at the end of this post.
So, colour fonts are here and are officially known as OpenType-SVG fonts.
A Very Brief History of OpenType-SVG
The OpenType-SVG font format, created by Mozilla & Adobe, became an industry-standard in 2016, adopted by major players like Microsoft & Google. Before this, companies had their own colour font formats. Today, there are four primary colour font formats: SBIX, COLR, CBDT, and SVG.
Because of format differences, the design industry is in transition. Multiple colour font formats may be necessary for cross-platform compatibility across various systems, browsers, and apps—that sucks, right?
OpenType-SVG has gained momentum and is now officially supported by Windows 10, macOS Mojave, and iOS 12—so that's good news.
Where Can I Use Colour Fonts?
At the time of writing, the following applications support OpenType-SVG fonts. Please keep in mind that this list is continuously growing:
- Adobe Illustrator CC 2018 and later
- Adobe Photoshop CC 2017 and later
- Adobe InDesign CC 2019 and later
- Microsoft Word (2016 and later on Windows, 2019 and later on macOS)
- Microsoft PowerPoint (2016 and later on Windows, 2019 and later on macOS)
- Apple Pages
- Apple Keynote
- Sketch
- CorelDRAW (versions with SVG support)
- QuarkXPress (versions with SVG support)
- Procreate 4.3 and later
- Pixelmator
- Affinity Designer
- Safari
- Microsoft Edge (Windows 10 Anniversary edition and above)
- Firefox 32 and later
What About File Size?
Colour fonts are bigger than standard fonts, particularly if they have high-resolution images. Standard fonts are small, just a few to a few hundred kilobytes. Colour vector fonts can be much larger, from hundreds of kilobytes to a few megabytes.
OpenType-SVG bitmap fonts are even larger than colour vector fonts, ranging from a few to tens of megabytes. This is because they include high-resolution pictures.
- Standard font: Small—Normally a few hundred kilobytes.
- Colour Vector font: Larger than standard font—could be a few megabytes.
- Colour Bitmap font: Much bigger than colour vector font—possibly as much as 10 megabytes.
What About Text Scalability?
Great question! Colour fonts that include vector glyphs (OpenType-SVG) can be resized without any loss, just like regular fonts.
However, colour bitmap fonts (OpenType-SVG bitmap), like other pixel-based images, will scale well up to a certain size, depending on their original resolution—beyond that point, the text may appear pixelated.
So, whether you're printing text with a colour bitmap font or displaying it on high-resolution screens, you'll need to determine the maximum size it can scale properly to.
Consider this scenario: you wouldn't want to use a colour bitmap font for a massive billboard design because it will end up looking incredibly pixelated and, honestly, quite awful.
Conclusion
If you are thinking of buying an OpenType-SVG font here are some important questions to consider:
- Compatibility: Is the font compatible with the software and applications you intend to use it with? Check if it's supported in your design software, website builder, or operating system.
- Licensing: What type of license does the font come with? Is it for personal or commercial use? Are there any restrictions on usage, such as the number of users or projects?
- File Size: Color fonts can be larger in file size compared to regular fonts. Will the font file size affect your website's loading speed or project file size significantly?
- Scalability: How does the font scale at different sizes? Ensure that it looks crisp and clear at both small and large sizes, especially if it will be used for various design purposes.
- Colour Variations: Does the font offer a variety of colour options and styles? Some colour fonts provide multiple colour variations for each character, allowing for creative flexibility.
- Print vs. Digital: Consider whether you'll primarily use the font for print or digital media. Some colour fonts are optimized for screen use, while others work better in print.
- Return Policy: Understand the font seller's return or refund policy in case the font doesn't meet your expectations or needs.
By asking these questions, you can make an informed decision when purchasing an OpenType colour font that suits your design requirements and preferences.