Today, the significance of a user interface is paramount in app development. History is a brim of evidence of how developers around the world have built apps with innovative features but failed in the designing department, eventually leading to the downfall of an app. In fact, more than 90% of worldwide app users today judge the app upon the very first impression. Thus, the importance of engaging UI/UX increases all the more.
Now here’s a thing, while there are multiple points a designer needs to remember while designing the UI of an app, the relevance of a perfect font size cannot be taken for granted. In fact, with the font being one of the most trending UI topics for websites and apps, the biggest question that arises amongst the beginning designers today is- what font size should they use for their project?
Hence, to bring the hat down to this brewing question of font size, here’s our detailed guide on the font sizes of UI designs that can be applied across the two major platforms like iOS and Android.
Font Size Guidelines for iOS
The font size guidelines mentioned below are based on Apple’s default font, San Francisco, and match the conventions set by iOS. Have a look.
The first thing that you need to keep in mind when it comes to keeping the font sizes for iOS is the title. Taking an example of the iOS 13 mailbox for instance, the mailbox has a title called “Inbox” which is kept at 34pt.
Bit once you scroll down on the same page, the title quickly morphs to 17pt. Ths vital thing to note here is that even though the title morphs down to the default text size, the difference between the title and other text is clearly visible as Apple uses a top of the line center placement for the title, eventually distinguishing it from the default text.
2. List View
Now when it comes to the list view, let’s take an example of the mailbox again, but this time in a list view of emails. iOS doesn’t necessarily use anything different in terms of the font size. The name of the sender is kept at 17pt which is the default size while the short preview of the email is kept at 15pt. including the timestamp. Have a look.
Likewise, iOS uses the same default size 17pt. in the settings page as well. But here’s a thing, even though the font size is kept default, the text is kept slightly bolder in order for it to be recognizable as a title.
Now we’ve discussed the mailbox and its typography, let’s shed some light on the form controls of iOS that are vital and should be kept in mind.
As highly evident from some of the form controls that Apple has used, the segmented button is the notable point here as the font size used is 13pt which is the smallest of all so far, while in case of the search box, Apple has decided to opt for the default 17pt size.
4. Styles of Texts
The style of texts is one of the most trending topics in UI today. Here’s an illustration of how Apple uses different styles of texts in the sign-up process for the iTunes store.
As evident from the above picture, Apple uses the default size 17pt. for the title while keeping it bolder in order to distinguish it. Likewise, the explanatory text or secondary regular below the title is kept at 13pt. including the text input section.
As for the cancel and Ok options, again the default 17pt. size is used. The notable point, in this case, is that even though the default text is used on multiple occasions, the difference is still visible and that’s what makes Apple a genius in this case.
But here’s a thing, though the explanatory text below the title seems way too small, the action bar in iOS in even smaller with a mere 10pt. size. Ideally, it is always advisable to refrain from using such small-sized text as it can be problematic for people with poor eyesight or medical conditions to view the text of the app.
Font Size Guidelines for Android
So now you know how the font sizes in iOS apps are styled. Let’s take a look at the font sizes guidelines in the Android apps.
1. Title and Body
While the iOS titles are kept 17pt, the Android title is slightly different in that case since it is kept at 20sp.
As in the case of the body, the size of the text is kept at 14sp which is also considered as the default size in most cases. The notable point here is that if the body text is longer, the text remains default sized. But if the body text is slightly shorter in length, as evident from the below picture, the size is then changed to 16sp.
2. List View
Another significant point to add in the guide for font sizes of mobile UI design is the list view of Android. While iOS keeps the list view at default size, Android apps are different in that case. The usual size for the Android apps list view is 16sp which also comes as a default size in the material design.
Likewise, in the case of the list view, the name of the concerned person is kept at 16sp while the secondary description is slightly smaller and lighter in weight, generally at 14sp.
3. Buttons and Inputs
Buttons and other inputs are perhaps the last points that come into mind when we think of a complete guide on font sizes for Android. In this case, the different tabs and buttons are kept at a medium 14sp while the body text size is kept slightly higher at 16sp. In fact, achieving that conciseness with the tabs and icons along with precise buttons is one of the hottest UI design trends today.
However, speaking of the body text, as unusual as it seems, there’s a valid reason behind its larger size. The importance of the inputs that a user provides is much higher than the buttons. Hence, the input box in Android apps and smartphones is kept slightly bigger in font size.
Font sizes in UI designs play a massive role in determining the success of an app or smartphone today. It can not only improve your whole UI but can also increase the user-friendliness which eventually attracts more users. While the above guide clearly portrays the different typographies used in two platforms like Android and iOS, designers can follow the same approach in the case of iPad and webpages.
So if you like this article, let us know your thoughts in the comments section below or head over and connect with us through our social media handles.
- Why Launch a Mobile App for SMBs
- Lessons from Steve Jobs: How to Achieve Success in Your Career
- Conversion Rate: Improve Product Presentation
- Beginner’s Guide to SMS Marketing for Small Business
- Why Do You Need to Secure Your Mobile Phone on the Job?