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.
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.
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).
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.
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:
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
