Is their any rules to setup to size of icons/fonts/etc.. according to the size of the screen

Question

When i do an app on smartphone, i define (for exemple) an icon of 20px*20px. This icon look great on my mobile screen, but not on tablet with big screen (like ipad pro). in this case the icon look very little.

If i proportionaly increase the size of the icon with the screen, then the icon will finally look too much big. For exemple:

1. on my mobile screen 360*640 the icon size is 20x20px
2. on my tablet screen 1024x1366 the icon size will be around 60px*60px => too big

does someone know a good rule to setup to size of the icons/font/etc. according to the size of the screen ? i m under delphi (firemonkey)

Answer 1

When designing for different devices, regardless of operating system, there are two things to consider: first is screen density and second is physical screen size.

To be able to categorize devices knowing screen pixel size is not enough. For instance there is difference between 1920x1080 pixel display on 10" tablet and 24" desktop monitor. To describe real screen estate we have on our disposal there is term "device independent pixel - dp or dip". This is baseline size describing single pixel at 100% scale for specified operating system.

Different operating systems have different baseline densities. For Windows that is 96 dpi, for Android 160 dpi, for iOS 163 dpi. Also those densities vary between devices so actual hardware screen density usually differs from logical one. Imagine difference between 1920x1080 pixel 22" and 24" monitors. Both have same declared OS (Windows density at 96dpi) but actual hardware density and physical size is different.

Each OS has some design guidelines for icons and font sizes you should use at baseline density, and then you should scale those up for higher density screens.

Fonts have additional dimension defined as user defined font scale. That means users can choose to increase or decrease baseline font scale - on Android that is called Scale-independent Pixels (sp), on iOS term is Dynamic Type Size. It is preferable that you take user defined font preference into account when declaring font sizes, but in certain circumstances when you are writing text over images or you are doing some other more precise design, you can ignore user size and use default baseline size to make sure your design will not fall apart for non-default font scale settings.

In practice, when you have icon 20x20dp in size you will use same size on all devices. You can use slightly bigger icons on large screen devices (tablets) but just scaling your image by factor 3 is not going to look good. Also, there are no definitive rules on how bigger those icons have to be. It will all depend on your application. If you are making text editor, or image editor, you will want to leave icons small in order to give more useful space on larger devices. On the other hand for some games you may just scale whole thing up to fit the screen regardless of the size. It is totally up to you.

---

Most common scales and screen sizes (dpi densities are informative, real devices densities may vary):

Android

small screen - at least 426dp x 320dp
normal screen - at least 470dp x 320dp
large screen - at least 640dp x 480dp
xlarge screen - at least 960dp x 720dp

0.75x ldpi ~120dpi
1.0x mdpi ~160dpi
1.5x hdpi ~240dpi
2.0x xhdpi ~320dpi
3.0x xxxhdpi ~480dpi
4.0x xxxhdpi ~640dpi

iOS

1.0x @1x ~163dpi
2.0x @2x ~326dpi
3.0x @3x ~401dpi

Windows

1.0x ~96dpi
1.25x ~120dpi
1.5x ~144dpi
2.0x ~192dpi

---

Further reading:

Material design - Layout – Units and measurements

Android Supporting Multiple Screens

What is the difference between “px”, “dp”, “dip” and “sp” on Android?

iOS Human Interface Guidelines - Typography