The Measurement Units of Dots, Lines, and Surfaces that Qin Shi Huang Did Not Have Time to Unify - From Letterpress Printing, Desktop Publishing to Mobile Devices and Display Systems

(Illustration: Measure by hand what you can touch, and calculate what you can’t. Image source: Photo by Jeremy Bezanger on Unsplash.)

When developing webpages or mobile/device applications, various length and density units such as pixel, point, pt, dp, ppi, dpi, etc. are used. When the software team enters the hardware field and faces display devices such as panels and electronic paper, they will also face physical measurement units that can be touched. As the saying goes, “pixel, pt, dp, etc., can’t be distinguished”.

Because some measurement units are used in the software field and others are used in the hardware and physical fields, in order to clarify and confirm that the values of each parameter correspond to the correct measurement units, we use several “DIY Work Method” work modes to do the decomposition. In the process, we also look back to the history of mankind from the invention of printing and other history, observe or deduce the evolution of these measurement units, and record the results in this decomposition exercise note (that is, every time I use it, I forget, so I have to write notes XDD). Let’s share it and see if there are any misunderstandings. Welcome to comment and tell us 😃

(PAFERS PTI (Product & Technology Integration) colleagues brainstorming a list of all the confusing units of measure related to display information on a whiteboard. Picture source: Ernest.)

tl;dr

• 🟢 Dots on paper, pixels on display
• 📏 Multiple dots or pixels lined up can be measured in inches
• 🚥 Multiple dots or pixels lined up can be measured in dots per inch (dpi)
• 🟦 Multiple dots or pixels arranged on a plane form a pattern with width and height
• 🟢 Apple iOS at 72 ppi: 1 pixel = 1 px = 1 pt = 1 DTP point
• 🟢 Google Android at 160 ppi (mdpi): 1 pixel = 1 px = 1 dp = 1 sp

Points, Lines, and Surfaces

We often hear about “points, lines, and surfaces” since childhood, and this concept extends to various mediums such as paper and screens that present information in a two-dimensional form.

• When we talk about “points 🟢,” we can imagine taking a pointillist painting and observing it up close, seeing the individual dots that make up the lines or shapes within the artwork. These dots can vary in size, and the distances between them can be short or long.
• When we talk about “lines 📏,” we can imagine arranging multiple points on the same straight line, forming a line that can be measured using length units.
• When we talk about “surfaces 🟦,” we can imagine arranging multiple points on the same plane, forming an area that can be calculated using length units in two directions.

Returning to the concept of “points, lines, and surfaces,” let’s use a tupao brainstorming technique, the vomiting method, to write down all the terms, units, English words, and Chinese characters we know or have heard of on a whiteboard (or paper). Then, one by one, we look up their definitions, finding the relationships between them (historical order, formula calculations, etc.).

Now, let’s break it down and introduce them in chronological order:

Typography

“The precursor of movable type can be traced back to around 2000 BCE in the Uruk and Larsa regions of Mesopotamia, where uneven imprints on bricks were seen as a possible prototype of movable type.” ¹

“The earliest movable type used for typesetting originated in the Song Dynasty of China and was invented by craftsman Bi Sheng. Bi Sheng’s movable type was made of clay, and this technique was used until before the Qing Dynasty. Wang Zhen of the Yuan Dynasty was a pioneer of wooden movable type, which had better durability compared to clay type. Metal movable type also originated in East Asia, but it can be determined that this technology did not spread farther west than Central Asia.”

“The modern letterpress printing process using lead type was invented by Gutenberg in 1439 and is still in use today. The first book printed using this technique was the Gutenberg Bible.”

📏 Points

Points ² are a unit of measurement in typography. It is not a small dot in the “points, lines, and surfaces” concept.

For example, it is better understood as “This is an A letter in 8-point font,” which conveys a length rather than eight small dots.

• “In typography, the point is a unit of measure used to represent the size of a font and other layout elements such as leading. The length of 1 point has had different definitions throughout history in various regions and eras as a specialized unit in the printing industry.”
• “It is a unit of length used in typography to represent font sizes and other layout elements, such as leading, within a printed document. The length of 1 point has not been standardized and has varied across time and geographic regions.”
• Between the 1700s and 1900s, there are many fascinating stories about points. If you’re interested, you can further explore or I can organize an article later (Old High mode activated). ³ is a good starting point for research.

Length Units

Paper, screens, and other flat media can be broken down into individual, tiny basic units, and when these units are lined up, they form “length” ⁴.

