When your blog title is an image…
LexBlog design strives to provide leadership and guidance on best practices that ensure our products are of the highest quality. Over the years, we have been asked to use or create custom graphics as the title for a blog. While this approach was widely accepted as the norm many years ago, it no longer works with today’s mobile web. I decided to jot down a few reasons why this approach is a bad idea.
The Blind or visually impaired will be at a disadvantage. Screen readers and other assistive technologies will not read the text contained inside an image.
Your blog title could be lost to readers. A user will be at risk of missing out on relevant information when their browser does not show or download graphics due to a slow or unreliable internet connection. In this case, the blog title would be missing.
SEO can be negatively impacted. Images of text will hinder a page’s search engine optimization (SEO). Search engines (like Google) rely on actual copy to index content — they don’t read images.
Your title may scale to a size that is unreadable on mobile devices. Text can adapt to different screen sizes and orientations (think desktop vs. mobile) and tends to wrap and display correctly across them, remaining readable. Images of text are fixed in size and position, so they do not adapt as well. Images of text tend to become pixelated and lower in quality when enlarged, affecting readability.
You have more image assets to manage. With the creation of retina and high-resolution displays, you will need to create two versions of your title. A standard image for use on traditional screens and a second at 200% (or more) for all HD displays.
Our Solution
One of the brilliant tools we have available in our design arsenal is the use of text accents that allow us to apply color, weight, custom iconography, and contrasting fonts to create a unique and visually appealing title for your blog. This approach provides the blog with a strong visual brand and ensures it responds well when viewed in desktop and mobile browsers.