{"course":{"slug":"visual-storytelling","title":"Making It Say Something","url":"https://addaly.com/learn/visual-storytelling","level":"beginner","track":"create"},"lesson":{"slug":"negative-space","title":"The empty part is doing the most work","url":"https://addaly.com/learn/visual-storytelling/negative-space","position":14,"of":64,"minutes":8,"answer":"Gaps are grouping instructions: keep space within a group smaller than the space around it, work in multiples of one base unit.","keyIdea":"Gaps are grouping instructions: keep space within a group smaller than the space around it, work in multiples of one base unit, and when space is unaffordable switch to small consistent gaps rather than abandoning the system."},"body":{"format":"markdown","text":"## Space is not what is left over\n\nBeginners fill space because space looks like an unfinished job. Clients ask for it to be filled because they are paying for something and emptiness does not look like something. Both are reading the space as absence, when in fact it is the mechanism by which everything else becomes readable.\n\nThe visual system groups by proximity automatically and pre-consciously. Things near each other are one thing; things far apart are separate things. That means every gap you set is a statement about what belongs with what, and if all your gaps are the same, you have stated that everything belongs with everything, which is the same as stating nothing.\n\n## The single rule that fixes most layouts\n\n**The space within a group must be smaller than the space around it.**\n\nThat is nearly the whole of it. A caption sitting 20px below its image and 20px above the next headline belongs to neither. Move it to 8px from its image and 40px from the headline and it snaps into place, and the page suddenly looks designed rather than typed. Nothing else changed.\n\nThe most common real-world version of this failure: a form where each label sits exactly halfway between its own field and the field above, so the eye has to work out the pairing from meaning rather than seeing it. That is a small tax charged to every single user of the form, forever.\n\n## Use one spacing unit\n\nPick a base (8px on screen is a common choice, or a millimetre grid in print) and use multiples of it. 8, 16, 24, 32, 48. The reason is not tidiness. It is that arbitrary spacing produces near-misses, and a 14px gap next to a 16px gap reads as an error rather than as a distinction, because the difference is too small to be intentional but large enough to be noticed.\n\nWrite the unit into the one-page brand system, alongside the type scale. In six weeks you will not remember it, and the drift between the version you made in January and the one you make in March is a large part of what makes a body of work look amateur.\n\n## Margins are not decoration\n\nThe outer margin has a specific job: it stops the composition from fighting the edge of the page. Type running close to a trimmed edge looks accidental, and in print it may actually be cut off, because commercial trimming has a tolerance of a millimetre or two in either direction. This is why bleed exists: the artwork extends past the trim line so that a slight misalignment shows more artwork rather than a white sliver.\n\nPractical figures worth carrying: for most print jobs, 3mm of bleed beyond the trim and keep anything important at least 5mm inside it. Scribus and Inkscape both let you set bleed on export to PDF, free, as do InDesign and Illustrator.\n\nOn screen the equivalent is the safe area. A vertical video at 1080×1920 loses the top and bottom to the platform's own interface (the account name, the caption, the buttons down the right side) and the exact amounts change whenever the platform updates. Keep essential type in the middle 60% vertically and away from the right edge, and check on a real phone rather than in the editor.\n\n## Active space and the thing clients will actually accept\n\nSpace stops feeling like waste when it has a shape. A block of text set against a wide, deliberate column of white on one side reads as composed; the same text centred with even gaps everywhere reads as under-filled. The difference is that the first is asymmetric and therefore obviously chosen.\n\nWhen asked to fill the space, the useful reply is not a defence of minimalism. It is a comparison: show the version with the gap and the version with something in it, printed at actual size, and let them look from two metres away. The argument is usually over in ten seconds, because at two metres the filled version has lost its headline and the empty one has not.\n\n## Where the principle runs out\n\nGenerous space is a luxury paid for in square centimetres, and some jobs cannot afford it. A classified advertisement, a product label carrying legally required text, a ballot paper, a chart with forty labelled points: in all of these the information is fixed and the space is not negotiable.\n\nThe move then is not to give up on space but to switch scale: small, consistent, ruthlessly applied gaps, with the hierarchy carried by weight and rule lines rather than by air. Dense typography done properly is a genuine craft, and it is the reason a well-set timetable is calmer than a half-empty poster with four competing headlines."},"check":{"question":"In a form, each label sits exactly midway between its own field and the field above it. Users are slower and make more pairing errors. Why?","options":[{"text":"The labels are too small relative to the fields, so they read as secondary information and get skipped.","correct":false,"tempting":"Assumes a size problem; the errors are about which field a label belongs to, which equal spacing causes at any type size."},{"text":"Forms should place labels inside the fields as placeholder text, which removes the pairing problem entirely.","correct":false,"tempting":"Offers a different pattern with well-documented problems of its own, and sidesteps rather than explains the perceptual cause."},{"text":"The form lacks visual separators between rows, so the eye has no structural cue about where one entry ends and the next begins.","correct":false,"tempting":"Proposes adding elements when the existing gaps could carry the structure unaided, which adds cost without addressing why the current gaps fail."},{"text":"Equal gaps give the grouping system nothing to act on, so the pairing has to be worked out from meaning instead of being seen.","correct":true}]},"prev":{"slug":"the-cost-of-an-element","title":"Every element you add taxes the ones already there","url":"https://addaly.com/learn/visual-storytelling/the-cost-of-an-element"},"next":{"slug":"checks-that-break-a-design","title":"Four cheap tests that fail a design before an audience does","url":"https://addaly.com/learn/visual-storytelling/checks-that-break-a-design"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'The empty part is doing the most work', in Making It Say Something. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/visual-storytelling/negative-space (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"The empty part is doing the most work","courseTitle":"Making It Say Something","module":{"index":2,"slug":"making-one-message-survive","title":"Making one message survive"},"answer":null,"keyIdea":"Gaps are grouping instructions: keep space within a group smaller than the space around it, work in multiples of one base unit, and when space is unaffordable switch to small consistent gaps rather than abandoning the system.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"space-is-not-what-is-left-over","runs":[{"text":"Space is not what is left over"}]},{"t":"p","runs":[{"text":"Beginners fill space because space looks like an unfinished job. Clients ask for it to be filled because they are paying for something and emptiness does not look like something. Both are reading the space as absence, when in fact it is the mechanism by which everything else becomes readable."}]},{"t":"p","runs":[{"text":"The visual system groups by proximity automatically and pre-consciously. Things near each other are one thing; things far apart are separate things. That means every gap you set is a statement about what belongs with what, and if all your gaps are the same, you have stated that everything belongs with everything, which is the same as stating nothing."}]},{"t":"h2","id":"the-single-rule-that-fixes-most-layouts","runs":[{"text":"The single rule that fixes most layouts"}]},{"t":"p","runs":[{"text":"The space within a group must be smaller than the space around it.","b":true}]},{"t":"p","runs":[{"text":"That is nearly the whole of it. A caption sitting 20px below its image and 20px above the next headline belongs to neither. Move it to 8px from its image and 40px from the headline and it snaps into place, and the page suddenly looks designed rather than typed. Nothing else changed."}]},{"t":"p","runs":[{"text":"The most common real-world version of this failure: a form where each label sits exactly halfway between its own field and the field above, so the eye has to work out the pairing from meaning rather than seeing it. That is a small tax charged to every single user of the form, forever."}]},{"t":"h2","id":"use-one-spacing-unit","runs":[{"text":"Use one spacing unit"}]},{"t":"p","runs":[{"text":"Pick a base (8px on screen is a common choice, or a millimetre grid in print) and use multiples of it. 8, 16, 24, 32, 48. The reason is not tidiness. It is that arbitrary spacing produces near-misses, and a 14px gap next to a 16px gap reads as an error rather than as a distinction, because the difference is too small to be intentional but large enough to be noticed."}]},{"t":"p","runs":[{"text":"Write the unit into the one-page brand system, alongside the type scale. In six weeks you will not remember it, and the drift between the version you made in January and the one you make in March is a large part of what makes a body of work look amateur."}]},{"t":"h2","id":"margins-are-not-decoration","runs":[{"text":"Margins are not decoration"}]},{"t":"p","runs":[{"text":"The outer margin has a specific job: it stops the composition from fighting the edge of the page. Type running close to a trimmed edge looks accidental, and in print it may actually be cut off, because commercial trimming has a tolerance of a millimetre or two in either direction. This is why bleed exists: the artwork extends past the trim line so that a slight misalignment shows more artwork rather than a white sliver."}]},{"t":"p","runs":[{"text":"Practical figures worth carrying: for most print jobs, 3mm of bleed beyond the trim and keep anything important at least 5mm inside it. Scribus and Inkscape both let you set bleed on export to PDF, free, as do InDesign and Illustrator."}]},{"t":"p","runs":[{"text":"On screen the equivalent is the safe area. A vertical video at 1080×1920 loses the top and bottom to the platform’s own interface (the account name, the caption, the buttons down the right side) and the exact amounts change whenever the platform updates. Keep essential type in the middle 60% vertically and away from the right edge, and check on a real phone rather than in the editor."}]},{"t":"h2","id":"active-space-and-the-thing-clients-will-actually-accept","runs":[{"text":"Active space and the thing clients will actually accept"}]},{"t":"p","runs":[{"text":"Space stops feeling like waste when it has a shape. A block of text set against a wide, deliberate column of white on one side reads as composed; the same text centred with even gaps everywhere reads as under-filled. The difference is that the first is asymmetric and therefore obviously chosen."}]},{"t":"p","runs":[{"text":"When asked to fill the space, the useful reply is not a defence of minimalism. It is a comparison: show the version with the gap and the version with something in it, printed at actual size, and let them look from two metres away. The argument is usually over in ten seconds, because at two metres the filled version has lost its headline and the empty one has not."}]},{"t":"h2","id":"where-the-principle-runs-out","runs":[{"text":"Where the principle runs out"}]},{"t":"p","runs":[{"text":"Generous space is a luxury paid for in square centimetres, and some jobs cannot afford it. A classified advertisement, a product label carrying legally required text, a ballot paper, a chart with forty labelled points: in all of these the information is fixed and the space is not negotiable."}]},{"t":"p","runs":[{"text":"The move then is not to give up on space but to switch scale: small, consistent, ruthlessly applied gaps, with the hierarchy carried by weight and rule lines rather than by air. Dense typography done properly is a genuine craft, and it is the reason a well-set timetable is calmer than a half-empty poster with four competing headlines."}]}],"check":{"question":[{"text":"In a form, each label sits exactly midway between its own field and the field above it. Users are slower and make more pairing errors. Why?"}],"options":[{"text":[{"text":"The labels are too small relative to the fields, so they read as secondary information and get skipped."}],"correct":false,"tempting":[{"text":"Assumes a size problem; the errors are about which field a label belongs to, which equal spacing causes at any type size."}]},{"text":[{"text":"Forms should place labels inside the fields as placeholder text, which removes the pairing problem entirely."}],"correct":false,"tempting":[{"text":"Offers a different pattern with well-documented problems of its own, and sidesteps rather than explains the perceptual cause."}]},{"text":[{"text":"The form lacks visual separators between rows, so the eye has no structural cue about where one entry ends and the next begins."}],"correct":false,"tempting":[{"text":"Proposes adding elements when the existing gaps could carry the structure unaided, which adds cost without addressing why the current gaps fail."}]},{"text":[{"text":"Equal gaps give the grouping system nothing to act on, so the pairing has to be worked out from meaning instead of being seen."}],"correct":true,"tempting":null}],"order":[1,3,2,0],"why":null},"prev":{"slug":"the-cost-of-an-element","title":"Every element you add taxes the ones already there","minutes":8},"next":{"slug":"checks-that-break-a-design","title":"Four cheap tests that fail a design before an audience does","minutes":8}}}