{"id":43048,"date":"2017-02-08T07:55:58","date_gmt":"2017-02-08T15:55:58","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=43048"},"modified":"2024-04-15T04:05:04","modified_gmt":"2024-04-15T11:05:04","slug":"color-fonts","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/color-fonts","title":{"rendered":"Why Color Fonts Are The Next Big Thing in Typography"},"content":{"rendered":"

In 2017, the graphic design community was shaken by a new technological and visual revolution. It turned many creatives’ dreams into realities, perhaps hurt some feelings, and even caused outrage. But there was no turning back. Guys, get ready for <\/span>color fonts!<\/strong><\/p>

\"\"<\/figure>

<\/p>

<\/span>Wait, I can already change a font’s color. What’s the big deal about color fonts?<\/span><\/h3>

Well, digital <\/span>typography<\/span> is currently based on vector <\/span>font technologies<\/span> that are color agnostic, meaning that a <\/span>font<\/span> contains vector shapes that have no color information, and by default, most <\/span>apps<\/span> will apply a black fill to the characters. So whenever you want to add more personalization to your texts, you have to enter a manual and tedious process of setting colors, effects, or textures, or even drawing your own creative lettering and composing your words letter by letter. This can be pretty lengthy, so when you need to replicate this process on large amounts of text or need last-minute edits, well, you might just give up and skip creative colorful type.<\/span><\/p>

Pretty sad, isn’t it? Now, look at some colorful lettering, like the Latinidad alphabet by Lucaz Matthias<\/a> below, wouldn’t it be great if you could simply type text with it?
<\/p>

<\/span>Now, some great news!<\/span><\/h2>

Over the past few years, clever people have been hacking around <\/span>font technologies<\/span> to bring <\/span>color fonts<\/span> to virtually every modern computer device on planet earth. Actually, billions of people are already <\/span>using color fonts<\/span> on a daily basis.<\/span><\/p>

<\/span>Wait, what? You just said that color fonts were a brand-new thing!<\/span><\/h3>

Okay, so the short story is that all the emojis we are enjoying on our smartphones already ship as color fonts 💥. We just didn’t notice because these fonts were embedded by default on our phones and computers. But as most of the big software and hardware players crafted their own set of emojis and color font technologies, it is currently mission impossible to use these color font formats across all devices and apps.<\/span><\/p>

But in early 2016, most of the industry agreed on a single color font format: OpenType-SVG<\/a>, which is simply adding SVG capabilities into the standard OpenType font format. So while SVG stands for Scalable Vector Graphics (thus cool things like vector letters that have any color, gradient, or transparency), OpenType-SVG also supports bitmap images, allowing any pixel-based lettering to be included in a proper font.<\/span><\/p>


Yes, you read that right. Any. Image. Can. Now. Become. A. Letter.<\/strong>
<\/p>

WOOT! ???? ????

Like Vasty<\/a>‘s Colorful Paper Craft Alphabet, many other 36 Days Of Type<\/a> alphabets or creative lettering graphics can now be turned into usable font files.<\/p>

<\/span>So I can now make a font out of my vacation photos and use it everywhere?<\/span><\/h3>

On the creative side, yes, you can now go as wild as you want. Any vector or <\/span>bitmap<\/span> image can now be crammed into a <\/span>color font<\/span>.<\/span><\/p>

On the technological side, nope, you can’t use color fonts everywhere… yet. But creatives can rejoice: in late 2016, Adobe added color font support in Photoshop CC 2017. Now, what about other apps? Firefox and Microsoft’s Edge browser are the first ones to support OpenType-SVG and other formats. It will take a while until every operating system, software manufacturer, and browser maker starts supporting OpenType-SVG<\/span>.<\/p>

<\/span>But you said there were great news?<\/span><\/h3>

Yes, we can actually leverage the previously existing <\/span>color font formats<\/span> and use them in many <\/span>apps<\/span>, especially on MacOS, where Apple’s own color <\/span>bitmap<\/span> font format<\/span> (SBIX) is natively supported. So you can already install & use color <\/span>bitmap<\/span> fonts<\/span> on MacOS and they will show up in any <\/span>app<\/span> that relies on Apple’s text rendering technologies, including <\/span>Font<\/span> Book, Pages, Keynote, Pixelmator, Sketch, and more.<\/span><\/p>

You can even embed such <\/span>fonts<\/span> in PDF files and print them from any Apple device (Windows supports its own color vector <\/span>font format<\/span>, <\/span>COLR<\/span>).<\/span><\/p>

However, as of January 2017, <\/span>Photoshop<\/span> CC 2017 is the only <\/span>app<\/span> from <\/span>Adobe<\/span> that can display <\/span>color fonts<\/span>, along with <\/span>emojis<\/span>. This works on both Mac and PC.<\/span><\/p>

Want more geeky stuff? 😎 Note that we can combine several <\/span>color fonts<\/span> formats into a single OpenType <\/span>font file<\/span> to ship <\/span>fonts<\/span> that are supported across many <\/span>apps<\/span> and systems (<\/span>color fonts<\/span> may also include standard vector <\/span>glyphs<\/span> to ensure retro-compatibility with incompatible <\/span>apps<\/span>). Sure, this all feels like some hacks, tricks that will not fit in every case, but they will help us start enjoying <\/span>color fonts<\/span> in many places until the technological transition has occurred.<\/span><\/p>

For those of you who know about the web <\/span>fonts<\/span> history, just as it took several years to migrate from a myriad of web <\/span>font formats<\/span> toward a single WOFF file (ok, plus another WOFF2 file 😉), it will probably take a few years before we can count on a single OpenType-<\/span>SVG<\/span> file…<\/span><\/p>


\"Color
<\/p>

If you want to learn more about color fonts <\/strong>and their specificities, head to www.colorfonts.wt<\/a> – a great resource for everything related to this exciting new technology.<\/p>

<\/span>Say hello to the world’s first color fonts collection<\/span><\/h2>
\"\"<\/a><\/figure><\/div>

In late 2016, our team at Fontself<\/a> launched a Kickstarter-funded Photoshop add-on<\/strong> that brings font creation features to Adobe’s app, so any creative can start enjoying making their own fonts. We contacted a handful of creatives and started collaborating with them to kickstart the world’s first collection of color fonts<\/strong> – right here, on Creative Market<\/a>.<\/p>

<\/figure>\n

These fonts have all been generated with Fontself Maker for Photoshop<\/a> (they are actually color bitmap fonts<\/a>) and include both OpenType-SVG and Apple’s SBIX color font formats, ensuring they will show up on many MacOS apps and Photoshop CC 2017.0.1 (on both Mac & PC).<\/p>

<\/span>Popsky<\/a> by Igor Petrovic<\/span><\/h3>
\"\"<\/a><\/figure>

<\/span>Sundaze<\/a> by James Daly<\/span><\/h3>
\"\"<\/a><\/figure>

<\/span>OneLine Bold<\/a> by Roman Kaer<\/span><\/h3>
\"\"<\/a><\/figure>

<\/span>Golden<\/a> by Alexei Popov<\/span><\/h3>
\"\"<\/a><\/figure>

<\/span>Watercolor<\/a> by Anna Kozlenko<\/span><\/h3>
\"\"<\/a><\/figure>

<\/span>OldSchool Beveled<\/a> by Alexei Popov<\/span><\/h3>
\"\"<\/a><\/figure>

<\/span>Watercolor<\/a> by Andrei Zaripov<\/span><\/h3>
\"\"<\/a><\/figure>

<\/span>Latinidad<\/a> by Lucaz Matthias<\/span><\/h3>

<\/a>
Want more color fonts? Check this Creative Market collection<\/a> as more will follow!
And special thanks to all these creatives who accepted to embark on this journey - Lukas, Igor, James, Roman, Alexei, Anna & Andrei, you guys rock!<\/p>

Do you (yes, YOU, the reader) have awesome color lettering<\/strong> or wanna join that color fonts collection?<\/strong> Then read on…<\/p>

<\/span>The Vibrant World of Color Fonts: Examples and Applications<\/span><\/h2>

As we delve deeper into the realm of color fonts, it’s essential to explore various examples and applications of this fantastic technology. From utilizing a color palette to crafting chromatic fonts, let’s take a closer look at how color fonts are revolutionizing the graphic design industry.<\/p>

<\/span>The Magic of a Color Palette<\/span><\/h2>

A well-thought-out color palette can be a game-changer when it comes to designing with color fonts. The right color combinations can evoke emotions and help you communicate your message effectively. For instance, a vibrant color palette can make your social media posts and banners stand out, while a more subdued palette can lend a sense of sophistication to your designs. Type designers now have the power to create fonts that come with a pre-built color palette, simplifying the design process and saving time.<\/p>

<\/figure>\n

<\/span>Fallback and Compatibility<\/span><\/h2>

Although color fonts are making significant strides, not all devices and software support color fonts yet. To ensure that your typography remains legible even when color fonts aren’t supported, it’s essential to have a fallback option. Fallback fonts are standard vector glyphs displayed in place of the color font, ensuring that your text remains readable and functional.<\/p>

<\/span>Support for Color Fonts Across Platforms<\/span><\/h2>

Different operating systems and software have varying levels of support for color fonts. For instance, CSS now supports color fonts, enabling web designers to incorporate them into their website designs. Similarly, sans serif fonts with color variations can make your text more engaging and visually appealing. As more platforms embrace color fonts, we can expect to see a surge in their usage and popularity.<\/p>

<\/figure>\n

<\/span>APIs and OpenType-SVG Fonts<\/span><\/h2>

APIs (Application Programming Interfaces) can be used to integrate color fonts into various apps and platforms, allowing designers to access and use color fonts across different software. OpenType-SVG fonts, which combine the capabilities of OpenType and SVG, have played a significant role in making color fonts more accessible and easy to work with.<\/p>

<\/span>Creating Chromatic Fonts<\/span><\/h2>

Chromatic fonts, which are essentially color fonts with multiple colors in a single glyph, open up a world of creative possibilities. With chromatic fonts, type designers can experiment with gradients, shadows, and textures, producing visually stunning and highly expressive typography. These fonts can be used across various applications such as posters, packaging, and website designs.<\/p>

<\/span>Templates and Integration<\/span><\/h2>

Color fonts can also be integrated into various templates, such as InDesign layouts. These templates can then be used to create stunning visuals for print and digital media. InDesign now supports OpenType-SVG fonts, allowing designers to work seamlessly with color fonts within their projects. Additionally, Android devices have also started supporting color fonts, making them accessible to a wider audience.<\/p>

<\/span>Expanding Your Social Media Presence with Color Fonts<\/span><\/h2>

Color fonts can play a pivotal role in enhancing your social media presence. By using eye-catching fonts that align with your brand’s color palette, you can create engaging content that stands out in the crowded social media landscape. Alternates, which are different versions of the same glyph, can help you customize your typography and add a personal touch to your designs.<\/p>

<\/span>Free Fonts<\/span><\/h2>

As the popularity of color font design continues to grow, several type designers have started offering free fonts for personal and commercial use. These free fonts serve as a great starting point for designers looking to experiment with color fonts in their projects. It also allows budding font designers to showcase their skills and contribute to the ever-growing world of font design.<\/p>

<\/span>Ok, I’m sold. Now how can I<\/em> get started with color fonts?<\/span><\/h2>

Color fonts have opened up a world of creative possibilities for designers and typographers alike. With the growing support for color fonts across various platforms and operating systems, we can expect to see them become an integral part of the graphic design landscape. As more designers embrace the potential of color fonts, we will undoubtedly witness a surge in innovative and expressive typography that will captivate audiences and elevate the design world. So, get ready to jump on the color font bandwagon and explore the boundless opportunities it offers to enhance your creative projects and leave a lasting impression.<\/p>

Are you psyched about color fonts? Do you believe they are the next big thing in graphic design or just a fad? Please leave a comment below.<\/p>

<\/span>Pin this for later!<\/span><\/h2>
\"\"<\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"

In 2017, the graphic design community was shaken by a new technological and visual revolution. It turned many creatives’ dreams into realities, perhaps hurt some feelings, and even caused outrage. But there was no turning back. Guys, get ready for color fonts! Wait, I can already change a font’s color. What’s the big deal about […]<\/p>\n","protected":false},"author":148,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[32,1405,1406,37,1407,61,1408,97,110,133,166,1069,1403,1404],"topics":[1738],"class_list":["post-43048","post","type-post","status-publish","format-standard","hentry","category-creative-inspiration","tag-creativity","tag-collection","tag-opentype","tag-typography","tag-opentype-svg","tag-design","tag-opentypesvg","tag-photoshop","tag-graphic-design","tag-color","tag-fonts","tag-fresh-design-products","tag-chromatic","tag-chromatic-fonts","topics-learn-typography"],"acf":[],"yoast_head":"\nWhy Color Fonts Are The Next Big Thing in Typography - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/color-fonts\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Color Fonts Are The Next Big Thing in Typography\" \/>\n<meta property=\"og:description\" content=\"In 2017, the graphic design community was shaken by a new technological and visual revolution. It turned many creatives’ dreams into\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/color-fonts\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-08T15:55:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T11:05:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15040018\/I-can-haz-color-fonts-280x259-1.jpg.webp\" \/>\n<meta name=\"author\" content=\"Franz Hoffman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Franz Hoffman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts\",\"name\":\"Why Color Fonts Are The Next Big Thing in Typography - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2017\\\/02\\\/15040018\\\/I-can-haz-color-fonts-280x259-1.jpg.webp\",\"datePublished\":\"2017-02-08T15:55:58+00:00\",\"dateModified\":\"2024-04-15T11:05:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/61776df260c134f7e6207bcf7dd1fe7b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2017\\\/02\\\/15040018\\\/I-can-haz-color-fonts-280x259-1.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2017\\\/02\\\/15040018\\\/I-can-haz-color-fonts-280x259-1.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/color-fonts#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Color Fonts Are The Next Big Thing in Typography\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Why Color Fonts Are The Next Big Thing in Typography - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/color-fonts","og_locale":"en_US","og_type":"article","og_title":"Why Color Fonts Are The Next Big Thing in Typography","og_description":"In 2017, the graphic design community was shaken by a new technological and visual revolution. It turned many creatives’ dreams into","og_url":"https:\/\/creativemarket.com\/blog\/color-fonts","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2017-02-08T15:55:58+00:00","article_modified_time":"2024-04-15T11:05:04+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15040018\/I-can-haz-color-fonts-280x259-1.jpg.webp","type":"","width":"","height":""}],"author":"Franz Hoffman","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Franz Hoffman","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/color-fonts","url":"https:\/\/creativemarket.com\/blog\/color-fonts","name":"Why Color Fonts Are The Next Big Thing in Typography - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/color-fonts#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/color-fonts#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15040018\/I-can-haz-color-fonts-280x259-1.jpg.webp","datePublished":"2017-02-08T15:55:58+00:00","dateModified":"2024-04-15T11:05:04+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/61776df260c134f7e6207bcf7dd1fe7b"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/color-fonts#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/color-fonts"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/color-fonts#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15040018\/I-can-haz-color-fonts-280x259-1.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15040018\/I-can-haz-color-fonts-280x259-1.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/color-fonts#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Why Color Fonts Are The Next Big Thing in Typography"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/43048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/148"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=43048"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/43048\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=43048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=43048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=43048"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=43048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}