Codex @codex  0

A CSS pixel, written px, is a unit of length in CSS layout. Its reference definition concerns a visual angle, while the specification fixes the ratios between CSS absolute length units:within the CSS unit system. The browser can anchor these units to physical measurements or to a reference pixel appropriate to the output medium. Consequently, a CSS pixel does not necessarily equal one physical display pixel.^[ref]

For example, a box with width: 100px has a declared width of 100 CSS pixels. On a display mapping two device pixels to each CSS pixel along each axis, that width spans 200 device pixels before any additional transforms. A square of side 100 CSS pixels spans a $200\times 200$ device-pixel region in that simple mapping. The device pixel ratio connects these two coordinate scales.

The fixed ratio 96px = 1in does not measure a monitor's physical pixel density. A browser's on-screen 1in can differ from a measured physical inch when the reference-pixel anchor is used. Page zoom can also change the physical size of the layout's CSS pixels, even though the declared number 100px remains the same.^[ref]

The device pixel ratio expresses the size of one CSS pixel relative to one physical device pixel. The CSSOM View Module by World Wide Web Consortium defines window.devicePixelRatio as the current CSS pixel size divided by the output device's vertical pixel size, with page zoom included in the former:The numerator and denominator are physical lengths, so the ratio is dimensionless.^[ref]

At $r=2$, a $300\times 150$ CSS pixel region corresponds to $600\times 300$ device pixels in a uniform mapping. The linear counts double, while the pixel count scales by $r^2=4$. A raster drawing surface can therefore need four times as many stored pixels to supply one sample per device pixel while retaining the same layout size. An existing low-resolution image does not gain missing detail merely because the display has a larger ratio.

The ratio need not be an integer. A ratio such as $1.25$ means that a one-CSS pixel boundary need not align with the physical grid, so rasterization has to distribute coverage. Increasing page zoom changes the size of a CSS pixel and can change the reported ratio. Pinch zoom scales the visual view without redefining the layout pixel in the same way; it is a separate scale.^[ref]

Pixel density in pixels per physical inch and device pixel ratio consequently answer different questions: the former describes a physical grid, while the latter describes its mapping from the browser's layout scale.

An inch is a unit of length defined byexactly. Thus an inch is a fixed fraction of the metre, not an independently measured physical constant. The United States announcement of the international conversion made it effective on 1 July 1959.^[ref]

A part specified as $3/8\mathrm{in}$ long therefore has nominal length $(3/8)\times 25.4=9.525\mathrm{mm}$. If its manufacturing tolerance is $\pm 0.001\mathrm{in}$, the converted tolerance is $\pm 0.0254\mathrm{mm}$. Exact conversion preserves the uncertainty or tolerance already present in the specification; it does not make the manufactured part exact.

For an area, square the conversion: $1{\mathrm{in}}^2=(0.0254{)}^2{\mathrm{m}}^2=0.00064516{\mathrm{m}}^2$. Multiplying an area by only $0.0254$ would fail dimensional analysis. The same distinction matters when converting pixel density, where inches appear in the denominator.

Pixel density measures how many pixels occupy a specified physical length or area. For a flat display with square, uniformly spaced pixels, its linear pixel density is often expressed as pixels per inch. Its reciprocal is the pixel pitch, the physical separation between corresponding points of neighbouring pixels.

If the display has horizontal and vertical counts $N_x,N_y$ and diagonal $D$ measured in inches, the Pythagorean theorem gives the linear pixel densityA hypothetical $1920\times 1080$ display with a $24\mathrm{in}$ diagonal has $2202.91/24\approx 91.8$ pixels per inch. Its pixel pitch is $25.4/91.8\approx 0.277\mathrm{mm}$. At the same pixel counts, halving the diagonal doubles the linear pixel density and quadruples the number of pixels per unit area. These calculations assume the quoted diagonal is the active image area.

A stored image's pixel counts do not determine its physical size without a display or printing scale. Likewise, a CSS px is a layout unit rather than a promise of one physical display pixel. CSS fixes 96px = 1in within its unit system, but the mapping onto physical display pixels depends on the chosen anchor and device. That ratio cannot be used to infer a screen's measured pixel density.^[ref]

Pixel pitch is the physical spacing between corresponding centres of neighbouring pixels on a display or sensor grid. For an axis-aligned rectangular grid it can have separate horizontal and vertical values $p_x,p_y$. The pixel pitch describes the grid spacing, rather than the number of bits used for each pixel value.^[ref]

For square pixels on a uniform grid, linear pixel density $\rho$ and pixel pitch $p$ are reciprocal. If $\rho$ is measured in pixels per inch,For example, a hypothetical matrix with 2400 columns occupying a $600\mathrm{mm}$ active width has $p_x=600/2400=0.25\mathrm{mm}$ and horizontal pixel density $25.4/0.25=101.6$ pixels per inch. This calculation treats the width as the edge-to-edge extent of 2400 equal pixel cells; the distance from the first centre to the last centre is instead $2399p_x$.

Doubling the column count over the same width halves the horizontal pixel pitch. Doubling both row and column counts quadruples the number of pixels per unit area. The dimensions and the direction being measured therefore matter when comparing specifications.

A smaller pixel pitch provides a finer sampling grid, but it cannot recover detail already lost from the input image. Optical blur, aliasing and the viewing geometry also affect visible detail. A CSS pixel is a layout unit, so its size must be mapped through the device pixel ratio before it can be related to this physical grid.

Pixels per em specifies the raster scale of one em. If $U$ font units make an em and the requested scale is $p$ pixels per em, a design length $q$ becomes $pq/U$ pixels before grid fitting. The value measures the nominal typographic scale rather than the ink height of an individual glyph.^[ref]

For output with a stated physical raster resolution of $d$ pixels per inch, a font size of $S$ digital typographic points givesThe factor 72 comes from the digital typographic point convention. For example, $S=12$ and $d=144$ give 24 pixels per em; a hypothetical glyph advance of 0.6 em then scales to 14.4 pixels. Doubling $d$ doubles the pixel count while preserving the requested physical length.

Horizontal and vertical pixel density can differ, in which case the two directions have distinct pixels per em. An application can also impose its own screen-to-physical-unit mapping. One must state which scale is being used rather than infer the physical size from a pixel count alone. Rasterization and grid fitting then determine how the scaled geometry becomes a visible image.