Typography Dos & Don’ts

Typography plays a crucial role in User Interface Design as it helps to create a visual hierarchy, improve readability, and convey a brand's personality. Understanding the way typography can impact the overall aesthetic of a design and influence how users perceive and interact with the interface will always provide better products.

Just see the difference 👇

A well-selected typeface can make a design look professional, organized, and easy to use, while poor typography choices can make it look unprofessional, cluttered, and difficult to orientate the users while navigating our products.

Additionally, typography can also affect accessibility by making sure text is legible for people with visual impairments. As soon as designers understand how essential is a typography as a vital component of User Interface Design, the sooner it will help to improve the User Experience and communicate the intended message effectively.

By considering these design criteria & logic, typography can effectively enhance the overall User Experience and help to communicate the intended messages on your products.

Dos and Don’ts for working with typography in User Interface Design

• Use clear and legible typefaces: Choose font families that are easy to read and appropriate for the intended audience and context.
• Create visual hierarchy: Use different type sizes, weights, and styles to generate a waterfall order of information and guide the user's attention.
• Ensure contrast: Make sure there is enough contrast between the text and the background to avoid legibility issues.
• Consider line spacing and letter spacing: Adjust the line spacing, Kerning (space between two specific letters) and Tracking (space between all letters) to improve readability and make text look aesthetically pleasing.
• Convey the brand's personality: Use typography to reflect the brand's values and experience, which is a good way to reinforce its visual identity.

• Avoid too many typefaces at the same time: Limit the number of typefaces used to one or two for consistency and to avoid clutter.
• Overly decorative or hard-to-read typefaces: Avoid using typefaces that are difficult to read, especially for large blocks of text. These might work on specific cases, such as big titles, but using these typefaces for small scenarios is not recommended.
• Neglect accessibility: Make sure the text is legible for people with visual impairments. If it is not readable for these scenarios, it shall be improved.
• Ignore the context: Consider the intended audience and context when choosing typefaces and styles.
• Really small sizings: Avoid using a type that is too small, especially for body text, on small sizing, as it can be difficult to read and may cause eye strain.

➡️ Fonts are powerful resources: in fact, some are specifically made for wireframing, check these two options:

Flow

This font has only one weight (circular, rounded or block) or and it’s meant to be a very simplified version for placeholder, it’s really helpful for low-fidelity wireframing in scenarios where we want to give focus to a specific feature or section.

Download Flow by Dan Ross.

Redacted Script

This is the option for the fans of printed wireframing, Redacted Script has three weights and emulates a persons handwriting. It provides a nice look and feel while doing it’s job.

Download Redacted Script by Christian Nahts.

☝ Before finishing, the Lasting Dynamics team will show some of our favorite font families to work on digital interfaces:

Download Inter by Rasmus Andersson.

Download Larsseit by Nico Inosanto.

Download Circular STD by Laurenz Brunner.

Download Berthold Akzidenz Grotesk by Ferdinand Theinhartd.