📏 Inch

The word “inch” ⁵ first appeared in the 7th century and had different lengths in various regions. The image below shows a conversion chart for inches from the mid-19th century ⁶. In this article, we discuss the post-1950s inch, which is a unit of length established after the establishment of the International System of Units (SI) ⁷.

• “The inch (symbol: in or double prime symbol ″ ⁸) is a unit of length in the British imperial and the United States customary systems of measurement. It is equal to 1/36 yard or 1/12 of a foot.”
• “Standards for the exact length of an inch have varied in the past, but since the adoption of the international yard during the 1950s and 1960s, it has been based on the metric system and defined as exactly 25.4 mm.” (2.54 cm)
• “The inch is a unit of length in the British imperial and United States customary systems of measurement. It is defined as ​1⁄12 of a foot and is equal to 25.4 millimeters or ​1⁄36 of a yard.”
• “The inch is defined as exactly 25.4 millimeters.”

Desktop Publishing

“Desktop publishing was first developed at Xerox PARC in the 1970s.” ⁹

Desktop publishing was first developed in the 1970s at Xerox PARC. In the 1980s, Aldus PageMaker, a software using Adobe PostScript technology on the Apple Macintosh platform, achieved WYSIWYG (What You See Is What You Get) desktop publishing. Aldus was later acquired by Adobe, and PageMaker gradually evolved towards InDesign.

📏 Points

The points at this time were already different from the points in traditional typesetting, as they were based on the international inch. The DTP point (DeskTop Publishing point) was defined.

• “Following the advent of desktop publishing in the 1980s and 1990s, digital printing has largely supplanted letterpress printing and has established the DTP point as the de facto standard. The DTP point is defined as 1/72 of an international inch (1/72 × 25.4 mm ≈ 0.353 mm).”
• “In the 1980s and 1990s, the DTP point was widely used in desktop publishing software. 72 points are equal to 1 inch (1 point = 127/360 mm = 0.352777… mm).”

Density Units

🚥 Density

Next, let’s discuss density.

With dots and lengths, we can further develop into an area. Density refers to the amount of something within a unit area. For example, population density measures how many people are in a unit area (e.g., per square kilometer).

Later on, we will see density units like dpi and ppi, which represent the number of dots within a unit length (e.g., per inch). Why do we use unit length instead of unit area? It is speculated that a single dimension is easier to understand compared to two dimensions.

If we consider a dot as a square in physical implementation, where the X and Y directions are equal in length, we can simplify the two-dimensional density per unit area to a one-dimensional density per unit length.

Imaging Printing & Scanning

🟢 Dot

This dot can be imagined as the smallest unit that inkjet or laser printers can produce on paper. It consists of many small dots forming an image or a line of text. This dot is a counting unit, not a length unit. Later, when we move to display devices, it corresponds to pixels.

• An individual dot that is going to form a video or image.

🚥 DPI (dots per inch)

DPI ¹⁰ is used to describe the level of detail or density in digital images, artwork, videos, or scanning devices. For example, when printing an illustration on paper using a printer or scanning a photograph into a computer using a scanner, the level of detail can be determined by the DPI specification. DPI represents the number of dots that can be placed within a fixed unit length, such as 1 inch, so a higher DPI value indicates a finer image quality.

• “Dots per inch (DPI, or dpi) is a measure of spatial printing, video or image scanner dot density, in particular the number of individual dots that can be placed in a line within the span of 1 inch (2.54 cm).”
• “Similarly, the more newly introduced dots per centimetre (d/cm or dpcm) refers to the number of individual dots that can be placed within a line of 1 centimetre (0.394 in).”

🟦 Digital imaging

Digital imaging ¹¹ emerged in the 1960s-1970s and primarily involves capturing or photographing images using photosensors such as CMOS or CCD. These images are then stored digitally and can be displayed on digital displays or printed on paper.

Display device

A display device ¹² is a visual output device that presents visual information. Let’s discuss two typical types of display devices: cathode ray tube (CRT) ¹³, which was widely used from the 1930s to the 1990s, and light-emitting diode (LED) displays ¹⁴, which became mainstream in the 2000s.

Here, we will focus on LED displays. In simple terms, imagine an LED as a tiny light-emitting unit, with each primary color having its own small LED. These LEDs are combined to form a square display pixel. When these pixels are arranged in an orderly manner on the same plane, they create a display panel. Combined with backlight modules, touch modules, power modules, and other components, they form the displays we see in mobile phones, tablets, laptops, and other devices.

