My thoughts on Shader Glitch
This 100th Font Friday brings you something super special and future facing: Shader Glitch. It’s not only a variable font, it’s also a color font, making use of the most recent extension to the OpenType standard: COLRv1. Besides solid colors, fonts now can also use gradients and other more complex fills, like blending modes. And Shader Glitch shows that in a very exiting way. See it in action on my live demo site.
The typefaces come with a weight and a glitch axis. This means the colorful distortions can be animated. Like with other color fonts, the base text color of Shader Glitch can unfortunately not be adjusted. It’s black by default, but comes with a separate white version for dark backgrounds.
What you can adjust though are the colors of the glitches. The typeface comes with two predefined palettes, CMYK and RGB. You can pick whatever you like best using with the @font-palette-values rule in CSS or even change the colors to match your own style, using override-colors. Watch this video tutorial by Zoran Jambor to learn how.
Besides all the fascinating technical possibilities and features, Shader itself is very stylish, reminding you of early video games, with a retro futuristic aesthetic. The wide proportions, the strong serifs, the squarish construction, and the gorgeous numerals highlight this impression.
This color font made for the future of web or app design. In the beginning of 2023, browser support for COLRv1 is not quite there yet, which means in Safari or on iOS you will only see the black-and-white fallback version without the glitches. The same goes for Adobe and Office applications. But as browsers will adopt, this typeface brings new possibilities to pour in more live and excitement to special titles or headings. And all that native to the web!
Update: When it comes to performance, WOFF2 it the way to go. It has only 200 KB with all the weights and all the color font options included. This is only 10% of the TrueType format 🤯. Also, see my presentation of Shader Glitch on the YouTube live stream.
Font Pairings for Hanae
For body text, I recommend pairing Shader with the quite similar free font Saira, that also has a technical vibe, or one of the other options below.
Learn more about pairing typefaces using the Font Matrix.
Thanks for your loyalty throughout the past 100 Font Fridays! If you want more insights, you can support Pimp my Type on Patreon. As always, let me know your thoughts in the comments below!