UI Typography Guidelines: iOS, Android, and Website font Size Guideline — Part 2 (2024)

This article is part 2 of an article entitled “UI Typography Guidelines: iOS, Android, and Website font Size Guideline — Part 1”

This is the link to part 1 of this article :

UI Typography Guidelines: iOS, Android, and Website font Size Guideline — Part 1

All font sizes listed below refer to Roboto. Other fonts may appear bigger or smaller, even using the same size. The units I use in this section are “sp”. It’s pronounced “sips”, and it stands for scaleable pixels. But, as a designer, all you need to know is it’s the number you type into the font size box when you’re designing (for the nitty-gritty on “px”, “pt”, “sp”, and “dp”, see here).

See below for visual reference and more in-depth guidelines.

Now let’s go through element-by-element with (a) visuals and (b) notes on how Google deftly wields these font styles.

Titles

Titles on mobile Material Design apps are 20sp.

Body Text

The body text size in Material Design is 14sp. You should think of this as the normal font size.

while 14sp is the default text size when the text can be quite long, when there’s only a small modal with a bit of text, it’s 16sp!

List Items

Many simple lists will show each item at 16sp.

Actually, this is the default “list item” size in Material Design.

a list of simple items feels a lot like body text. Why would it be bigger? the importance per word is much higher than body text. Therefore, it should be larger.
Also notice that having larger list item names means you can have a clear contrast between the list item title and a secondary description, which is both smaller and lighter.

But denser lists, like those on sidebars, are 14sp — and one weight bolder to compensate

Form Controls

The only surprise here, according to the author of the article “The Android/Material Design Font Size Guidelines”, is the 16sp text input. Why not innate body size? Since the per-word importance is higher than the default body text, and unlike buttons (which have 14sp text), it feels strange to have a text box with medium-weight or bold text.

Although all the examples shown above are from mobile apps, the font size is only slightly different on tablet and desktop apps. Here’s a summary of the typography changes, again, as provided by Google:

that’s all for android typography guidelines.

In this post, we’ll cover what font size to use for a responsive website. First we’ll cover mobile guidelines, then desktop guidelines

Mobile Web Typography Guidelines

Picking font sizes for a mobile site is not an exact science.

Body font should be about 16px

Understanding that different fonts can be more or less legible even at the exact same size, 16px is a good place to start when choosing your default mobile font size. By “default” or “primary”, I mean the size that most paragraphs, labels, menus and lists are set to.

Ultimately, you want the text on your phone to be as readable as the text in a well-printed book (when held at a reasonable — usually a little further — distance). One process for getting there:

• Start with 16px
• Consider going smaller if you have (A) have an interaction-heavy page or (B) a font with particularly large, easy-to-read characters (like Proxima Nova in the image above)
• you can be much more liberal with exploring sizes larger than 16px, but in particular if (A) you have a text-heavy page or (B) a font that is particularly difficult to read at a given size

Text input size should be at least 16px

This is important. If you’re designing a website or app that can be viewed on mobile devices, there is only strict rule: Use a text input font size of at least 16px.
If your text inputs have a smaller font size than that, iOS browsers will zoom in on the left side of the text input, often obscuring the right side and forcing the user to manually zoom out after using the text box.

Secondary text should be about 2 size smaller than your paragraph text

For secondary text like lesser labels, captions, etc. use a size a couple notches smaller such as 13px or 14px. The Author does NOT recommend going down just one font size, since then it’s too easy to confuse with normal text. In addition, when text is less important, you want to style it so that you’re clearly communicating the lesser importance — often using, say, a lighter shade of gray (something about 70% as strong is a good place to start).

Always view your design on an actual device

The gold standard of choosing mobile font sizes is to view your designs on an actual device. I can’t recommend this practice highly enough. As a beginning designer, the author of the reference article was shocked almost every time I opened on mobile a page I designed on desktop. Font sizes, spacing… everything was off. So use Figma Mirror or Sketch Mirror or whatever app makes sense for you, but view your designs

Be familiar with Material Design and iOS standards

For instance:

