• Home
  • Inspiration
  • Design / Dev
  • Freebies
  • Deals
  • Home
  • Inspiration
  • Design / Dev
  • Freebies
  • Deals
CodeGrape Community Blog CodeGrape Community Blog
Input your search keywords and press Enter.
Inspiration

A Simple Guide To Typography In Mobile Web Design

by codegrape / March 26, 2019

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.

designguidemobiletypefacetypographyweb
  • ♥64 363
  • Read More
  • Previous Post5 Steps For Hiring A Web Developer
  • Next PostWhy Should You Invest In Your Website?

Related Posts

E-Commerce In 2019: The Essentials
April 14, 2019
The Best Businesses To Start Online
December 9, 2019
Great Ways to Improve Your Business Processes
January 10, 2019

No Comments

Leave a Reply Cancel Reply

3 × 2 =

Everything You Need To Know About Metadata: By Data Scientists

March 5, 2021

Continue Reading

How to Say Thank you to your Customers on an Online Store

February 23, 2021

Continue Reading

Top 5 Advantages Of Automating Processes For Businesses In 2021

February 23, 2021

Continue Reading

Avoid Making These 5 Email Marketing Mistakes Right Now

February 22, 2021

Continue Reading

What is system design in software development?

February 17, 2021

Continue Reading

Newsletter

Latest Posts

  • Everything You Need To Know About Metadata: By Data Scientists
    March 5, 2021
  • How to Say Thank you to your Customers on an Online Store
    February 23, 2021
  • Top 5 Advantages Of Automating Processes For Businesses In 2021
    February 23, 2021
Restaurant Flyer https://www.codegrape.com/item/re Restaurant Flyer
https://www.codegrape.com/item/restaurant-flyer/43593

#flyer #restaurant #business #corporate
50 Brochures with Extended License - Only $19 http 50 Brochures with Extended License - Only $19
https://www.codegrape.com/item/50-brochures-with-extended-license-only-19/45802

#bundle #deal #brochure #corporate #template #discount #extended #creative #printready #editable #cmyk #300dpi
Rent A Car Social Media Post Banner Template https Rent A Car Social Media Post Banner Template
https://www.codegrape.com/item/rent-a-car-social-media-post-banner-template/43574

#car #banner #rental #facebook #instagram
Real Estate Flyer Template https://www.codegrape.c Real Estate Flyer Template
https://www.codegrape.com/item/real-estate-flyer-template/45404

#advertising #agency #agent #broker #buy #commercial #flyer #property
Resume / CV Template https://www.codegrape.com/ite Resume / CV Template
https://www.codegrape.com/item/resume-cv-template/43371

#cv #resume #cover #letter #creative #template #indesign #msword
10 Seamless Vector Patterns Bundle https://www.cod 10 Seamless Vector Patterns Bundle
https://www.codegrape.com/item/10-seamless-vector-patterns-bundle/43368

#abstract #backgrounds #colorful #flower #geometric #mandala #pattern #elegant #textures
ID Card Template https://www.codegrape.com/item/id ID Card Template
https://www.codegrape.com/item/id-card-template/43342

#advert #advertisement #corporate #design #card #id
Corporate Stationery https://www.codegrape.com/ite Corporate Stationery
https://www.codegrape.com/item/corporate-stationery/38273

#corporate #branding #letterhead #poster #business #card #cover #cd #identity
Follow on Instagram
  • Scripts
  • Themes
  • Plugins
  • Prints
  • Graphics
  • Mobile Apps

Copyright © 2020 CodeGrape. All Rights Reserved.