Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Relation between dp - sp and PX

I am not asking what is the difference between dp,sp and px.

I am designing a website based on google's new material design, all the measurements are in dp (for grid) and sp(for text). My question is how do they translate to pixels. I have been designing websites for more than 4 years and all the measurements (grid and font) are in pixels.

For Example:

  1. A headline is 24sp, how many pixels does it equate to? (its not 24px, I've tried matching them, it's around 28px but there has to be a standard measuring systems).
  2. Grid Guideline: "All components align to an 8 dp square baseline grid." - how many pixels does it equate to?

1px = ?dp =?sp on a desktop or any average monitor or mobile device?

like image 994
chandan Avatar asked Jul 01 '14 04:07

chandan


People also ask

What is dp SP and PX?

PX: is an abbreviation for Pixels, which specifies the actual pixels on the screen. SP: is an abbreviation for Scale independent pixels. It is the same as the dp unit, but it is additionally scaled according to the user's font size selection.

Is dp same as PX?

Definitions. px or dot is a pixel on the physical screen. dpi are pixels per inch on the physical screen and represent the density of the display. dip or dp are density-indenpendant pixels, i.e. they correspond to more or less pixels depending on the physical density.

What is dp and SP in Android Studio?

Scalable pixels (sp) serve the same function as density-independent pixels (dp), but for fonts. The default value of an sp is the same as the... Scalable pixels (sp) serve the same function as density-independent pixels (dp), but for fonts.


3 Answers

I recommend reading Google's definitions of dp and sp, which can be found in the Android docs, here and here.

There's also some helpful information in the wonderful Designer's Guide to DPI.

like image 184
Rob Flaherty Avatar answered Oct 21 '22 17:10

Rob Flaherty


I think the answer is going to be:

1px = 1dp = 1sp on any average monitor or mobile device.

How did I come up with this?

Because a pixel is a pixel, for andriod dp and sp are used because they are used for native apps which have to scale and the dpi of each screen is different based on device. For desktops all of this is same, off course the website has to be compatible/responsive for mobile devices but since the website loads in a browser, some additional media quires (based on guidelines) will do the job.

If anybody has some other logical conclusion, please share

like image 42
chandan Avatar answered Oct 21 '22 15:10

chandan


A safe rule of thumb is to use 1 px = 1 dp.

This should give you a good safe size on just about any device. It will appear a bit large on some devices, notably the iPad (regular).

Here's why:

"A dp corresponds to the physical size of a pixel at 160 dpi" (https://developer.android.com/training/multiscreen/screendensities.html#TaskUseD)

160 dpi means:

160 dots = 1 inch

Therefore:

160 dp = 1 inch (25.4 mm)

So when Google recommends that buttons have a touchable target height of 48 dp, they're saying that they need to be 0.3 inches (7.6 mm) tall.

So how many px is this? Well, that depends on the device.

Examples for 48 dp (7.6 mm) button height:

  • iPad mini: 48 px Why: The iPad mini screen is about 120 mm wide and uses 768 px to fill that space. You therefore need 162 px to take up an inch (25.4 mm), or 48 px for your button height of 7.6 mm.

  • Kindle Fire (7"): 43 px

  • Kindle Fire (6"): 50 px

  • iPhone: 48 px

  • Nexus 7: 48 px

  • Regular iPad: 39 px

(I may have fudged the rounding up/down a tiny bit.. I like 48 better than 49!)

Screen mm and CSS px width for examples: I calculated the screen width using the CSS px screen dimensions and diagonal length.

  • iPad mini: 1024 x 768 resolution and 201 mm diagonal = 120 mm width.
  • Kindle Fire 7": 858 x 533 resolution and 178 mm diagonal = 94 mm width.
  • Kindle Fire 6": 853 x 533 resolution and 152 mm diagonal = 81 mm width.
  • iPhone: 568 x 320 resolution and 102 mm diagonal = 50 mm width.
  • Nexus 7: 960 * 600 resolution and 178 mm diagonal = 94 mm width.
  • iPad regular: 1024 x 768 resolution and 246 mm diagonal = 148 mm width.

Note that for calculating the px height of the button you need to use the device CSS px dimensions. These numbers are not necessarily the same as the resolutions stated in the specs.

like image 5
user984003 Avatar answered Oct 21 '22 17:10

user984003