[Mistakes #9] Five Common Header Mistakes – and How to Fix Them

Ali Luke

background image

This is the ninth post in our “mistakes” series.

Your header runs along the top of your blog. It may be simply text showing your site’s title and tagline, but some themes (including the default WordPress ones) allow you to upload a customised header image.

Since your header appears right at the top of every page of your site, it needs to make a great impression. Unfortunately, there are some easy (and pretty common) mistakes that bloggers make when it comes to headers.

Are you getting any of these wrong too?

Mistake #1: Not Changing the Default Site Title and Tagline Text

This is a really basic mistake – but an easy one to make when your blog is brand new. (And if you’ve got past this one successfully, well done!)

When you create a WordPress blog, you’re prompted to enter the title as part of the setup process. Generally, bloggers get this one right – they use the title they want to appear on their blog. But your site’s tagline defaults to “Just another WordPress blog.” If readers see this tagline on your blog, it tells them you’re a newbie.

Fix it: Go to Settings -> General, where you can edit your Site Title and Tagline. Set them to whatever you want to appear in your header.

Mistake #2: Having a Small or Stretched Header Image

Some bloggers have a scrunched up header – either because the design itself was too small, or because it’s been weirdly stretched by their blog theme.

As well as looking amateur, this can be frustrating for readers who aren’t able to easily read your tagline or even your title.

Fix it: Make sure you design your header to fit the correct dimensions on your blog. If you’re using WordPress’s Twenty Twelve or Twenty Thirteen themes, for instance, you can find these dimensions under Appearance –> Header.

Mistake #3: Using Times New Roman or Another “Default” Looking Font

If you design your header yourself – and most bloggers do, at least initially – then it’s easy to type your title and/or tagline in a “default” font, perhaps Times New Roman or Arial.

While there’s nothing terribly wrong with these fonts, they’re so common that it’s often obvious to readers that you’ve simply gone with a default – rather than choosing a typeface that complements your brand.

Fix it: Try out half-a-dozen or so different fonts and see what works best with your header. Choose one that’s clear and easy to read, as well as attractive-looking.

Mistake #4: Having a Hard-to-Read Colour Combination

This is a subtler mistake than some of the others – but it’s still off-putting to readers. If your header has yellow text on a white background, red text on a brown background, green text on a blue background or similar, it could be tough to read at a glance. (Some colour combinations look a bit ugly, too.)

Be especially wary if your text goes across a colourful image – you may find that while some letters show up fine (black on light grey), others don’t (black on dark blue).

Fix it: Pull up your blog and take a big step back from your screen. Can you easily read your title and tagline? If the colours make it tough, try recreating your header with a variety of different text colours.

Mistake #5: Cluttering the Header with Multiple Images

Some bloggers have a tendency to cram a lot into their header, perhaps with photos of themselves, their dog, their kids…

A cluttered header sends a bad first impression, just like a cluttered front cover on a self-published ebook. It makes your blog look a bit amateur, even if the images you choose would work well on their own. One image in your header is usually plenty.

Fix it: Like sidebars, headers are best left uncluttered – I really like the Goins, Writer header, for instance. If you’re not that confident about your design abilities, keeping things minimalist often means you can produce something that looks professional.


Does your blog’s header need a refresh? Drop a comment below to tell us what you’re going to change.


Browse all articles on the Blog Design category

5 Responses to “[Mistakes #9] Five Common Header Mistakes – and How to Fix Them”

  • Saneesh NP

    Well said. Header is an area which is often overlooked. A good-looking header will be an eye-catcher and would bring confidence to your visitors. Thanks for the awesome post. 🙂

  • Ino Adeline

    Yes, it needs to properly make a header because it often attract more visitors to one,s blog post. After reading this, I think I will be able to ignore this kind of mistakes….. 🙂

  • Courtney

    I disagree with your idea that you shouldn’t exceed one header image. I think multiple images can be tasteful and well done, as long as they’re streamlined and not crammed. Images are powerful in telling what your site is about.

    I do agree that there’s a fine line here. Sites look sloppy when that line is crossed.

  • Karleen

    Well, after reading this, I will definitely take another look at my header. I’ve been thinking I want to simplify it a little more – make it look more professional and clean, so I’ll work on that.

    Not only is it difficult to read a header with a bad color scheme, but I have found some blogs where the author does that in the text – maybe black text on a dark blue background or something like that that makes it very hard to read. I’ll usually give up after a few sentences because it’s such an eye strain.

    Thanks for the tips here. I also like your “mistakes” series. I know I’ve mentioned it before, but I really like the “fix it” part of each mistake. Keep ’em coming! 🙂

  • Raspal Seni

    You still have this (#1) default tagline, but have a great blog/website. Now, when a visitor reads your tagline, she feels you’re an amateur and leaves without paying much attention to your blog/site’s content. I know because I’ve done this in the past.

    I use Verdana for all of my blog content, so use this same font for title and tagline too. But, I sure have some other fonts on other blogs. I agree, you should try out many different fonts and use the one which feels fit and attractive.

    I was guilty of #4. The header had an image of an old corona – brown colored typewriter, but cream colored keys. Any colored title and tagline I tried over this image, didn’t fit and was hard to read. It would be partly readable due to twin background colors. I had it for some time. Finally, just removed that image and now, have a black background behind the title and tagline text.

    Speaking of Jeff Goin’s website, I love the professional look and use of minimal colors, seeing which I minimized colors on my site/blog too.

    I love this Mistakes series, btw, Ali. 🙂

Comments are closed.