Web design is a tricky subject. Some people think you need a super sleek over the top website in order to wheel people in. Others think that web design doesn’t matter as long as you have a site that works.

But that doesn’t mean that visual design alone will automatically get you more traffic. It just means that one of the integral aspects of getting people to pay attention to your website is having a great visual design.

However, it is also important to ensure that your typography is on point. In fact, typography is even more important now with the prevalence of mobile devices. And with over 42% of the website traffic in the US coming from mobile devices, mobile typography is definitely something you want to think about.

But you and I both know that getting the right typography takes work. So how do you ensure you do it right?

Well, luckily, it is not rocket science. Sure with mobile devices, the screens are much smaller but it’s actually pretty easy. And in this blog post, I’ll take you through a simple guide for typography in mobile web design to help make things easier for you.

Ready? Let’s dive in.

But first…

What is Typography?

Simply put, typography refers to the arrangement of type. It is everything from how the information is presented to the size of the letters, how the text looks like and the length of the lines.

Why Typography Matters in Mobile Design

How many times have you left a website because the typography was illegible?

Probably dozens of times. Right?

Maybe it was spread too closely together or it was too small to read. Whatever the case, you left and the website’s chance to communicate with you was gone forever.

According to stats, 42% of website traffic in the US comes from mobile devices. Oh yes. And this number keeps increasing. To tap into this huge customer base, you have to ensure a smooth user experience for your web visitors. And part of ensuring a smooth user experience involves picking a font that’s easy to read.

Typography is also crucial because it makes it much easier to read on a smaller screen. It ensures that the focus remains on the text and not on the effort you need to make to read the content.

How to Choose the Right Typeface

Avoid focusing on expressiveness rather than usefulness. Most of the time types that look pretty are not always the easiest to read.

When pairing typefaces focus on correspondence and contrast.

Ensure that the typeface you choose complements the text rather than overpower it.

Typography in Mobile Web Design: How to Do It Right

Focus on Readability

Because a mobile phone screen is much smaller, the font sizes of your website tend to shrink when you’re using your mobile device. So you need to remember a few typography rules to make the reading experience pleasant.

Use Larger Type

One of the biggest problems with mobile phones is that they shrink font sizes from what you’d normally have on a desktop computer. So you have to think about who your audience are and whether they will be able to see what you have put up on your mobile website. For instance, if your site appeals more to the elderly, you might want to consider setting a larger type because it’s easier to read.

Use Dark Type on a Light Ground

When it comes to readability, you want to ensure that the type is comfortable for reading. It follows then, that you should use a dark type on the light ground to make it easier for visitors to read through text on your website.

Avoid Using Justified Type

If you are a fan of newspapers, then you know what justified type is. It’s type that is aligned along the left and right sides and is often used where column widths are narrow. Now, there’s certainly nothing wrong with this kind of text but it makes for an uneven reading making it a little harder to read through text on a website.

Pay Attention to Spacing

If you look at this post, I’ve spaced out the letters, lines, and words from one another. That’s because squishing them together makes them a little harder to read. Just like in this post, you also need to space out your text for comfortable reading.

Contrast

This is pretty straightforward. When put against a bright color, muted colors can deliver a striking effect and make it easier to read the text. However, keep in mind that just as two bright colors are a no-no on a typical website design, it’s even worse when you use two bright colors on mobile devices. And not just because visibility on the mobile screen is much crappier but because it’s also smaller.

Conclusion

Good design is more than just having a super sleek modern design.  Sure, it’s important to have an appealing website. But it’s even more important to have the appropriate typography for comfortable reading. There’s obviously a lot more to typography, but this is enough to get you started.