Studio Notan LEARNING HUB
Launch Studio
Controls

Interface size

Make the tools and panels bigger, not the artwork.

Interface size makes the app’s own controls bigger and leaves your artwork exactly as it is. Three steps, ‘Normal’, ‘Large’ and ‘Larger’, scale every panel, button, label and touch target together. It is the large-print edition of the tools.

What it does

The INTERFACE SIZE section is always on the Controls tab. ‘Normal’ is 100 percent, ‘Large’ 115 percent and ‘Larger’ 130 percent. The line under it says it plainly: it scales the whole interface, not the artwork.

  • Everything in the chrome grows together – boxes, icons, text and the areas you tap or click. A button 44 pixels across at ‘Normal’ is about 57 at ‘Larger’.
  • The canvas does not change. The sheet, your shapes and the zoom level stay as they were. The canvas has its own Zoom for looking closer at the work.
  • The drawing area gives way. Bigger panels take more of the window, so on a small screen ‘Larger’ leaves less room for the sheet.
  • It is remembered on this device, in the browser’s own storage. It is not part of the design, so it does not travel in a project file or a share link. In a private window, or with site storage switched off, it works but will not be remembered next time.

After a change, everything that measures the window – the color wheel, the menus – measures again, so nothing is left sized for the old scale.

Why it works this way

Browsers let anyone zoom a page, and that is how many people with low vision make small labels readable. This app has to switch off pinch-zooming of the page itself: on a touch screen, a stray second finger used to zoom the tools right off the screen, in the middle of drawing. Taking that away left a debt, and this setting pays it. You get large controls without losing the canvas.

It scales everything, not just the text, for two reasons. The panels are laid out in fixed measures, so enlarging only the words would make them spill out of their boxes. And bigger targets are easier to hit. Fitts’s law, one of the best-tested ideas in interface design, says the time to reach a target grows with its distance and shrinks with its size; a larger interface is also a quicker and less error-prone one.

It leaves the artwork alone because a tool’s size and a work’s size are different questions. Page zoom answers both at once, which in a drawing app means a larger palette and a canvas you then have to scroll around.

The metaphor

The metaphor is the large-print book: the same words, set in bigger type, for readers who need it. Where it holds: nothing is added or removed, and nothing changes meaning. Where it breaks: a large-print book reflows onto more pages. Here nothing reflows into a new arrangement; everything simply grows, which is why the canvas shrinks to make room. A second metaphor fits the other half of the idea, changing the tool rather than the work: a magnifying glass enlarges what it is held over, whereas this enlarges the instruments and leaves the page alone.

A history

In art

This strand is thin, and it is honest to say so: artists have rarely written about the size of their tools. The nearest tradition is adapting the instrument to the body while leaving the work as it must be. Matisse, working from a wheelchair on the designs for the chapel at Vence in his last years, drew with a brush fixed to a long stick. The murals kept their scale; the tool changed to fit the artist.

In printing

Reading aids came before large print. Polished stones and lenses laid on a page were used to magnify text before spectacles, and spectacles themselves appeared in Italy late in the thirteenth century. In a sermon of 1306, the friar Giordano da Pisa said it was not yet twenty years since the art of making them was found.

Large-print publishing, as a trade, is much younger. In 1964 Frederick Thorpe founded Ulverscroft in England to republish ordinary books in type about twice the usual size, for public libraries; Agatha Christie’s A Pocket Full of Rye was among the first titles. The early volumes were big and heavy, and in 1969 Ulverscroft moved to 16-point type in normal-sized bindings, which helped large print into the mainstream. The lesson carries straight over to screens: making text bigger is only half the job if the result is awkward to hold.

In technology

The web’s accessibility guidelines put numbers on both halves of this setting. WCAG asks that text can be enlarged to 200 percent without losing content or function. Its 2023 revision, WCAG 2.2, asks for pointer targets of at least 24 by 24 CSS pixels at its main level and recommends 44 by 44 at its strictest. Paul Fitts published the experiments behind his law in 1954, measuring how quickly people could tap between targets of different sizes and distances.

The technique is a small piece of web history of its own. The CSS zoom property, which scales an element and its layout together, began as a non-standard feature of Internet Explorer and was copied by the other browsers; Firefox was the last to support it, in May 2024, and it is now being written into the standards.

In professional software

Professional programs call this UI scaling, and the ones below all keep it apart from zoom, as this app does: one setting sizes the panels, another sizes your view of the work. Some programs have their own control; others take their size from the operating system.

  • Adobe Photoshop. In the ‘Interface’ preferences, choose a ‘UI Font Size’ and tick ‘Scale UI To Font’ to enlarge the whole interface to match. The change takes effect when you restart Photoshop.
  • Adobe Illustrator. The ‘User Interface’ preferences have a ‘UI Scaling’ slider with a small preview beside it. The steps it offers depend on the resolution of your screen.
  • Autodesk AutoCAD. The interface largely follows the operating system’s display scaling. The Selection tab of the ‘Options’ dialog also sets the pickbox and grip sizes, which enlarges the targets you click on in the drawing itself.
  • Autodesk Fusion (formerly Fusion 360). Autodesk’s own advice is to change the operating system’s display scale: Fusion takes the size of its text and icons from there.
  • Blender. ‘Edit › Preferences › Interface’ has a ‘Resolution Scale’ that enlarges every button, label and icon together, much like ‘Large’ and ‘Larger’ here.
  • macOS and Windows. The system setting enlarges every program at once. On a Mac, ‘System Settings › Displays’ offers sizes from ‘Larger Text’ to ‘More Space’; on Windows, ‘Settings › System › Display’ has a ‘Scale’ menu.

What carries over. Keep interface size and zoom apart in your head. Enlarge the panels when the controls are hard to read or hit, and zoom the canvas, with ⌘+ and ⌘− (Ctrl++ and Ctrl+−) in Adobe programs, when the work is. The pitfall is scaling up on a small screen: bigger panels leave less room for the drawing, there as here.

Try this

  • Switch to ‘Larger’ and look at the canvas: the sheet and the zoom are exactly as they were.
  • On a phone, compare ‘Normal’ and ‘Larger’ for how easily you hit the switches and small buttons in the panels.
  • Reload the page: the size you chose is still there.

Going further

To look closer at the artwork rather than the tools, see Zoom.

Every chapter is about something you can do in the studio, free, in the browser.

Try it in the studio