Before and After - Fixing Bad Blog Covers

Most bad blog covers fail the same five ways, and each one has a single fix. Thin type, raw text on a busy photo, a title sized for your monitor, too many competing elements, and a subject parked where the crop eats it - those five account for almost every cover that lands as a gray smudge in the feed. That is the whole answer. The rest is the before and after on each, and the one move that turns it around.

I have rebuilt enough covers to notice that the fixes are boring on purpose. None of them is a redesign. Each is one decision reversed: a heavier weight, a layer added, a number doubled, an element cut, a subject nudged to center. You do not need taste to apply them. You need to know which of the five you are looking at.

Mistake 1: thin, elegant type that vanishes small

Before: a slim Didot or a hairline Helvetica Light title that looks expensive on your 27-inch screen.

After: the same words in a heavy sans - Bold or Black - and suddenly they survive the trip to a feed tile.

Thin strokes are the first casualty on the way down. A cover gets exported, downscaled, and recompressed to WebP or JPEG, and that recompression chews up fine detail to save bytes. A hairline is exactly that kind of fine detail, so it smears into the background while a heavy stroke keeps its shape. The elegance you liked at full size is the precise thing that disappears at 180px.

The one move: set the title in a heavy weight. That single swap rescues more cover text than any change of typeface. If you want to go past the safe default, choosing fonts for blog covers covers which faces hold up and which ones break.

Mistake 2: text dropped raw over a busy photo

Before: white words sitting straight on a photo, crisp over the shadows, gone the second they cross a bright cloud.

After: a gradient scrim under the text, and the title holds across the whole width.

A photo is hundreds of colors, so a title that reads over the dark part of an image vanishes the moment it travels onto a light part. The reflex fix is a flat dark wash over the whole thing, which works and flattens your photo into gray mud in the process. The better move is a gradient scrim: black at around 40 percent fading to transparent, sitting only under the text. It buys back contrast where the words live and leaves the rest of the image bright.

The one move: add a scrim and tune it to the worst pixel - the lightest patch under your darkest letter, the spot an average reading would miss. Then check the comp in grayscale; if the title still stands out with color stripped, the contrast is real. The full method lives in keeping text readable over a photo, and the bar to clear is WCAG AA, 3:1 for large text like a headline (the spec).

Mistake 3: a title sized for the monitor, tiny in the feed

Before: a title that fills the canvas nicely at 1200 pixels wide and turns to a thread of fuzz on a phone.

After: type sized for the small render, big and blunt, readable at arm’s length.

Before

After

This is the one that fools careful people. You size the title to look balanced on the design you are staring at, which is full width. Then the cover is met at feed scale, around 180px, where that balanced title is suddenly minuscule. The design was never wrong on your screen. It was wrong everywhere your screen is not.

The one move: size for the feed, not the monitor. In a roughly 1200×630 cover that means a title in the 60-90px range, large enough that it still reads when a phone shows the cover at roughly 180px. If the word count is forcing you smaller, cut words instead of shrinking the type. A cover holds the hook and lets the full headline live in the post.

Mistake 4: too many elements fighting for the eye

Before: a logo, a headshot, an icon, a subtitle, a badge, and a title, all shouting at once.

After: one subject, one title, and room to breathe.

A cover carries one idea. At feed scale a reader can hold one strong subject and one supporting element; add a third and the image reads as cluttered, and a fourth makes it read as nothing. Every element you add to compete for attention subtracts from the one thing you actually wanted noticed. Two focal points is the same as zero, because the eye does not know where to land.

The one move: pick the single thing a reader should register - a face, a product shot, the headline itself - and cut everything fighting it. Faces pull focus harder than any graphic, so if a person belongs on the cover, let them anchor it and clear the rest. That leftover empty space is the quiet patch you are holding for the title. If you are unsure which element should anchor a given post, featured image layouts by post type sorts out what to lead with.

Mistake 5: the subject parked where the crop eats it

Before: the title tucked into a corner and the subject hugging the left edge, both clipped the instant the cover is shared.

After: subject and title pulled to the center, intact in every render.

Before

After

When your post gets shared, the platform does not show your full design. It renders your share image at 1200×630, a 1.91:1 ratio, and center-crops anything that does not fit. X reads your og:image and center-crops it to its own large card too, so a centered composition is safe and an edge-loaded one is not. A title in the bottom corner or a face against the left margin is exactly what gets shaved off.

The one move: center the subject and the title. Keep both inside the middle of the frame, away from the edges that mobile clients trim. If you want the mechanics, how each platform crops your og:image walks through where the cuts land, and what size a blog cover image should be gives you the dimensions.

The five, side by side

Here is the whole diagnosis in one place. Find the symptom, apply the move.

The mistake	What you see	The one move
Thin, elegant type	title smears small	a heavy sans, Bold or Black
Raw text on a busy photo	title drops out over bright patches	a gradient scrim tuned to the worst pixel
Title sized for the monitor	tiny, unreadable in the feed	size for the feed, ~60-90px
Too many elements	nowhere for the eye to land	one subject, cut the rest
Subject parked at the edge	clipped by the share crop	center the subject and the title

A bad cover is rarely a design problem. It is one of five fixable mistakes wearing a costume.

The test that catches all five

There is one check that surfaces every mistake on this list before you publish: shrink the design to about 10 percent, or squint at it from across the room. Thin type blurs. A title with no scrim drops into the background. A monitor-sized title becomes a thread. A cluttered cover turns to noise. An edge-parked subject reveals how much air is wasted in the middle. The squint test is harsh on purpose, because it is showing you how most people will actually meet the image.

Run it, name which of the five you are looking at, and make the one move. The deeper reasoning behind all five - one subject, real contrast, type that survives the shrink - lives in what makes a good blog featured image, which is the long version of this short list. If you would rather work backward from covers that already clear the squint test, blog cover examples worth stealing shows the moves in finished form.

I rebuilt the cover for this post in Lede by running the same five checks on it. When you want to fix one of yours, open the editor and start from a gallery template that already gets the type, the scrim, and the safe zone right - then it is one move to make it yours.