Relation between dp - sp and PX

css html pixels material-design
chandan picture chandan · Jul 1, 2014 · Viewed 18k times · Source

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?

Answer

Rob Flaherty picture Rob Flaherty · Jul 4, 2014

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.

Related questions

Pixels vs. Points in HTML/CSS

When creating an HTML page, should I specify things like margins with pixels or with points in CSS? Is one of them considered to be better practice than the other? Any advantages or disadvantages to either one?

Read More
How to implement responsive web design and its best practices

I have a website which uses pixel to render the pages. But when i view the website in different devices having different screen resolution the whole page will not fit into screen and if i use percentage, the page content …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More