July 13, 2016 MC No Comments on Typography Tips on How to Make Your Hero Images Unique and Eye-Catching
Typography Tips on How to Make Your Hero Images Unique and Eye-Catching
One of the newest trends in making an effective and tasteful web design is the hero image – a large banner image that is prominently placed on a web page that is usually the first thing that a visitor sees on the site. It serves to strategically present an overview of the website’s most valuable content. A hero image is often comprised of an image or text that can either be static or dynamic.
While a stunning image is vastly important in carefully designing a hero image, typography is also equally essential. Oversight in this area is common but fixable. The key is to balance both to make these components work with each other.
Here are some tips to make your hero image work using beautiful and effective typography:
Use fonts that complement the hero image
Finding a font that matches the hero image can be tricky. But always consider the overall aesthetic effect that you want to achieve. Use contrasts – but not ultimately clashing – that set the font/s distinctly, like alternating between display/serif and sans serif to set the header text apart from the secondary text but avoid making them look awkward together and overall.
Avoid placing text over the busy areas of the image
Consider which parts of the image are “busy” to prevent a cluttered look and avoid shifting the focus of the hero image. There should be an even space for all the elements of the banner – both for text and image. Also do not forget to tune the details, including screen changes and rotations that might affect the display of text.
Contrast typography with shadows or overlays
Since it’s impossible to optimize the contrast for every desktop and device screen, there is a risk of having some design elements lose its detail, or with text, seem illegible. Fortunately, there are options to help reduce it, including adding a color overlay to the image. It could only be behind the text, or as huge as necessary. Text shadow method can also be helpful – and subtle. It provides extra distinction without affecting the entire visual effect.
Use “chromeless” images
Great for minimalist approach, chromeless images make a clever use of whitespace, delivering a classy, clean, and sharp look without looking too plain or too dull. This also provides a great opportunity to maximize typography use, making the text not only an instructive/informative detail for the banner, but also as a design element itself.
Choose from different font styles, not entirely different font families
Using a variation of font styles, not font families – like using underlines, italics, and bold effects provide emphasize and distinction without making the text look too hectic. It is also not just purely an aesthetic issue, but also help reduce website loading times, as embedded fonts are heavy to render.