title: How a CSS pixel size is calculated?
body: <p>While delving into CSS units I've encountered a definition of the reference pixel. However, I wasn't able to find a consistent and comprehensive description of its relation to the CSS pixel unit. I've done some research on this matter, yet it's still a little bit unclear to me. </p>
  
  <h1>1. Gathered information</h1>
  
  <hr>
  
  <h2>1.1 A pixel definition</h2>
  
  <p>There are two distinct types/definitions of a pixel:</p>
  
  <blockquote>
    <p><b>"Device pixel"</b> — a single physical point on a display.</p>
  </blockquote>
  
  <p>And:</p>
  
  <blockquote>
    <p><b>CSS pixel </b> — a unit most closely matching the reference pixel. [<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" rel="noreferrer" title="w3.org">1</a>]</p>
  </blockquote>
  
  <p>Two parallel concepts under the same name definitely don't clarify the confusion.
  I fully understand the purpose of introducing the second one, but I find its nomenclature misleading. The CSS pixel is classified as an absolute unit and:</p>
  
  <blockquote>
    <p>"Absolute length units are fixed in relation to each other." [<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" rel="noreferrer" title="w3.org">1</a>]</p>
  </blockquote>
  
  <p>The above statement seems pretty obvious for every unit except for the pixel. Following the w3c specification:</p>
  
  <blockquote>
    <p>"For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel.</p>
    
    <p>(...) Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels." [<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" rel="noreferrer" title="w3.org">1</a>]</p>
  </blockquote>
  
  <p>Considering the aforementioned quotation I assume that absolute units are not all that absolute, since they may be anchored to the reference pixel. </p>
  
  <hr>
  
  <h2>1.2 The reference pixel</h2>
  
  <p>The reference pixel itself is actually an angular measurement [<a href="http://www.inamidst.com/stuff/notes/csspx" rel="noreferrer" title="inamidst.com">2</a>]:</p>
  
  <blockquote>
    <p>"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees." [<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" rel="noreferrer" title="w3.org">1</a>]</p>
  </blockquote>
  
  <p>What is illustrated on the image below:</p>
  
  <p><img src="https://i.stack.imgur.com/Bt7fa.png" alt="enter image description here"></p>
  
  <p>Despite defining the reference pixel as a visual angle, we can further read:</p>
  
  <blockquote>
    <p>"For reading at arm's length, <b>1px thus corresponds to about 0.26 mm (1/96 inch)</b>."</p>
  </blockquote>
  
  <p>Leaving inconsistencies aside, we are able to establish a value of the angle:</p>
  
  <pre><code>α = 2 * arctan(0.026/142) = 0.02098°
  
  where:
      α — a value of the visual angle
  </code></pre>
  
  <p>Thus a size of the displayed unit equals:</p>
  
  <pre><code>y = 2x * tan(0.01049°)
  
  where:
      y — a displayed unit size
      x — a reading distance
  </code></pre>
  
  <p>Given the above formula, in order to calculate a unit size we need to determine what's the actual reading distance. As it may vary among users, its categorisation has been based on a device's DPI.</p>
  
  <h3>1.2.1 DPI</h3>
  
  <p>For convenience, let's assume that <code>DPI == PPI</code>.  </p>
  
  <p>This measurement allows us to guess a display type. 
  Quick check:</p>
  
  <ul>
  <li>IPhone 6 (<b>4.7"</b>, 1334×750): <b>326 ppi</b>;</li>
  <li>Sony Bravia 4K (<b>54.6"</b>, 3840×2160): <b>75 ppi</b>. </li>
  </ul>
  
  <p>So, in general, the bigger PPI the closer to a screen a user sits. The table below [<a href="http://www.hacks.mozilla.org/2013/09/css-length-explained" rel="noreferrer" title="hacks.mozilla.org">3</a>] presents reading distance recommendations for devices with particular DPI:</p>
  
  <pre>
                 ———————————————————————————————————————
                |  <b>DPI</b>  | <b>Pixel size</b> | <b>Reading distance</b> |      
   —————————————————————————————————————————————————————
  |<b>PC's CRT</b>     |  96   | ~0.2646 mm |     ~71 cm       |     
  |<b>display</b>      |       |            |                  |
   —————————————————————————————————————————————————————
  |<b>Laptop's LCD</b> |  125  | 0.2032 mm  |     ~55 cm       |
  |<b>display</b>      |       |            |                  |
   —————————————————————————————————————————————————————
  |<b>Tablet</b>       |  160  | ~0.159 mm  |     ~43 cm       |
   —————————————————————————————————————————————————————
  
  </pre>
  
  <p>However, it's unclear to me how those distance values were obtained. Is the relation to DPI described with a function or is it just an empirical observation?</p>
  
  <h3>1.2.2 Device Pixel Ratio</h3>
  
  <p>The introduction of the Retina display complicated the matter even further. Its PPI tends to be approximately 2 times bigger than non-Retina one's, while a recommended reading distance should remain the same.
  Since a CSS pixel size doesn't necessarily correspond with a device pixel size, I assume that the unit size on the Retina display is firstly translated into a reference pixel <b>size</b> (expressed in device pixels) and then multiplied by pixel ratio. Is it correct?</p>
  
  <h3>1.2.3 Zooming</h3>
  
  <p>While zooming in, the displayed reference pixel size grows [<a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html" rel="noreferrer" title=" quirksmode.org">4</a>], ergo a distance from a display grows. It's quite counterintuitive, because it means that we are "stepping away" from the screen, not getting closer to it.</p>
  
  <hr>
  
  <h1>2. Questions</h1>
  
  <hr>
  
  <p>Concluding my doubts and articulating questions:</p>
  
  <ol>
  <li>How a CSS pixel size is calculated when the anchor unit is a physical unit?</li>
  <li>How to establish the formula for a relation between DPI and a reading distance?</li>
  <li>How a CSS pixel size is calculated for non-standard, high DPI/PPI devices such as printers and Retina Displays?</li>
  </ol>
  
  <p>Also, please correct me if my reasoning is invalid or I am missing something. Thanks for replies.</p>
  
  <hr>
  
  <h1>3. References</h1>
  
  <hr>
  
  <ol>
  <li>W3C Specification</li>
  <li>inamidst.com, Sean B. Palmer's site</li>
  <li>Mozzilla Hacks</li>
  <li>1uirksmode.org</li>
  </ol>