This is one of the most important and one of the most neglected aspects of written communication. Typography plays a key role, and improving your typographic design is an important step in improving both UI and UX. Your digital product might have a logical flow, dazzling icons, and the most vibrant colors, but if your typography isn’t on point then you’re going to have a problem.
Many factors affect how we process the somewhat arbitrary lines that humans chose to represent the different sounds of our languages. These factors influence two main aspects of typography – legibility, and readability.
Legibility is how easy it is to tell different characters apart and mostly concerns characteristics in the design of that specific typeface or font. Readability is how easy it is to read a text, which is affected by which font is chosen, the size of the type, line spacing, and line length, among others.
As with the rest of your UX design, you should keep your end-user in mind when working with typographic UX. When choosing typefaces or fonts, spend a little time thinking about what your user experience and your brand represents and try to reflect this in your typography. Also, consider what feelings the design of the typeface is provoking and if this is the correct representation for your user experience.
"Typography is an art. Good Typography is Art." – Paul Rand.
A typeface is also known as a font family meaning that one typeface is made up of several different fonts with different weights, styles, widths, and so on. Most typefaces or font families are made up of a regular, bold, and italic font but many typefaces have additional fonts with other variations in characteristics. So here are 9 rules for better typography in UI:
1. Hierarchy
Establish an order of importance within the text, allowing the reader to easily find what they are looking for and navigate the content.
2. Try To Use Standard Fonts
Most users are accustomed to standard fonts. Unless your website has a compelling need for a custom font, such as for branding purposes, it’s usually best to stick with the system fonts. Keep in mind that good typography draws the reader to the content, not to the type itself.
3. Text sizing
Users can access your site from different devices with different screen sizes and resolutions, so it’s vital to select a font family that looks good regardless of the user device. Also, too many type sizes at once can also wreck any layout.
4. Text Aligned
Left-aligned text is the most common setting for left-to-right languages. Centered text is best used to distinguishing short typographic elements within a layout (such as pull quotes), and is not recommended for long copy. Right-aligned text is the most common setting for right-to-left languages, such as Arabic and Hebrew.
5. Line Height
Line height, also known as white space, is the area between elements in a design composition. In case the white space is not balanced, a copy will be hard to read.
6. Avoid All Caps
All the letters capitalized — is fine in contexts that don’t involve reading (such as logos), but when your message involves reading, don’t force your users to read all caps text.
7. Make Sure You Have Sufficient Color Contrast
Don’t use the same or similar colors for text and background. The more visible the text, the faster users are able to scan and read it.
8. Avoid Coloring Text
Consider all readers, we are designing for usability. Avoid using colors alone to convey information because this creates problems for people with low vision, color perception deficiencies, and color blindness.
9. Avoid Using Blinking Text
Content that flashes can result in distracting or annoying for users in general.
Conclusion
Typography is a big deal, it helps us transmit important messages and makes digital communication more effective. Bad typography choices can distract users from reading. Use the tips from this article in your UX/UI design to display content that is readable, understandable, and legible, without creating an additional cognitive load for the user.
Photo by Alexander Andrews on Unsplash
Comments