🟢 Pixel (px)

• A group of LEDs forming a single pixel. For example, a group of three primary color LEDs combined to create one pixel.
• In simple terms, a pixel can be considered as the smallest display unit on a display panel.

📏 Pixel Pitch (mm)

Pixel pitch ^{15 16} is the distance between the center of two adjacent pixels, measured in millimeters (mm).

• “Pixel pitch, as a technical measure, is the distance in millimeters from the center of an LED cluster or package to the center of the next LED packages above, below, and beside it.”
• The measurement unit is millimeters (mm).

🚥 Pixel Density (PPI) (pixels per inch)

• Even though two manufacturers implement a display panel with the same resolution of 100px*100px, the physical dimensions of the final products may differ.
• Therefore, when measuring the length of the panel using real-world length units such as inches and calculating the number of pixels within that unit length, we can determine the pixel density in pixels per inch (PPI) ¹⁷.

🟦 Resolution

• Native resolution (HxV, or WxH)
• Resolution of an image file.

Mobile System

Mobile devices (e.g., smartphones, tablets) inherit the production technologies from desktop computers and laptops but further reduce their size and weight. The concept of input/output devices and key components remains the same, including display devices.

In June 2007, Apple iOS, a mobile operating system, was first released, followed by the introduction of Android on the HTC Dream (also known as T-Mobile G1) in September 2008. (On a side note, I once owned a second-hand G1.)

At this time, operating systems needed to address one challenge: how to enable software developers and designers to create graphics and present user interfaces in a consistent development experience without having to know the hardware specifications of the display devices used on different phones or tablets. (Even phones of the same generation, such as the iPhone 13, may use display devices from different suppliers.)

In the software world, when both sides of an equation are unknown, it is common to introduce an intermediary who can establish the correspondence or translation. This intermediary typically requires a baseline for alignment, just like lining up in a queue at school or doing morning exercises, aligning to the center line and looking to the right. Once aligned, variations can be made based on this baseline. In the digital environment, these variations are often related to the number 2. Therefore, they are usually multiples of 2 for increasing (or finer) changes or multiples of 2 for decreasing (or coarser) changes.

Thus, in the specifications of display hardware and operating systems, there is an intermediary known as the “Device-independent pixel” ¹⁸.

📏 Device-independent pixel

• “A device-independent pixel (also: density-independent pixel, dip, dp) is a unit of length.”
• “A typical use is to allow mobile device software to scale the display of information and user interaction to different screen sizes. The abstraction allows an application to work in pixels as a measurement, while the underlying graphics system converts the abstract pixel measurements of the application into real pixel measurements appropriate to the particular device.”

Apple iOS

🟢 1 pt

According to Apple iOS: at 72 ppi.

• 1 pixel = 1 px = 1 pt = 1 DTP point

🚥 iOS Scale Factor

@1x, @2x, @3x.

• iOS Docs: Human Interface Guidelines > Image Size and Resolution

Google Android

🟢 1 dp

In Google Android OS-based devices with a density of 160 ppi (mdpi),

• 1 pixel = 1 px = 1 dp = 1 sp

🚥 Android Density Qualifier

Android Density qualifier: ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi, tvdpi

• Android Docs:
  • Screen compatibility overview  |  Android Developers
  • Support different pixel densities |  Android Developers

FAQ

Q: Why do we need so many different units of measurement to describe the length/density of print publishing or digital images?

• Different problems require different solutions in different contexts and timeframes, which correspond to different units of measurement. However, the basic premise is to have a smallest unit to indicate the length, size, or level of detail of the tangible objects we encounter or the images we see. In the search for this smallest unit, the available methods at the time are often chosen.
  • Looking back at the historical context, humans started with letterpress printing, where they needed points. 👉 These points had different lengths in different regions, and international communication was still in its early stages.
  • As time progressed, print publishing evolved to use computers for digital document production, leading to the introduction of DTP points (DeskTop Publishing points), which became a standardized unit for the computer printing industry. 👉 This DTP point standard was developed by John Warnock ¹⁹ and Charles Geschke ²⁰ while they were creating Adobe PostScript.
  • With the advent of computers, the need for display screens emerged. If we simply divide modern display screens into panels and backlight units, defining pixels as the smallest units composed of three-color LEDs seems reasonable. This allows us to convey the number of pixels that make up a panel and the density based on the distances between these pixels. 👉 This is a physical unit, a hardware unit that we can physically touch. In theory, with the help of appropriate tools, we can dissect any display panel down to the level of individual pixel components (we could go even further to LEDs or lower-level components, but let’s stop at the pixel level for now). (Are you okay with that? Shall we start dissecting? LOL)
  • Once we have the hardware, the next step is to enable software to handle it. Typically, the solution is mapping. If condition A is met, use method A or formula A; if condition B is met, use method B or formula B.
  • As a result, in mobile operating systems, both Apple iOS and Google Android adopt their own mapping methods. iOS uses pts (DTP points) to map to the hardware pixels, while Android uses dp to map to the hardware pixels.
