Difference between Screen Density and Resolution

Tegra - August 23, 2019 - 0 comments

Difference between Screen Density and Resolution

Understanding the core difference between screen resolution and screen density is of utmost importance for UI designers.

Courtesy of @design_pilot 🔥

In this post I breakdown the differences between screen density and resolution with the help for a small example.⠀

Be free to send us any feedback by reply or reach using DM on Instagram

Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Since UI designers design for various devices and screen sizes, it is important to understand the basics of density and resolution. The concept remains the same for Android, iOS and Web. However the terminology for each platform is different.
It is defined by the total number of pixels in a screen.
Macbook has a higher screen density because it can fit more pixels into an inch.
Density independent pixels. It is a unit of measurement for UI elements
Since the density of our phone is 160, we will say that 1dp=1px. This means that a button of width 240dp=240px
Now, the density of our phone is 120 and so the button with a width of 240dp=180px
What does this mean? When you are designing UI elements, you can design them in terms of px. However the ideal way is to design in terms of dp. Every device will auto-calculate the pixels for every UI element and display it accordingly.
For fonts, the term is "sp" (Scaleable Pixels). For iOS, the term is "pts" (Points). For web, the term is same as "px" (Pixels).
What else would you like to learn?

Practice with Webflow – all-in-one web design tool that allows users to design, build, and launch responsive websites visually.

Hope you guys find this useful. If so do leave a like and share it on your story. 🚀

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *