Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

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!

Okay, so not every project calls for an Apple-esque white background. Which is why we’re so excited to finally be able to offer you a kaleidoscope of background colors.

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.
Diagram showing how to use Background Color in Typecast

Or use the shortcut in your main toolbar, which will automatically apply background to the body for you.
Background link in main toolbar

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.

  • Spelltower site

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.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Next Seminar

Featuring guest Jason Pamental

Featuring guest Jason Pamental

Designing for maximum reach

A content-centered approach to RWD

Join our online seminar where we’ll be showing you how to create beautiful, fluid experiences that readers will love.

Register your place

Comments

blog comments powered by Disqus