• Going back to the era of letterpress printing that used points, different regions used points with different lengths (despite the same name). However, the mindset was the same: to create a mapping relationship in software applications that corresponded to the hardware layer. In the era of letterpress printing, the hardware layer was paper and metal type, while the software layer was the tools used for typesetting.

Q: How can we remember all these units and terms more easily?

• I also struggle with this issue. Often, when I thoroughly investigate and understand something, it becomes the most memorable. However, the next day, I forget a large portion of it, and months later, when I need to use the information again, I have to look it up all over again, which can be time-consuming. To address this, I create a mnemonic story to package this information in a memorable way. The next time I need it (hopefully), I can simply unpack it and use it right away. 😄
• Going back to the “point, line, area” concept we mentioned earlier, I think it’s a good framework. I categorize and remember them using several emoji icons.
  • 🟢 Dots on paper, pixels on display panels
  • 📏 Many dots or pixels arranged in a line, measured in inches
  • 🚥 Many dots or pixels arranged in a line, density calculated in inches
  • 🟦 Many dots or pixels arranged on a plane, with X and Y directions indicating the number of dots or pixels, i.e., width x height.
  • 🟢 Apple iOS at 72 ppi: 1 pixel = 1 px = 1 pt = 1 DTP point
  • 🟢 Google Android at 160 ppi (mdpi): 1 pixel = 1 px = 1 dp = 1 sp

Q: As a software engineer, how can I use these units in my projects?

• Determine the density (ppi), then determine the length (inch), and finally determine the resolution (px).
• One of the factors to consider when determining density is the hardware environment in which your software project will be executed, including the dpi/ppi specifications of the display device.
• If possible, collect various hardware environments that may run your software project and conduct tests on them. This is an opportunity to obtain dpi/ppi specifications of the display devices.
• If the operating system layer doesn’t handle Device-independent pixels mapping for you, such as in embedded systems, you may need to do it manually (or ask someone to do it).

Q: As a product manager, what impact do these units have on my project?

• At a minimum, they can affect the project timeline, and at a larger scale, they can impact inventory and materials. Usually, they will have some impact on the project timeline, often resulting in an increased duration.
• If possible, collect various hardware environments for this project and provide them to the design and engineering teams for confirmation. Confirm the display device specifications and the operating system settings. Even if the suppliers are the same, double-check everything because names and version numbers may vary. Trust your own eyes.
• If you cannot access all hardware environments and are uncertain about your understanding, try sketching and simulating various scenarios on paper. Because the points do not disappear, they just transform into what the operating system prefers (pt/dp/sp), ultimately mapping to hardware pixels that light up the corresponding LEDs and reach the user’s eyes.

Q: As a project manager, how can I utilize these units in communication?

• Ensure that the project team uses a consistent communication dictionary. This is as important as defining the project scope and confirming project team members.
• Play games like “Is my AAA the same as your AAA, or is it actually your BBB?” for confirmation. Set small goals, such as displaying the company logo on three specified different devices, and invite everyone to open their software and practice it practically.
• Before communication, doing your own homework is also a good approach, such as reading the reference materials cited in this article.

Q: How can app designers and app engineers collaborate effectively?

• The key to efficiency is finding a feasible workflow and approach, and then practicing and implementing it multiple times. Only through continuous practice can you gradually accelerate and optimize to improve efficiency. In this process, it’s beneficial to have cross-domain knowledge and understand each other’s work tasks, commonly used terms, and details.

Q: Are there more reference materials available about these units?

• px, pt, dp, sp大混戰 · 嫁給RD的UI Designer
• UI/UX｜第一次設計App：寫給菜逼的新手指南. 那天一翻兩瞪眼我才明白，學怎麼設計… | by H.Ching｜林筱晴 | AAPD — As A Product Designer | Medium

Tools

DPI/PPI Calculator

https://www.sven.de/dpi/