When you think of what makes a good app or website, most people fail to include a very important element - typography. That’s probably because good typography is frequently “transparent” to the reader - you don’t notice its impact (or you forget to think about it) unless it’s really bad.
Typography plays a crucial role in shaping the user experience of digital products. For your designs to succeed, they must convey their meaning and purpose in a clear matter. There is no good design without effective communication and connection with the users.
From websites to mobile apps, typography helps communicate the brand identity, it can establish hierarchy, guide users through the content, and even influence their emotions and behaviors. Therefore, good typography can have a positive impact on several aspects of your design or digital product, such as its accessibility, usability, readability, and graphic balance.
To help you create designs that are both beautiful and effective, in this article, I presented a list of typography tips and best practices - these tips cover everything from font selection to hierarchy and the use of whitespace.
But before anything, here are two elements of typography terminology that need to be explained, because they are frequently used interchangeably today:
- Typeface — also called a font family, and it’s a collection of fonts (ex. Helvetica)
- Font — a stylistic variation of a typeface (ex. Helvetica Bold size 12)
Tip #1: Use only one or two typefaces
Mixing fonts is an option, not a requirement. Using only one typeface is, in most cases, more than enough. You can always make a font bigger, smaller, bold, italic, capitalized - and make it seem like a different typeface.
If you insist on mixing typefaces, try limiting them to two of them, and use them consistently throughout the design. If you use more than two typefaces, your design might look cluttered and unstructured, and the users might have difficulties reading and navigating.
Tip for the tip: To successfully use only one typeface, make sure to check beforehand that it has a large range of weights, so you can alter them throughout the design.
Don't use more than two typefaces.Tip #2: Keep it simple. Don’t use fonts that are too fancy
An important tip for a professional-looking website or app is to keep it simple. Instead of decorative and sophisticated fonts, it’s better to opt for simple and easy-to-read ones.
Examples of simple fonts: Roboto, Poppins, Lora, Merriweather, Open Sans, Lato
Tip 3: Consider the mood and tone of your brand
Your brand’s values and personality are very important when it comes to choosing a font because they influence the tone of voice. For example, if your brand is modern and innovative, you may want to choose a sans-serif font that has clean lines and a contemporary feel.
Also, the context of your design may also influence the mood and tone you want to convey. You won’t use the same tone (and typefaces) on a website for financial & legal services that you use for a company that sells toys for children.
Another aspect to consider is the difference in the characteristics of the typefaces. Serif fonts feel more traditional and formal, while sans-serif fonts feel more modern and informal.
Tip 4: Make sure the text’s color has a good contrast with the background
This tip is essential for readability and accessibility. People with visual impairments or reading difficulties may struggle to distinguish the text from the background. The more visible the text, the faster users are able to scan and read it.
The best is to use an online contrast checker tool, to make sure that every user can feel good navigating your website/app.
Also, when placing text on an image, you have to take the contrast into consideration as well. If the text is hard to read, users face a dilemma between making an effort to decipher it or simply skipping over it altogether. To avoid the risk of users ignoring your text, consider making slight design modifications to enhance the contrast between the text and the background.
To make the text more legible in this case, there are a few methods to try applying, depending on your images and overall design of the content:
- darken the background image
- blur the image a little
- place the text in a text box (over the image), with the opacity of the box’s color slightly decreased, to still see the image below.
Tip for the tip: Don’t exaggerate with the contrast either, as it can be tiring for the eyes - and I’m not just talking about very bright colors, it applies to the black and white duo as well. The friendliest approach for the users’ eyes is to not use pure black and pure white. Use off-white and dark grey.
Tip 5: Choose a comfortable size for your device
Although the right text size for your website or app depends on various factors, including the font family, design, and user experience goals, there are some guidelines you can follow to determine the appropriate size for your text.
Mobile
The body texts on mobile should be around 16-18px — make sure that you can easily read the text when the device is held at a natural distance.
You can use smaller sizes for secondary text, making it a little bit smaller than the body text, so you can still see a difference between them, enhancing the content’s hierarchy.
While the headings’ sizes may depend on the overall design and style of your content, make sure to make them stand out. Don’t make them too small, as they might be confused with the body text, but not too large either, as they could make the reading more difficult.
Desktop
Choosing a size for large screens depends on what type of content your website or web app has. They can have text-heavy pages (like this blog article) or interaction-heavy pages (like the Facebook feed). These styles of pages can be found on mobile devices as well, but the difference between them is more pronounced on desktops.
For text-heavy pages, you should use a larger font size. While 18px could be the right size to start with, because users are usually sitting farther away from the device, you can use a bigger size too. A 20px+ size might look awkward at first, but it’s worth trying it out on your content. A minimum for this kind of page would be 16px.
For interaction-heavy pages, you can use smaller text, because these types of pages usually have large amounts of different data, with different hierarchies included. So, the average size might be around 14-16px, but there will always be smaller sizes for less important details, and larger sizes for more important elements.
Tip 6: Try to avoid using all caps for long texts
A LONG TEXT IN ALL CAPS IS HARDER TO READ AND IT MAY SEEM LIKE I’M USING AN AGGRESSIVE TONE… RIGHT?
Our brains and eyes make an additional effort to read a text like this, so it’s better to leave the capitalized letters only for logos, acronyms, and short to medium titles.
Tip 7: Justifying left should be your go-to, (almost) always
Left-justified text is easier to read because it creates a consistent left margin that helps users quickly locate the beginning of each line. It creates a more natural flow of reading.
Center- or right-justified text may become tiring for the eyes - they create uneven margins that make it more difficult to follow the lines. But it’s okay if you do it only for 2-3 lines of text.
Tip 8: Don’t overuse bold fonts
Bold text is useful for adding emphasis or hierarchy to text, but overusing it can be problematic. Overall, this tip has the same arguments as the tip above, with capitalized text. Heavier-weighted fonts are less legible than lighter ones.
Besides using it in titles and subtitles, it’s recommended to use bold text only for important information, or on a few words here and there (like in this article) to be easier to read and scan the text.
Tip 9: Whitespace is your BFF
Whitespace (or negative space) is the area of the design that is left blank - it’s as important as any other element of the content because it lets the design breathe. It creates visual appeal, and it’s improving the legibility & readability of the content.
Make sure to have enough space between the lines of your text (but not too much), break large blocks of text with headings, images, or other types of content, use larger margins, and leave space whenever possible, before or after paragraphs - these are just a few tips to apply to your content, to create more whitespace. Let everything breathe!
Tip 10: Consistency is your other BFF
By not being consistent throughout your design with your typography, you can make your website, app, and even brand, look unprofessional and messy. Using 14 typefaces and styles can mute the voice of your brand and communicate a lack of structure.
If you are creating a website or app, build a design system (or UI library) beforehand, as it helps with maintaining a consistent design.
To conclude…
Ok, enough with billionaires lists and banana bread recipes. I think you understand by now that the topic of typography is extremely important, and it should get the same attention as every other design element when creating a website or app. It is not just about selecting a font or typeface, but also about understanding the nuances of typography, such as hierarchy, spacing, and legibility, among others.
Whether you're a designer, developer, or product manager, understanding typography can enhance your skills and elevate the quality of your digital products.
As the world of design continues to evolve, typography will remain an essential tool for everyone to convey their messages with clarity and style.
