Text on Featured Image Design Styles

Text

How To Craft Featured Images That Engage Traffic and Boost Your Online Identity

In this lesson, you'll learn how to add branded text to either your personal or stock photos to create crisp, clear and informative featured images for your website.

Text on Featured Image Examples

By Regina

THE 6 MOST PROFITABLE BLOGGER CAREER PATHS 

A CASE STUDY ON MY FIRST $1350 ONLINE COURSE LAUNCH

Featured Image Patterns:

  • Personal photos + branded, high-contrast typography on a 50% transparent black, rectangular overlay.
  • Illustrative text makes the content obvious.
  • Image thumbnails added with the text to further illustrate content.
  • Simple logo used at the bottom of every image.
  • Quick & easy self-creation (no designer needed, but likely a good photographer).

Copyblogger

The Ultra Powerful 7th Principle of Persuasion

Build Landing Pages that Convert with These 3 Smart Steps

A More Tasteful Alternative to Self-promotion: Practice in Public

Featured Image Patterns:

  • Stock photos + branded, high-contrast typography on a 50% transparent colored overlay

    or a:

  • 50% transparent to opaque colored rectangle on the left or right-third of the stock image. This provides readability contrast for the text on image.
  • Text shows the Headline and Subhead as well as Copyblogger’s logo.
  • Quick & easy self-creation (no designer needed).

Explanation

The text on image style of featured images is another great way to quickly and effectively create a strong visual identity for your website.

You can either use personal or stock photos that help illustrate your content and then pair it with consistent headline and subhead fonts to convey your brand.

Text on featured images can be used to reiterate the article headline or even show alternative headlines, subheads, captions or descriptions of the content.

ByRegina.com goes a step further and uses thumbnail images on her super-sized featured images to help illustrate content with another level of detail.

How To Ensure Readability of Text on Images

When you use a photograph as a background image and overlay text, it can be quite tricky to make both the photograph visible and the text readable.

Here's an example and treatment for this problem:

Because parts of the image are bright and parts are dark, the text is hard to read, no matter what color you choose for it. A wide range of brightness in different areas is quite typical of photographs, so this is a common problem.

The easiest way to handle it is to add a dark overlay to the image:

You simply added a layer of black at 50% opacity. The image is still clearly visible, but now the text is crisp and easy to read.

You can create 50% opacity overlays using PicMonkey, a free online image editor. See how to do this in Hanne's PicMonkey tutorial video below:

PicMonkey tutorial video including how to create transparent overlays for text.

On To The Next Lesson

If you're looking to simplify your featured images even further by just using stand alone stock or personal photos, click the "Next Lesson" button below to learn how to implement this photo-only strategy effectively.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Pen
>