Typefaces, for some time, became the most important component in the visual design of apps and websites. Since people now read less and view more than ever before, proper use of fonts and other typeface elements are crucial. Unlike before, a typeface is more about grabbing eyes than allowing users to read a text comfortably. That’s why typeface is now considered to be the irreducible link between visual design and readability.
Even mobile app builders and website designers are increasingly focusing on legible design with text. This is precisely why even content developers are trying to use means to allow “at a glance” reading. Typeface design consists of various aspects such as Leading, Tracking, and Kerning. Each has its own significance in the context of design. Here we are going to explain the differences in clear terms.
Leading
Leading is the crucial element determining the space between lines of text. It is critical for optimizing readability and for easy viewing of the text on the screen. Even when a text is used more to appropriate the design than serving a reading purpose, the leading helps maintain visual clarity.
From the bottom of a line where the letters are placed, leading is measured. Some letters extending beyond the baseline, such as the lowercase “y” are also accommodated by leaving adequate leading space between lines. According to most experts, the leading space should be at least 20% bigger compared to the font size. Though, designers can customize this leading space as per their requirements.
As for adjusting the right leading while using Photoshop, you need to navigate the character section in the Window and mention a number in the leading field.
Kerning
Just think of all those times when you have found the fonts in a text content or design to look weird. Well, Kerning is often the common issue behind this. Kerning determines the space between individual letters within a word. As most typeface families come with their own Kerning, there are often limitations in increasing and decreasing this Kerning. Most people simply cannot recognize the Kerning issue without taking an intent look.
While using Photoshop, you have to go to the same Window, and you can see the respective field just below the font size. While tweaking the Kerning, make sure you know the possible difficulties corresponding to particular combinations of letters. You should also take into consideration the relation between font shape and space. Lastly, always beware of over-Kerning that can have a negative impact.
Tracking
Tracking is another aspect corresponding to space in the text. Instead of focusing on the space between individual letters, tracking determines the space between groups of letters and also entire text blocks. Tracking is grosser in character, and hence its impact is more clearly visible in respect of enhancing readability of text and legibility of design.
The designers need to implement their preferred tracking to the selection of text content. When done selectively and in bits and pieces, tracking can also be very dangerous by breaking a text content or squeezing more text into space.
This is why en-masse use of tracking is often avoided, and it is used to optimize line endings in text or to bring words closer for hyphenation. This is also the reason why tracking may vary from one text to another.
While using Photoshop, you can easily customize and adjust tweak tracking by going to the same Window for the character section and by changing the value for tracking.
How to Evaluate the Relation of Space between Letters?
After all, all these concepts corresponding to typeface are there only to make your text more legible, readable, and visually appealing. The spacing between text lines, letters, and groups of words are always of extreme importance for making an interface more useful for the users.
Here we are going to explain some of the tested and tried tips for maintaining the right space in texts.
Orphan letters and words in text content can ruin your design.
- Always avoid using a lot of words in a single line.
- Maintain consistency in typeface and weights of fonts.
- Consider Serif and Sans Serif typefaces for lengthy text contents.
- Maintain optimum color contrast that can help the readability of text.
- Always optimize spacing in heading as per the font size. Bigger spacing for bigger font size always adds extra flair and ease of readability.
- Don’t use justification for website text as that often leaves text in next page in a messy way.
- Use a string hierarchy to allow easier navigation for readers.
- Avoid using all caps in the text body.
- Use a maximum of two or three fonts in an app to ensure optimized consistency.
- Don’t use a bigger 12 point typeface for regular body content.
Conclusion
Finally, it is the white space that plays a bigger role in grabbing attention and engaging the audience with app or web interfaces and contents. The use of white or negative space around each text content will help make the text more legible. While leading, tracking, and Kerning will continue to grow in importance, the use of white space around text content will give voice to these design efforts. Spacing through any of these means and through various other ways will continue to play a bigger role in any design.
