In UI design every detail counts. Typography plays a big role. Improving typography will improve both the UI and UX of your digital product. Here are 6 tips for better typography in UI design.
1. Stick to one font
Mixing fonts is not the best thing to do. Finding matching fonts is an overwhelming and time-consuming process. Moreover, mixing fonts will make your UI look unstructured and messed up.
Choose one font and stick to it. Make sure the font is readable and simple. Your text should be easy to read. Letters should be distinguishable. Another thing is scalability. Select a font that is readable in all sizes. Also, go for fonts that offer multiple weights. Make use of weights and font size for variants.
2. Use colors & weights for hierarchy
Using different font sizes can make your hierarchy clear. However, there are better methods. To keep your UI clear and beautiful, use colors and weights. Use a darker color for primary text and a lighter color for secondary.
Also, use weights. Make your primary text bolder by using a heavier weight. Use a lighter weight for secondary text. But, don’t go for very light weights. Very light weights can work for large headings but not normal text. If your text is not readable, go for lighter color or smaller size instead.
3. Avoid gray on a colored background
Usually, gray is used for less important text. It works great on a white background. However, it’s not the case on colored backgrounds. For a better UI, use colored text instead. Use white color with reduced opacity, so it takes color from the background. Alternatively, you can handpick a light color based on the background.
4. Use contrast ratios
When talking about readability, contrast is the key. Low contrast will make your text hard to read. Bad contrast will strain the user’s eyes. It’s very important to use the right contrast ratio.
Use light colors for text on dark backgrounds, and dark colors for text on white backgrounds. Use a contrast ratio tool to make sure you’re in the right range. For normal text, use a minimum ratio for 4.5:1. For larger text, use a minimum ratio 3:1.
5. Align your text properly
Align text to the left for left to right languages, such as English. For the right to left languages, such as Arabic, align text to right. Users will read your text faster and easier when using common alignment.
Only use center alignment to distinguish a short part within the text. Pull quotes are a good example. However, it’s not recommended for long texts.
6. Put 60 characters per line
Long lines of text are hard to follow through. Also, users can lose their place when moving from a line to the next. Moreover, long lines make your UI cluttered.
On the other hand, very short lines of text are uncomfortable. Extremely short lines make users move their eyes left and right at a painful pace.
Keep around 60 characters per line. At this length, the text is easier to read and looks better.
