UX/UI Essentials: Typography in Mobile Applications

You have probably heard this many times that good typography is difficult to find, but what we feel and acknowledge is that good and accurate typography makes the art of reading smooth and effortless. When our eyes read each word in a line, it does so in small jumps, which is widely known as saccades, a term most of you might not have heard. We obviously don’t read letters, and as a matter of fact words, we take in the snapshots of a part of words and our brain registers them and look further what it expects to find. In case the brain was not able to make out what the text is actually portraying, it sends the eyes back to read the text and verify if the assumptions it has made was 100% correct. A good typography minimizes the amount of effort your eyes need to put in order to read along with a line of text.

Mobile devices over the last few years have seen a tremendous growth in regards to usage. 80% of internet users today own a Smartphone and users spend on average 69% of their media time on Smartphones. A typical Smartphone with sufficient battery life and powerful wifi can bring users a world full of valuable and infinite information. We all are living and breathing in a world full of mobile phones and since every user today owns a mobile phone, it is our responsibility to optimize it for unhindered and better user experience. Now, how can you give users stellar UX and UI experience on a small screen without overloading it? Though the world of mobile apps is filled to the brim with multiple options to bring such change, as a leading Website Development Company in Phoenix Arizona AZ, we consider Typography in Mobile Apps the most important one.

Mobile design requires a significant amount of detailing, intricacy, and elaboration due to its limited screen size. The User Interface of mobile apps is made up of different elements, mainly smooth navigation bars, and tab buttons, side sliding menus, along with some aesthetic and graphic elements to highlight these elements. But even with the incorporation of these visuals elements, we keep the users hooked by communicating with them in a most traditional and roundabout way, i.e. via text. Communication plays a pivotal role in mobile design. No matter how and where you are developing your mobile app, it should clearly portray their intent and purpose. The objective of developing a mobile application is crystal clear, to develop a connection between the app and the user and help a user find what they are looking for in an app.

According to sources, 95% of communication over the internet is via text. Unfortunately, web designers are focusing on every major design element but this. Here an acclaimed Web Development Company in Phoenix Arizona AZ is talking about a field that has redefined over the years and typography has become a major design element in mobile apps.

What is Typography?

Going by Wikipedia’s apt definition,

“Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.”

Why is Typography so important in Mobile Apps?

  1. The role of typography is not just limited to filling up the spaces in the mobile apps, but to aesthetically complement the overall mobile application design. This will significantly empower the overall user experience and will increase user’s amazement within the app.
  2. Typography plays a vital part in triggering human psychology and doesn’t restrict only to being a graphic contributor. With right and effective choice of typography, it becomes easier for the app users to connect with the overall app usability.
  3. It is a matter of fact that great design captures the attention of a user in a blink, but to prolong that attention, typography plays a very quintessential role. That is why it is must to build a typographic hierarchy which is a part of the visual hierarchy in the designing context which guides the user attention and helps them explore an application.
  4. When typography done right, it can help communicate better with the users. You can win trust and attention of the users with the selection of typography that gels well with the overall app design. You can highlight important details with typography and encourage users to take actions through words.

What are the best practices in mobile typography?

Font Size: Let’s talk about Apple’s take on this. Apple in its website devoted to developers has clearly mentioned that “Your font will be no good if users can’t read it, no matter if it’s the most beautiful font in the world.” According to the Cupertino multinational technology company, font size ranging from 11 to 17 points is apt for iOS devices and 35 and 50 characters per line, which is somewhere close to what needs to be done in Android Apps. The screen of mobile phone ends, before they can even start, so use them wisely.

Font Style: The selection of font style says a lot about your mobile app and what you are trying to portray with it and it is something which is often sidetracked or simply plucked from the library. The type of font style you are selecting largely depends on the type of content you want to display. This is because fonts can express really well. Opt for curvier and thinner fonts and kick aside over-decorative and gaudy fonts that look shabby on a small screen. Below is the list of the best free mobile fonts to use for your design projects.

Leading: In the typography context, leading is the space between the baselines of consecutive lines of type. Since there is major screen size issue with mobile phones, leading is significantly smaller than desktop versions. Leading in mobile phones should be a little bit tight as compared to the desktop. Too much wider and shorter leading can entirely break the overall user interface of your mobile app. In mobile phones, the standard leading should be 120% the point size of the font.

Kerning: It is defined as the “distance between two letters”. It is the process of adjusting the distance between the characters. It isn’t something that is too important in the large space of typography, but definitely worth the attention. If you notice clearly, you may witness that sometimes the letter spacing between capital letters may lead to inconsistent kerning as compared to the spacing between lowercase letter. So divert your attention to this problem and maintain the space visually even.

If you would like to add something to this list, feel free to drop it in our comments box below.

3 Ways to Improve Your Website’s Page Speed

A well-known maxim “Patience is a virtue” doesn’t apply online.

“Page speed” is often used interminably with “site speed”, which can actually be described as the page speed for a sample of page views on a website. Page speed, on the other hand, can be described as the actual speed of the page or “page load time”, the time a website page takes to fully display all the contents it features. It can also be described as the “time to first byte” i.e. how long it takes for your browser to get the first byte of information from the web server.

Time and again, Google has stressed on the fact that site speed which ultimately leads to page speed is one of the most important signals used by its search algorithm to rank website pages and the researchers have revealed that Google takes into consideration “time to first byte” when it determines page speed.

Website’s Page Speed

Going by the statistics a 1-second delay in page load time garners website,

  • 11% fewer page views
  • 16% decrease in customer satisfaction
  • 7% decrease in website conversions

Therefore it is imperative to keep your website page load speed in check, not only to rank well on Google but also to improve the bottom line profits. Here are 3 sure short ways listed together by the experts of the Top Website Designing Company in Phoenix Arizona AZ to take your website’s page speed a few notches up.

Use a Content Delivery Network: Well this one is the most beneficial when reducing your page load time. Hosting your website’s media files on a content delivery network is one of the best ways to snatch those extra seconds from your site to fully load. It proves to be utterly beneficial since it saves up to 60% bandwidth and approximately halve the number of requests your website makes.

Use GZIP Compression: If you are creating high-quality content, then your website must be harboring large pages which are often 100KB and sometimes more. This makes the website heavier and takes few more seconds to process and download. One and the only way to boost the load time of these pages is to zip them together in a file, a technique which is popularly known as compression. GZIP compression  is a tool which helps reduce the bandwidth of your website pages and alleviates HTTP response.

Optimize your CSS: Know this, your CSS loads much before your website is fully displayed in front of the users. The longer it takes for them to fully download your CSS, the more they wait. By optimizing your CSS it will take less time for the files to download and will give visitors faster access to your website pages. How? Get rid of redundant code in your files and remove extra spaces in your style sheets.