Gilbert Color: A Font with Pride π³οΈβπ
The rainbow flag is the renowned symbol of LGBTQ+ pride and activism. Created by Gilbert Baker in 1978, the simple flag has been adapted into many forms and artifacts to represent LGBTQ+ culture.
As it happens, one of those artifacts is a font that captures the joy and vibrance the flag emanates.
It’s called Gilbert Color, named after the flags creator. It’s also unlike any other font you’ve seen before.
Usually with a font, glyphs (as in, characters) are monochrome. You color it either in the design app you use (Sketch, Figma, Photoshop, etc.) or with CSS styles on the web.
The new OpenType-SVG font format allows a glyph to retain color data, so each glyph can have multiple colors defined within it. These new fonts are simply called Color Fonts, and they are delightfully easy to use too.
On a PC or a Mac, you can just download the font from TypeWithPride.com and install as any other font. It will work as intended in some apps, such as Photoshop or Sketch, but will use the monochrome fallback version in others such as Figma.
In software and operating systems that allow selecting individual glyphs, you can even select other color combinations for each character.
In web pages, you can either use Adobe Fonts, or the web font provided by FontSelf on the TypeWithPride webpage download the font and create your own webfont version.1
Note that while Safari (iOS/macOS), Firefox, and older versions of Edge display color fonts, Chrome and new Edge again use the monochrome fallback2.
You can learn more about OpenType-SVG compatibility on ColorFonts.wtf. To just jump in and start using this fabulous font, visit TypeWithPride.com.
Happy pride!
-
April 2021 Edit: I recently realized that the FontSelf-served version stopped working, so I started self-hosting the font for this post. ↩︎
-
In fact, I used the CSS
@supports
feature to target a Safari-only (hanging-punctuation
) and a Firefox-only (-moz-orient
) feature, so that the title shows up in Gilbert Color in them, but in the regular font in other browsers. Magic. ↩︎