Chromatic typefaces and flat design

Ben Moss.
June 10, 2013
Chromatic typefaces and flat design.

thumbnailThe web's increasing infatuation with flat design has lead to a rapid rejection of artifice like drop shadows, in favor of a cleaner more shape-based look. But this leaves the designer with a problem: how do you style type to be vibrant whilst adhering to the tenets of flat design?

One solution is the renewed interest in chromatic typefaces. In widespread use in 19th century wood-block printing, chromatic type faces use multiple colors to define different areas. This is the polar opposite approach to modern logo design, in which we're taught that shapes must work in a single tone.

The benefit of chromatic designs is that they add depth, emphasis and character; without the need for more intrusive text decoration such as shadows.

One of the best examples of this is Sodachrome. Designed by Dan Rhatigan and Ian Moore, Sodachrome consists of two separate fonts; one in which the serifs point to the left, and one in which they point to the right. Set individually the two fonts look distinctly unbalanced, however laid over each other in different colors, they produce an attractive slab-serif. The additional benefit of Sodachrome is that the overlap between the two colors creates a third face, a modern sans-serif, at the heart of the design. The visual interest in Sodachrome is created by the interplay between these three different designs.

sodachrome1

sodachrome2

Sodachrome by Dan Rhatigan and Ian Moore.

Developing chromatic fonts for use on the web is somewhat of a challenge. Whereas designs such as Lisa Lonergan's Knoxville follow very traditional roman outlines, designs such as Mark Frömberg's Pigment — which features 600 characters — don't readily fit into vector outline formats.

knoxville

Knoxville by Lisa Lonergan.

pigment1 pigment2

Pigment by Mark Frömberg.

Typefaces, even grunge-style faces, are designed as an outline. The outlines can be scaled, colored and spaced however the designer chooses. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) and almost every other available format works in this way. This means that a chromatic design cannot be specified in a single file. However, provided the chromatic typeface is delivered as two separate font files, we can lay one over the other quite easily.

CSS will even allow us to duplicate the title in the styles using the content property, avoiding doubling the content in the markup which would have a negative impact on SEO and accessibility.

The basic format is:

<h1>Any old title</h1>

And in the CSS:

h1
{
font-family:"Some Chromatic Font A";
color: rgba(50, 0, 0, 0.5);
position:relative;
}
h1:after
{
font-family:"Some Chromatic Font B";
color: rgba(0, 50, 50, 0.5);
position:absolute;
left:0;
content:"Any old title";
}

For now, the lack of chromatic fonts being produced for web use is likely to mean that their use is a step too far for sites like blogs that require numerous headers. But for logos, or headers that rarely change, where using an image is acceptable, chromatic typefaces are a vibrant and engaging way of setting type that retains a flat aesthetic.

Have you worked with chromatic typefaces? What technical difficulties did you encounter? Let us know in the comments.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…