• Material Design’s default font size is 16px Roboto and secondary font size is 14px (more on Material Design styling)
• iOS’s default font size is 17px SF Pro and secondary font size is 15px (more on iOS styling)

When picking a base size for a desktop website or web app, you can break down most designs into one of two types:

• Text-heavy pages. Articles, blogs, news, etc. These are pages where the primary purpose the user has on the page is to read. There is very little in terms of interaction
• Interaction-heavy pages. Apps that involve more hovering, clicking, searching for an item in a list or table, editing, typing, etc.

Text-Heavy Pages

For text-heavy pages, you want larger font sizes. If folks are reading for long periods of time, be nice: don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:

• 16px — absolute minimum for text-heavy pages
• 18px — a better font size to start with. You’re not printing out a single-spaced Word document; you’re writing for people sitting a couple feet from their decade-old monitors.
• 20px+ — may feel awkwardly large at first, but is always worth trying out in your design app. The best-looking text-heavy site on the web, Medium.com, has a default article text size of 21px.

There’s a great rule of thumb here: your website’s text (viewed at typical monitor distance) should be as readable as a well-made book (viewed at typical book-holding distance). But find a nice, solitary place, and sanity-check: is my font size readable even at a couple feet? Even adjusting for my young and powerful eyes? OK, you get the idea.

Interaction-Heavy Page

For interaction-heavy pages, smaller text sizes are perfectly acceptable. In fact, depending on the amount of data your user is taking in at once, even 18px text is uncomfortably large. Look at your (web) inbox, look at twitter, look at any apps you use that require scanning over reading, look at apps that show you data — you’re going to be hard-pressed to find sustained paragraphs of 18px text. Instead, 14px-16px is the norm. But there won’t be just one font size. There will likely be smaller sizes for less important things, and larger sizes for more important things (titles and subtitles and sub-subtitles, etc.)

Now here’s the important part: for any interaction-heavy page, the font sizes are driven LESS by some top-down decrees than the specific needs of each piece of text and the interplay between them.

For Example :

• The event names are in 12px medium, which is a font style entirely absent from the Material Design guidelines. Yet given they need to fit 7 columns on a screen that’s only 1440px wide, and many events are quite short, this is an ideal font size choice. Any smaller and legitimacy suffers. Any bigger and the event names will be cut off too frequently. Design is a tradeoff.
• The hours of the day labels (“12pm”, “1pm”, etc) are font-size: 10px. Yet horizontal space is at a premium. Each event is labeled with its start time anyway.
• The dates are 48px. Now, in this case, I don’t know why they didn’t use 45px, which is the official “Display 2” size.

When you’re designing your interaction-heavy desktop website, keep this in mind. You need to modify text styles on a case-by-case basis. Consistency is wonderful, but no one gets mad when a font size is one px too small — they get mad when they can’t easily find what they’re looking for.

As Few Font Size as Possible

One of the single biggest typographical mistakes from beginning UI designers is to use way too many font sizes.

Let’s break it down:

1. Header font size. This is the biggest font size on your page. Use it for the headline or section titles. If you have both a headline and section titles, you should almost certainly be using two different font sizes here.
2. Default font size. This is the most common font size on your page, and should be used for all body text as well as most controls, like text boxes, dropdowns, buttons, and menus. The key header mistake beginning designers make here is to use many font sizes for elements that should all be one font size.
3. Secondary font size. This is a font size usually about 2pt smaller than your default font size that you use for less-important details of the site.
4. Tertiary/caption/label/wildcard font size. Very often you will need one more font size. Other times, you might use uppercase for labels or buttons — and because of the increased visual weight of the uppercase, you want to use a slightly smaller size for the text itself (remember: balance up-pop vs. down-pop). So this fourth font size is a bit of a wildcard. Not every design needs it, but many do. My only warning: as much as possible, default to consistency.

for iOS and Website Typography Guidelines are in article part 1

This is the link to part 1 of the article :

UI Typography Guidelines: iOS, Android, and Website font Size Guideline — Part 1

Closure

We have to study the typography of every device and website because typography is important, it can provide value and tone to a brand. Each type of font has the power to represent a business in a different way. For example, sans-serif type typography.

References