Display, Sans-serif typeface

from Dalton Maag
designed by Maria Fontenelle, Robert Pratley, Deiverson Ribeiro

Variable Font

2 axes: Glitch, Weight

54 Styles

9 Weights: Hairline to Black
6 Glitch levels: Error 0 to 5
2 Color palettes: CMYK & RGB

Best for

  • Headings (display text)
  • Long reading text (body text)
  • User Interfaces (functional text)

License starting

around $500 (bundle)

Specialty

An exciting variable color font with a retro futuristic gaming vibe, that combines the latest possibilities with font technology, CSS and browsers.

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.

Weight 200, no glitch

Weight 400, Glitch 200

Weight 600, Glitch 500

Weight 800, Glitch 700

Weight 900, Glitch 1000
Shader Glitch comes in various weights and with different glitches, see live demo.

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.

On dark Background white Text with Weight 200, no glitch

Weight 400, Glitch 200

Weight 600, Glitch 500

Weight 800, Glitch 700

Weight 900, Glitch 1000
The separate version Shader Color Inverse is intended to be used on dark backgrounds, see live demo

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.

The typeface offers two possible color palettes for the glitches, see live demo.

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.

Shader Glitch
Shader Glitch
  • Headings

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!

Typographic power to your inbox

  • Font Friday: I recommend one typeface per week, free fonts included.
  • Type Tuesdays: articles & videos that up your design game.
  • Join 2700+ typography enthusiasts, unsubscribe anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *