Q
The quarter-millimeter, a unit taken from Japanese phototypesetting.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 63+ |
| Chrome Android | 63+ |
| Edge | 79+ |
| Firefox | 49+ |
| Firefox Android | 49+ |
| Safari | 13.1+ |
| Safari iOS | 13.4+ |
Formula 1Q = 1/40cm = 0.25mm ≈ 0.945px
How it works
Q is the quarter-millimeter, 1/40 of a centimeter and about 0.9449px. The unit was borrowed from Japanese phototypesetting, where type was ordered by size in steps of a quarter millimeter, so a size of 13Q is 3.25mm and 14Q is 3.5mm. A size from that tradition goes into CSS as it is, with no conversion.
The letter is written as a capital by convention, but CSS unit names are not case sensitive, so 13q and 13Q are the same length. The lowercase form is not an error.
This is the unit to learn when the source material comes from Japanese print or when you maintain a stylesheet that mixes CSS with measurements from a typesetter’s spec. Printed to PDF from Chromium, @page { size: 800Q 1000Q } gave a page 200mm by 250mm. As with the other absolute units, treat the result on screen as a CSS pixel count and do not expect 13Q to be 3.25mm there: only the ratios between absolute units are reliable.
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
Type sizes carried over from Japanese print specifications, which quote them in Q.
Watch out
Support arrived late. Safari added Q in 13.1 (iOS 13.4), so older iPhones and Macs drop any declaration that uses it.
.caption {
font-size: 14Q;
}