pc
The pica: 12 points, which makes it exactly 16px.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 1+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 1+ |
| Firefox Android | 4+ |
| Safari | 1+ |
| Safari iOS | 1+ |
Formula 1pc = 12pt = 1/6in = 16px
How it works
A pica is 12 points, one sixth of an inch, and exactly 16px. The unit comes from typesetting, where the width of a column was counted in picas and the size of the type in points. Besides in, it is the only print unit that comes out as a whole number of pixels.
One fact belongs to pc alone: it equals 16px whatever the settings, while 1rem is 16px only until the reader changes the default font size. In a browser at its default they are the same size; raise the setting and they differ. With the default at 24px in Chromium, 1rem was 24px and 1pc was still 16px. If you wanted a size that follows the reader, pc looks right and is wrong.
Pica arithmetic is easy in the head: 6pc is an inch and 3pc is half an inch, which is 48px. A margin of 3pc is a handy way to leave half an inch while you tune a printed page by hand. In a PDF printed from Chromium, 6pc came out as 72 points, one inch of paper.
Try it
Convert between the absolute units
Type a length in one unit and read it in all seven. Every absolute unit is a fixed number of CSS pixels, so the conversion needs no screen.
px- 96
pt- 72
pc- 6
in- 1
cm- 2.54
mm- 25.4
Q- 101.6
The same as a table
| Unit | CSS pixels in 1 of it |
|---|---|
1px | 1px |
1pt | 1.3333px |
1pc | 16px |
1in | 96px |
1cm | 37.795px |
1mm | 3.7795px |
1Q | 0.94488px |
What changes it
- Moves with
- page zoom
- Stays put under
- the reader's text size
- the window size
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
A print layout on a pica grid, such as column widths copied from a newspaper template.
Watch out
pc and pt are easy to mix up in one rule, and the arithmetic hides: 3pc + 4pt is 53.33px.
.column {
inline-size: 20pc;
}