A size is a number and a unit, and the unit is a promise about the world outside the screen. Studio Notan writes its sizes in inches or in centimeters, and underneath both keeps a third unit you never see: the CSS pixel, exactly one ninety-sixth of an inch. This chapter is about that promise, and about how hard people have worked to keep it.
What it does
The ‘in’ / ‘cm’ switcher in the PAPER section chooses the unit the width and height are written in. Switching changes how the size is written, never the size: a 4-inch sheet becomes a 10.16-centimeter sheet, the same paper described in another language. The choice is kept by your browser, not by the design, so it applies to every design you open here, and a browser that has never been told starts at inches.
Inside the app, every length is counted in one unit: the CSS pixel, which the web’s standards fix at exactly 96 to the inch. The default sheet is 384 by 528 of them. A centimeter is about 37.8. The sheet may be anything from 50 to 2,000 units in each direction, which is about 0.52 to 20.8 inches, or 1.3 to 52.9 centimeters.
Because the unit is tied to the inch, the exports carry real sizes. The SVG files write their width and height in inches, while the drawing inside them stays in these units, so every program opens them at the size you designed: the default sheet’s cut lines say 4 by 5.5 inches, and its artwork 12 by 22. The PNG is drawn at 300 pixels to the inch and says so inside the file, in the field PNG provides for recording resolution, so a layout or print program places it at the right size instead of guessing. There is one limit: a phone or tablet browser can only draw a picture of about 16.8 million pixels, and the whole export frame of a large sheet at 300 dpi is bigger than that. Then the PNG is drawn as finely as fits, and the file records that resolution instead, so it still prints at the true size, a little less sharply. For the default 4 × 5.5-inch sheet that is 252 dpi; the File menu shows the figure before you export.
Why it works this way
The 96 is borrowed, not chosen. Every web browser already treats 96 CSS pixels as one inch, and SVG, the format the artwork and cut lines are written in, measures in the same unit. Keeping the app’s unit identical to the web’s means the drawing needs no conversion on the way out. Only a file’s overall size is converted, into inches, because programs disagree about what a bare SVG number means: a browser, Inkscape and most cutting software read it as a ninety-sixth of an inch, and Adobe Illustrator reads it as a point, a seventy-second, which would open a 4 × 5.5-inch sheet at about 5.3 × 7.3. Written in inches, the size means the same thing to all of them.
The conversion to inches is exact because the unit is defined from the inch. The conversion to centimeters is exact too, because since 1959 the inch itself has been defined as exactly 25.4 millimeters. A centimeter simply does not come out as a whole number of units: it is 37.795 and a bit.
The unit belongs to you rather than to the design because it is a way of reading. One person thinks in inches and another in centimeters; a design passed between them should not force either to convert. Inches are the starting point because the default sheet is an inch size.
The metaphor
The metaphor is the ruler with inches along one edge and centimeters along the other. Turn it over and the numbers you read change; the length of the thing you are measuring does not. That is exactly what the switcher does.
Where it breaks is the screen. A ruler held against the glass will almost never agree with the numbers, because what you see is scaled twice, by the zoom and by the display: at 100% the default sheet is 384 CSS pixels wide, and how many real inches those cover depends on how finely your screen is made. The numbers are true to the paper you will print or cut, not to the picture of it. Measure the print, never the screen.
A history
In art
Many old units are parts of the body. In several languages the inch is the thumb: the French pouce and the Spanish pulgada still mean both. An English statute traditionally dated to the reign of Edward II fixed the inch instead as three grains of barley, dry and round, laid end to end, and the word itself comes from the Latin uncia, a twelfth. Artists lived by such measures. Albrecht Dürer published a whole treatise on geometry and measurement for painters and craftsmen, the Underweysung der Messung, in 1525.
Standard sizes reached the easel too. In nineteenth-century France, color merchants sold canvases in numbered sizes from 0 to 120, each number in three shapes named for the pictures they suited: figure, paysage and marine, portrait, landscape and seascape. Painters across Europe composed to those numbers, and Japanese art suppliers still sell canvases by the same system. A painter asking for a ‘size 10 figure’ was naming a canvas the way you name a sheet here: by a standard both sides of the counter understood.
In printing
Printers measured type in units of their own long before the meter existed. Pierre Simon Fournier published a system of points in 1737; François-Ambroise Didot refined it in 1783, and his point spread across continental Europe; American type founders agreed on a slightly different point in 1886, a little under a seventy-second of an inch. Twelve points make a pica, and six picas make about an inch. Desktop publishing rounded it off: Adobe’s PostScript defined the point as exactly one seventy-second of an inch, and that is the point your word processor uses today.
Resolution is a printing unit too. Dots per inch measures how finely a printer can place ink. The first Apple LaserWriter, announced in 1985, printed at 300 dots per inch, and 300 is still the figure print shops usually ask for. It is the resolution of the PNG export.
In technology
The meter was the French Revolution’s answer to a country of incompatible local measures. It was defined as one ten-millionth of the distance from the North Pole to the equator along the meridian through Paris, and between 1792 and 1799 the astronomers Jean-Baptiste Delambre and Pierre Méchain surveyed that meridian from Dunkirk to Barcelona to find it. A platinum bar, the Mètre des Archives, made the result physical in 1799. The Meter Convention of 1875 turned it into an international treaty; a platinum–iridium prototype replaced the bar in 1889; and since 1983 the meter has been defined by the speed of light, now fixed at exactly 299,792,458 meters per second.
The inch was tied to the meter by industry before governments caught up. In 1930 the British Standards Institution adopted an inch of exactly 25.4 millimeters; the United States and the Commonwealth countries agreed the same value in 1959, taking effect in the United States on 1 July. Getting units wrong is not a small matter: in September 1999 NASA lost the Mars Climate Orbiter because one piece of software reported thrust in pound-force seconds and another read it as newton-seconds.
Screens added a unit of their own. The early Macintosh was designed so that one screen pixel matched one printer’s point, 72 to the inch; Windows long assumed 96. When the web needed a unit that behaved the same on every screen, CSS fixed the pixel at one ninety-sixth of an inch, a rule made final in CSS 2.1 in 2011. So the hidden unit in Studio Notan descends from all three stories: an inch, pinned to a meter, pinned to the speed of light, divided by a number chosen for screens.
In professional software
Every professional program keeps lengths in one internal unit and writes them in whichever unit you choose, just as here. Illustrator counts in points, Photoshop in pixels, and AutoCAD in a unit that means whatever you decide it means. The habit that transfers: the unit setting changes how sizes are written, never the sizes.
- Adobe Illustrator. ‘File › Document Setup’ sets a document’s units, and the Units section of the preferences sets them for strokes and type as well. Show the rulers with ⌘R (Ctrl+R) and right-click one to switch units on the spot. Any field accepts a unit typed after the number, so 2in or 50mm is converted as you press Return.
- Adobe Photoshop. Photoshop measures in pixels, and the ‘Resolution’ field in ‘Image › Image Size’ is what ties them to inches: at 300 pixels per inch, a picture 3,000 pixels wide prints 10 inches wide. It is the same arithmetic as the PNG export here.
- Autodesk AutoCAD. A drawing unit has no size of its own. You decide whether 1 means a millimeter or an inch and draw at full size; the
UNITScommand sets only how lengths are displayed and how content inserted from elsewhere is scaled. Decide before you draw, because a drawing made in millimeters and read as inches comes out 25.4 times too large. - Autodesk Fusion (formerly Fusion 360). Each design keeps its own units, under Document Settings in the Browser, and the preferences set the default for new designs. In a millimeter design you can still type a length in inches, with its unit after the number, and Fusion converts it.
- Inkscape. Its px is the same 96-to-the-inch pixel Studio Notan counts in, and ‘File › Document Properties’ sets the page size and the display units in any unit you like.
What carries over. Work in whichever unit suits the job. The pitfall is between programs, not inside one: a file whose sizes carry no unit is read in the receiving program’s own unit, so check the size of anything you open against the size you meant. File explains how Studio Notan’s exports avoid it.
Try this
- Switch to ‘cm’ and set the sheet to 10.5 × 14.8, the A6 size; then switch back to ‘in’ and read it in inches.
- Export the PNG, open it in an image viewer that shows resolution, and check that it says the resolution in the file’s name: 300 pixels per inch, or as near as the browser could draw, 252 for the default sheet.
- Print the PNG at 100% and measure the sheet in it with a real ruler.
- Export the cut lines and open the file in Illustrator, Inkscape or your cutter’s software: the document is the size of the sheet.
Going further
- Ken Alder, The Measure of All Things
- Robert Bringhurst, The Elements of Typographic Style