Background Color for Your Typography
By Shelly Wilson on Wednesday 29th of August 2012
Now you can drape your type with background color and test your decisions in situ. No more workarounds!
Now you can saturate your canvas with hues-a-plenty and test your typefaces and text colors right on top. No more workarounds! No more compositing. All in the browser.
To apply a background color to your canvas, first select ‘body’ in your elements breadcrumb.
This will unlock the background colour picker in your design panel.
Or use the shortcut in your main toolbar, which will automatically apply background to the body for you.
Note that your background color will be applied to your entire canvas. You can’t yet apply this to a single container.
To get your creative juices flowing, here are a few sites that we think are making great use of background color.
Remember legibility and readability
Background color can create mood, add emphasis and immediately indicate a brand, but it can also impact the legibility and readability of your type. So here are just a few tips as you try out our new feature.
1. Keep characters clear
Legibility refers to how clear the individual characters of a typeface are. The clearer they are, the easier it is for us to decode words and, hence, read. For example, at a small size, does an ‘h’ still look like an ‘h’, or does its serif make it look like a ‘b’ instead? Background color can affect legibility by ‘bleeding’ into your text and overwhelming the finer typographic details that help define a character’s shape, like serifs, stems, strokes, and cross bars. To avoid legibility issues:
- inspect the clarity of these features on your chosen typeface;
- try bumping up your text size; and
- experiment with the other weights available in your typeface’s family. Typographers create these to give you suitable options for various text sizes.
2. Watch your contrast
Readability refers to how easy it is to read text as a whole – as phrases, sentences, or blocks of text. Lots of things can affect readability, including line measure, tracking, size, etc. But when it comes to color, it’s the contrast you want to watch. Too little contrast between your background and type colors and readers will have to squint to make out the words. Too much contrast and it can be hard on the eyes and cause fatigue (plus just be plain ugly).
To check the contrast of your background and text colors, try one of these sites. They’ll apply a grayscale filter to your design so you can make sure your text isn’t fading into the background:
- Colorfilter (choose the grayscale option from the drop menu)
- Graybit You’ll need to enter a URL, but you can get this quickly by publishing your design to a public URL. Typecast lets you do this with just one click. Here’s how.
3. Beware color rendering
Macs and PCs display color differently, so you’ll want to test your design on both platforms. Do this by either signing into Typecast on a different machine or by sending a teammate your design’s temporary URL. Easy peasy.
Sign in now to start creating dynamic backdrops for your web type.