Students will discover a few techniques to help ensure that type over video is legible and readable.
- If you've been following trends in web design and interactive media for the past few years, you've likely heard that video is one of the hottest things that you can have on a website. Video tops static images because it provides a sense of active, dynamic movement that engages the viewer and makes pages sticky. But, as good as video looks it must often be paired with text to convey specific messages to visitors or better yet provide them with a CTA or Call to Action, like subscribing to a newsletter or registering for an event.
This means, as the designer, you must find a way to make type over video both legible and readable. From a design perspective, legibility refers to the letter forms. Such as differentiating a capital I from a lowercase L and the number one, as well as our ability to recognize letter blocks as words, like join today and subscribe. Some typefaces are easier to read at any size including body copy or small text, while others are really best used for larger headings.
Choosing the right typefaces to pair with video is even more essential as the text will be competing for the viewer's attention with the movement behind it. Of course you will want to have a font with personality, but above all the copy needs to be legible on all devices from desktops and laptops to tablets and smartphones. For this reason, consider using typefaces with bold and black options. I personally love slab serifs like Alfa Slab One and Ultra, narrow sans-serifs like League Gothic, and chunky serifs like Merriweather.
If your selected typeface is particularly distinct like, say, Google's Bungee font, try using CSS letter-spacing and line-height to improve the legibility. As far as readability goes, that has to do with how you arrange the words and blocks of text onto a page. This is where the designer creates a sense of hierarchy through HTML tags like H one, H two, and P, and CSS styles to control the font, weight, style, size, color, letter case, line-height, letter spacing, margin, and padding.
Whatever style you choose, take care to observe and adjust the font size relative to the measure, or width, of a block of type. Wide blocks require larger text sizes while narrow blocks can use smaller sizes. Once you've selected the fonts you'd like to use for the copy over your video, the next step is to figure out how to make sure viewers can read it. So let's say you had to add type over this video of Grand Central Station. If you're lucky there will be sufficient contrast between the type and the video to ensure readability without any other tweaks.
Here's a screenshot of that video in Photoshop so you can play around with different CSS styles while you're still in a design environment. In this case, there is clearly not enough contrast to this text. So to make it readable we could try a few different things. Now one thing would be to add drop shadows on the text. Another thing to try would be to put background color behind the type. You could also add a CSS background color to the div holding the text either with alpha transparency or without it, or you can do a CSS background color with alpha transparency over all or some of the video.
There are no absolute rules regarding pairing text with video, so follow these techniques and rely on your own best judgement.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices