Home   Courses   Blog   About

What is the difference between px, dp, pt, sp, mm, in?

When designing a UI for a project we work with dimensions a lot. It comes naturally for us when setting sizes. But when we want to know more about behaviour on a physical device, questions like, what are the differences, arise?

 

What to use?

We want to give you a quick answer first:

  • Use sp for text size.
  • Use dp for everything else, for example width/height and position of elements.

 

What do px, dp, pt, sp, mm and in mean?

Here are quick definitions of units for dimensions:

  • dp: Density-independent Pixels
    This is a unit that will be the same size no matter what kind of density the users screen has. Using dp units (instead of px units) is a solution to provide consistency for the physical sizes of your UI elements across different devices.
  • sp: Scale-independent Pixels
    This is like the dp unit, but it is also scaled by the user's font size preference. If you use sp for the size of a text (and we recommend that), the size of the text will be adjusted for both the screen density and the user's preference (some users like bigger fonts to see better)
  • pt: Points
    1/72 of an inch based on the physical size of the screen, assuming a 72dpi density screen.
  • px: Pixels
    These are actual pixels on the screen. Before displays got so good this was a unit of dimension, since there was only one density but now it is very common for screens to have two or more pixels representing one actual pixel (or in our case dp).
  • mm: Millimeters - Based on the physical size of the screen, calculated using screen density.
  • in: Inches - Based on the physical size of the screen, calculated using screen density.

 

How do units work in an example

Let us show you how this all works with an example. We suggest that you do it as well, since you will get a good feeling about what each unit represents.

  1. Start a new project (check our blog How to create new Android project)
  2. Open activity_main.xml and add 5 TextViews one below another.
  3. Change the text for all of them and put something like this for a value:
    • “TextSize in 20px”
    • “TextSize in 20dp”
    • “TextSize in 20sp”
    • “TextSize in 5mm”
    • “TextSize in 0.2in”
  4. Now change the textSize attribute for all the TextViews to be the same as you wrote in the texts.
  5. The screen should look something like this.
  6. Last thing you need to do is to run the app. But since we want a comparison, get 2 or more devices (go get a phone from your loved ones). In our case we used more emulators to get a screenshot as well. You can use emulators as well. The result speaks for itself, pay attention to the first text since this is the most apparent change.

    We can see that dp, sp, mm and in look pretty similar across all devices. There will be more apparent differences on physical devices.

  7. There is one more thing we want to show for the sp unit. Go to settings and change the font size in settings (slide the slider below).
  8. We can now compare the sp setting and see the effect it has. Check the sizes of textSize with the sp unit. The left device has the smallest text and the device on the right has the biggest. If you check the earlier example, the text was the same size for all devices if we didn’t change the user setting for system font size.

We have shown how using different units for dimension helps us build a more adaptive app, that will work across devices. 

What about sizes?

We can make a similar example for sizes, where we will change only the width. 

  1. Make a new screen in your example.
  2. Add textViews as you see on the screen comparison.
  3. Leave height set to “wrap_content”.

    You can see that Nexus 6 and 5x have different densities, which shows the most in comparison to the width in dp. 

 

Conclusion 

On that notice let us recap:

  • Use sp for text size.
  • Use dp for everything else, so for width/height and position of elements.