Typography in Mobile Design: Important Aspects and Examples

What makes mobile typography special is the restrictive nature of mobile screens; they are small and used in brightly lit areas so that it is difficult to see anything. Therefore, when it comes to typography for mobile devices you have to be very careful about how you go about it. Most people would agree that there are three big components that help making mobile typography great: size, contrast and spacing.

Readability

Readability is defined as the amount of effort a user has to put in, in order to read and understand text. This is a very important usability issue that should never be underrated as text is the number one way in which information is communicated online – by a big run.

Size

If a user cannot read what you are displaying because the text is too small, it’s a very big problem. On mobile devices they can zoom in to see the text larger, yes but the fact of the matter is they should never have to. It is a true that people use their phones and tablets differently and in different environments than desktops and even laptops. To help them read and understand the message you are saying, you should use a size that is bigger than on a typical website. It doesn’t hurt to do so, it is not difficult; but, in the end, it will bring necessary and well deserved ease for your users.

Contrast

Just like a blue text on a red background is a no-no on a typical website’s design, it too is a no-no on mobile devices. Just don’t do anything for a mobile device you shouldn’t on a desktop one. However when you are designing for a mobile device keep in mind that the visibility on a screen is much crappier. People are out in the sun and have a much brighter screen because of other factors then a person sitting in a room, looking at a monitor. This is why you should always use good contrast to help the user see better. Avoid using light gray coloured text on white background. Make a it a bit darker and your mobile dilemma is solved.

Spacing

The last thing that you should always keep in mind is that spacing the letters, words and lines of text from one another is also a crucial part in establishing solid readability of your text. No matter how big the letters are, it is still difficult to read them when they are squished together.

Therefore, let them break by giving them ample space to be read easily. When it comes to whole paragraphs and box of text, provide margins and padding that clearly separate them from each other and the remainder of the page. It is very tedious to read text form where the page begins to where it ends, literally. It also may look awkward visually and mess up your design too.

Some great examples

Below you will find some stellar examples of mobile designs I’ve found on Dribbble that are simply stunning. The designs utilize typography in a perfect way. Take a look, soak it in, learn and execute as they do as these examples are great to learn from.

Blog

The colour combination in this design is wonderful; especially for the bigger sized typography. It works out perfect.

Bamboo Responsive

The typography in this design is amazing; it is airy, clean and very readable.

Mobile Landing Page

The contrast on this screen is perfect. The letters are dark enough to stand out even in the sunniest and brightest of environment.

Responsive Portfolio

This design is beautiful; the crisp white text is standing well all on its own against the blue background and against the white icons.

Mobile Blog

The line height in this design is just right. Although the text isn’t too big it does stand out thanks to it being a darker colour on a light background.

WebBots Theme

The spacing and contrast are killer for the links and headline.

Dashboard Widgets

The contract between white text on vivid colours and black text no white background works amazingly. The colour scheme of the design is not too shabby itself either.

Mooday

Although this design is minimal, the typography isn’t suffering as it is front and center, being presented in a great light thanks to their bold weight and big size.

Mobile Version

The spacing within this navigation could be considered too much but then again why so? It is perfect in helping to distinguish the links from one another.

Mobile version

Even though these letters are slim – some of them even fairly light in colour – their size makes up for that and helps them be clearly seen and readable.

Landing Page

The contrast of white letters on charcoal and red backgrounds is splendid. You can clearly see and read all the links and text.

Neue Klok Grotesk

Very big and straight to the point. You can clearly see the hierarchy within the design as font sizes clearly indicate what is of utmost important on the screen.

Breathing Room

Big, bold and beautiful – no need to say anything else.

Tour Dates Mobile View

There is ample room around all of the typographical elements; the spacing is phenomenal. The contrast too is very good.

Mobile NKOTB

Both the logo and the headline are beautifully executed. The typography looks great and shows itself well too.

Hackerspace Krakow mobile

The typography is very clean thanks to the use of a san-serif font which of course has clean lines itself. Additionally, the line height is generous too.

Paula Borowska

Paula Borowska loves all thing UX and all thing mobile. She believes all products ought to cater to their users. She loves to talk shop @paulaborowska

Newsletter

7 Comments
  1. Rolling Apr 20, 9:36 pm

    Nice post, great examples! I think i saw only one serif font in the examples – for content. The rest sans serif.

    Reply
    +8
  2. Sarah Bauer Apr 22, 10:53 pm

    I’m interested in how typography in mobile design informs content delivery choices, especially because space and size is so relevant to effective communication on a small screen. Meeting the challenge of providing all the necessary content on the mobile platform without compromising usability or aesthetic is what separates impressive mobile websites from the rest.

    Reply
    0
  3. Billy Apr 23, 4:52 am

    I would prefer real more real life examples, than dribbble projects. Its more difficult to achieve great typography in a real responsive site or web app. Different OS or devices render type differently.

    Reply
    +9
    • MikePulsifer Apr 23, 3:13 pm

      @Billy,
      I believe the importance of the examples is to reinforce the principles at the beginning of the post. Granted, there’s a lot more to effective typography, but if you can at least focus on those principles she outlined, you’re off to a good start.

      Reply
      +2
      • Paula Borowska Apr 24, 1:49 am

        Billy, I wish I had found that many amazing looking sites and apps but its a bit difficult as not many exist in practice. Mike’s point is right one; just because it ain’t out there doesn’t mean you can’t do it yourself. Innovation, man. :]

        Reply
        0
  4. nathan Apr 23, 5:13 pm

    Thanks for featuring two of my designs Paula. You’ve made my day.

    Mobile design is a world in itself, you have to come from a completely different angle, and to coin a hackneyed phrase put “content first”.

    Some great examples. Cheers!

    Reply
    +4
    • Paula Borowska Apr 24, 1:46 am

      You’ve made my day by saying that too! I find mobile so exciting as it is just emerging and we are learning some much from it about everything, from development techniques to design methods.

      Reply
      0

Leave a Reply

*
* Minimum length: 20 characters