{"id":1683,"date":"2017-02-21T15:21:49","date_gmt":"2017-02-21T22:21:49","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/02\/tips-for-using-contrast-to-enhance-readability\/"},"modified":"2017-02-21T15:21:49","modified_gmt":"2017-02-21T22:21:49","slug":"tips-for-using-contrast-to-enhance-readability","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/02\/tips-for-using-contrast-to-enhance-readability\/","title":{"rendered":"Tips for Using Contrast to Enhance Readability"},"content":{"rendered":"

Good design is readable design. Without a clear message, healing<\/a> displayed in an easy-to-digest way, it\u2019s easy to lose the meaning of any piece of design work. That\u2019s why it\u2019s so crucial that any design must be easy to read.<\/p>\n

Designing for readability is a lesson in typography, but also in contrast. Contrast is the key to enhancing readability, and helping create a flow through the text in a logical manner so that users understand exactly what you want to say. <\/p>\n

<\/span><\/p>\n

Color Contrast<\/h2>\n

<\/a><\/p>\n

\"design<\/div>\n<\/p>\n

Lettering must stand out from the canvas. It needs to have a presence that draws the eye.<\/p>\n

There are plenty of ways to create color contrast, but the most popular is black text on a white or light canvas. And it\u2019s popular because it works. (The opposite combination works equally well.)<\/p>\n

When placing text, it is vital to think about how letters will appear over the background. Are they easy to see? This consideration is of particular importance when working with letters on top of images or video, where colors in the background might be positioned differently based on screen size or motion in the content. <\/p>\n

One way designers overcome this issue is with a color overlay on images or video that create a bit of readability insurance. Whether it is a dark transparency or bright hue, an overlay can ensure that text appears as intended regardless of what is happening in the background. <\/p>\n

The other option \u2013 and one that\u2019s gaining traction \u2013 is to remove text from images or videos and pair them side by side. This provides room for both elements without sacrificing the content of either. <\/p>\n

Contrasting Typeface Styles<\/h2>\n

<\/a><\/p>\n

\"design<\/div>\n<\/p>\n

Variances in typefaces or styles can draw the eye to lettering immediately. Visual interest increases with typefaces that are quite different, such as the script and serif paired in the main logo treatment for Le Farfalle. <\/p>\n

Each typeface is interesting on its own, but the difference between the two creates quite the composition. <\/p>\n

Pairing typefaces in this way can be a bit tricky because some pairs of distinctly different styles can leave users feeling jarred. Opt for typefaces with some similarities that aren\u2019t as obvious to the common user, such as common x-heights, letter shapes (check the lowercase \u201co\u201d to see if styles are rounded or more oval) or slants. By keeping a similar feel in these areas, styles can be mixed and matched in a way that creates plenty of contrast without interrupting the flow of the design. <\/p>\n

Size Variability<\/h2>\n

<\/a><\/p>\n

\"design<\/div>\n<\/p>\n

One way to wow users with contrast is with oversized or undersized lettering. <\/p>\n

Oversized typography can be a lot of fun to design and it is a striking way to entice users to keep moving through a website. While undersized lettering can be equally effective, it is a lot more difficult to use.<\/p>\n

Pair oversized options with text blocks in a more traditional size to highlight the variance between text sizes. It will help provide a focal point in the design and make the large words impossible to avoid. Continue the theme beyond display lettering and consider subheaders that are slightly bigger than normal as well so that the same oversized, in-your-face concept follows users throughout the design. <\/p>\n

Consider Alignments<\/h2>\n

<\/a><\/p>\n

\"design<\/div>\n<\/p>\n

Many people forget about alignment when it comes readability. <\/p>\n

There are two schools of thought:<\/p>\n