6 Typography Secrets That Will Make Your Hero Images Explosive

By on May 2, 2016 in Tutorials
6 Typography Secrets That Will Make Your Hero Images Explosive

Hero images are still all the rage — they’re trendy and they immediately catch the users eye due to their above-the-fold, full-screen beauty. One of the main aspects of a big header, other than the hero image, is the typography, but we often fall short in this area because hero images can be very overpowering.

In actuality, typography can compliment hero images, making them better when the two are combined correctly. Lets take a look at 6 typography secrets that can make your hero images awesome.

1. Pair Fonts that Complement the Hero Image

Pairing fonts is difficult. Not only do they have to work well together, but they also have to blend in with your hero image and the visual aesthetic of your website overall. Alternating between display/serif and sans-serif fonts really sets the heading apart from the secondary text, but you should avoid making them clash.

As a rule, make sure your secondary text is modest in comparison to your main heading. People will still distinguish between the two because of the different styles of typography, but they awkwardly won’t clash with one another and the hero image.

2. Don’t Place Text Over the Busy Parts of the Image

Your hero image should always have safe “spot” for the typography to rest, which shouldn’t be on top of the busiest area of the image, otherwise you run the risk of having the typography and the central focus of the hero uncomfortably cluttered together.

You can’t hit a home run every single time, because as device screens change size or rotation, the background inevitably nudges around, which is where shadows, overlays and contrast comes in.

3. Contrast Typography with Shadows or Overlays

You can’t optimise the typography/image contrast for every desktop and device screen — sometimes the lack of contrast will cause legibility issues depending on the how the background image is aligned, but luckily there are some tips to help reduce that.

Firstly there’s the option of adding a colour overlay to the image; some designers don’t like this because it hides too much of the image, however you can apply an overlay behind the text rather than the entire hero image. Webdesigner Depot’s new blog design is a stunning example of this.

hero-image-examples-01-depotSave

And then there’s the text shadow method (which shares the same concept of having a colour backdrop), only the text shadow method is designed to be borderless and less intrusive. In some cases a text shadow can seem almost non-existent, despite the fact that it is there and adds a very subtle contrast between the typography and hero image.

Alley Kat BeerSave

4. Consider “Chromeless” Images

Chromeless images are images that (seemingly) aren’t inside a styled container — they’re not full-screen and they’re usually fixed or floated to a specific location, without borders, and without a background. Basically they simply fill the negative space, and in terms of hero images, this positions them around your typography (or your typography around the hero image).

In many ways I think this is the best way to approach hero headers, because it creates more opportunities to make braver choices such as fonts with a lightweight option, a trend usually reserved for white backgrounds and contrasted, near-black text — this has been Apple’s visual aesthetic for a long time now (and it looks amazing).

AppleSave

5. Vary Your Font Styles, Not Your Font Families

Embedded fonts are expensive for the browser to render. If you care about website loading times, I wouldn’t recommend the use of more than two fonts; instead, experiment with font styles. By that I mean underlined, bold and italic variations of the same font. Not only does this help to distinguish one text block from another, but it emphasises your words as if you were speaking them — this lets you communicate to the user more directly.

InVision App uses italics and lighter weights for the secondary text, whereas Jet Edge uses only the one font, but uses bold words to emphasise speech and even a horizontal separator.

InvisionSave

Jet EdgeSave

6. Don’t Be Afraid to Get Creative

Startup stock images, centered text, Open Sans font — it’s been done. Many times. Here’s three more hero headers with aspects of 3D, display fonts and bright colours, for your inspiration!

Conclusion

It’s no secret that hero headers can make a wonderful first impression on the user when they visit your website, but if you’re not combining your beautiful imagery with readable, well-situated typography, with complimentary fonts and font styles, you’re wasting your above-the-fold opportunity and instead creating an experience that’s confusing for the user, instead of enticing them to keep reading. Keep these 6 tips in mind, and if I’ve forgotten any, mention them in the comments below!


Products Seen In This Post:


getpaidtowrite-banner

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

8 Comments

  1. IsabellaSmith1987

    As always from Daniel - a whole bunch of helpful advice. I never actually went for family fonts. He also encouraged me to get more creative.

  2. lisa.t.awhitu

    Does anybody know what the two fonts that are used in the hero image of this post (typography secrets for explosive hero images)

  3. ericca.jo

    Embedded fonts are expensive for the browser to render? Didn't know this was a money issue!

  4. taraleighslade

    Hi @Ericca Jo It's funny to think of it that way, but it's actually true, in more ways than one - though perhaps not in the way you're thinking. Lots of embedded fonts are "spending" a lot of time - not money - to load, making them "expensive" to load (in time) ... and time is money. But on a more serious note, you could lose potential clients through a website that loads too slowly, so it can actually cost you through lost sales. A website is always a juggle between the nice-to-haves and the desire to have a lean website that loads in a flash. @Daniel's font styles tip is a good one.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →