Recently I’ve been reading articles about design, and I keep mixing up some of these units. So I need note them here.
The two most basic units
pt stands for point. It’s a common unit in the printing industry, equal to 1/72 inch. A pt is a physical size.
px stands for pixel. It’s the most basic dot used to display data on a screen.
Pixel density
- ppi = Pixel Per Inch, image pixel density (the number of pixels contained in one inch in an image)
- dpi = dots per inch, printing dot density (how many dots can be printed per inch, i.e. print precision)
ppi(dpi) = √(pixel_length² + pixel_width²) / screen_diagonal_inches
Google’s six broad pixel density buckets:
- ldpi (low) ~120dpi
- mdpi (medium) ~160dpi
- hdpi (high) ~240dpi
- xhdpi (extra-high) ~320dpi
- xxhdpi (extra-extra-high) ~480dpi
- xxxhdpi (extra-extra-extra-high) ~640dpi
Pixels
Device independent pixels (dip) = Density-independent Pixels (Device independent pixels). This is an abstract unit based on a screen’s physical density, using 160 PPI as the baseline.
dp*ppi/160 = px
sp = Scale-independent pixels. This is Android’s font-size unit, also using 160 PPI as the baseline.
sp*ppi/160 = px
In Android design principles, these two units are mentioned. It recommends using sp for text sizes, and dp for non-text sizes. For example: textSize="16sp", layout_width="60dp".
CSS font-relative lengths
em: “element”. The size is not fixed; it’s a relative unit (body is relative to the browser’s default font setting, and children are relative to their parent, so em inherits the parent element’s font size). You can treat it as 1em = 100%.
em * browser font size (px) = px
rem: “root element”. A CSS3 unit. The difference from em is that rem is relative to the root element’s font size.
ex: 0.5em, the height of the lowercase letter “x”
ch: the width of the digit “0”
References:
[Wireless Manual-4] dp, sp, px: Easily Confused (Full)
CC BY-NC-SA 4.0