Published in · 4 min read · Feb 7, 2024
--
When designing a user interface, whether it’s for a website or mobile application, designers aim to give careful consideration to every detail of the elements. They strive to create visually appealing components such as buttons, input fields, tabs, navigation bars, and more.
Achieving these components requires a thoughtful selection of colors, typography, spacing, and graphics. With so many factors to consider, it’s understandable that designers might struggle to choose the right elements for their UI. So in this article, I will guide the principles for selecting typography that works well in UI design.
Typography adds ingredients to your UI, making it tastier and spicier, Yeahhh!!!
Let’s examine all examples of each guiding principle below:
Font — Type Sizes
When it comes to choosing font sizes, there are no strict rules, as it ultimately depends on the platform, design language, purpose, and target audience. However, here are some guidelines for selecting appropriate font sizes for different use cases:
- Title or Headings: Use larger font sizes for headings and titles, ranging from 24px to 36px. This helps draw attention and convey information quickly.
- Subtitle or Captions: Choose a smaller font size for subtitles or captions, ranging from 14px to 18px. This distinction helps separate them from the main content.
- Body Copy: Select a font size that allows for clear readability and provides sufficient space for the eyes to move along the text comfortably. A range of 16px to 20px is suitable for body copy.
- Input Field: For input fields, choose a font size that is easy to read and enter text into. A range of 16px to 18px works well for input fields.
- Metadata: For metadata, such as dates, times, author names, and text inside a small button, consider using a smaller font size that doesn’t overwhelm the main content. A range of 12px to 14px is appropriate for metadata.
Remember, the key is to ensure that the chosen font size is readable and findable for the intended audience. While these guidelines offer helpful starting points, feel free to experiment and adjust font sizes according to your design needs and preferences.
Color
When we want to distinguish the title or contents, we will consider changing the font size. However, did you know that you can also change the color to differentiate it?
These two examples are not meant to prove you wrong or right but have different purposes:
- On the left-hand side, where we use the same color for both heading and body copy, the aim is to promote visual harmony and make content easier to read.
- On the right-hand side, where we use different colors for heading and body copy, the intention is to create a visual hierarchy and differentiate between heading and body copy.
Weight
Font weight is important; it is seen mostly everywhere, following the color principle mentioned above. It also helps differentiate the content or title. Consider using it along with color.
These two examples are similar to the color principle guide that I have mentioned. However, as a UX/UI designer, you have the ability to consider and make decisions to ensure that the user interface and user experience are easy to use and friendly. Conducting usability testing is a must, and it is an iterative design process.
Lowercase and Uppercase
Lowercase is rarely used and not always a good idea. However, using lowercase must have your own reason and should feel natural for the user.
Uppercase provides an exciting variety in your typography mix. It is seen more often than lowercase.
In this example, I play around with the domain website by using upper and lowercase letters. However, all domains are typically in lowercase. Consider this when you decide to experiment.
Max-characters
Having the right amount of characters in each line is key for readability, especially on mobile where usability testing is prevalent. Ideally, each line should contain no more than 9 words or 50–60 characters.
In this example, I try to maximize the characters in each line and adjust the line height to make our paragraph more readable.
Conclusion
Improving the user interface, which is our focus as UX/UI designers, involves considering the right use of typography. We should pay attention to font size, type, color, weight, lowercase and uppercase letters, as well as maximizing the number of words in a line with appropriate line height. By doing so, we can enhance the appearance, scannability, and readability of our UI.
Hey 👋 , thanks for your time. I create regular content, so please follow me for more.
