A responsive logo needs decisions at real sizes

A useful logo handover tells you which version to use in each situation. It should show the name working in a narrow header, the symbol surviving a small icon, and the expressive version holding together at display scale. Ask to see those placements at their actual size before approving the identity.

The important decision is what to preserve when space gets tight. Sometimes the answer is a different arrangement. Sometimes it is removing a detail. Sometimes the drawing itself needs an optical adjustment. Exporting the same artwork at more resolutions does not make those decisions for you.

Blankout's identity gives us a concrete example. A diagonal cut passes through the large wordmark. It is part of the expression: a small interruption across a heavy set of letters. In the practical header we use the same letter outlines without that cut. The name stays consistent while the amount of visual interruption changes.

Inspect the size proof. It compares the actual plain and cut artwork, the stacked arrangement and the symbol. Keep your browser at 100% zoom to compare the labelled CSS sizes. A larger specimen scrolls inside its own panel on a narrow screen; it does not silently shrink to fit.

The detail that becomes less than a pixel

In the source drawing, the wordmark is 6,507.8 units wide. The diagonal cut leaves a vertical gap of 34 units between its two boundaries. Scale the complete mark to 160 CSS pixels wide and that gap is about 0.84 CSS pixels. At 320 pixels it is about 1.67 pixels; at 720 pixels it is about 3.76 pixels.

Those numbers describe the geometry. They do not tell us that every browser will render the smallest gap badly. Display density, rasterisation, background and viewing conditions all affect its appearance. What they do show is that a detail which has room to speak in a large composition can become a very fine interruption in a small one.

Our existing identity proof uses the plain wordmark at 160 pixels and the cut version at 320 and 720 pixels. The header also uses the plain version. That is a deliberate use rule, not a magic breakpoint at which the SVG changes itself. The component can draw either version; the placement chooses which one belongs there.

The comparison in the proof keeps the letter outlines identical. Removing the cut simplifies the treatment. It is not a demonstration of redrawing the letters for small sizes, and it is not evidence that every logo needs a simplified sibling.

Three different changes that are often called responsive

Change the arrangement. A long wordmark can occupy two lines when the available shape is taller. Blankout's stacked BLANK / OUT treatment moves the original outlines into two rows. It does not squeeze the letters to make them fit. The stack still needs enough room to read; stacking is not a way to force eight letters into a tiny icon.

Change the amount of detail. The plain wordmark removes the diagonal interruption. This preserves the name and its letterforms while making the presentation quieter. A detailed emblem might need another simplification, or none. The decision comes from its actual drawing and intended uses.

Change the drawing optically. Widening a narrow opening, adjusting a join or changing a stroke for a demanding size would alter the geometry. That work needs its own comparison and a controlled master. The Blankout example in this Note does not make those adjustments; it demonstrates arrangement and detail selection.

These choices can coexist. The handover should make clear which one each file represents. A folder containing “logo-small-final-2” leaves the next person guessing.

Test the placement, not only the page width

A wide screen can still have a small logo in its navigation. A phone can contain a large editorial mark. Choose the artwork for the actual space and task rather than assume that desktop always means the expressive version and mobile always means the symbol.

Start with the few placements the business really needs. For a studio website, that could be a header, a large opening, a footer and a browser icon. For another company it might include packaging, an invoice, a vehicle or a stitched badge. Screen proofs alone do not qualify the print or production uses.

At each placement, inspect the mark in context. Can the name be read without zooming in? Are its internal spaces still distinct? Does a thin interruption look intentional? Does nearby content compete with it? Repeat the comparison on the intended light and dark backgrounds. Reversing the colours is a new viewing condition worth inspecting, even when the paths stay the same.

The proof includes 16, 24, 32 and 64 pixel symbols. It also includes deliberately small wordmarks as a stress comparison. Those tiny wordmarks are not recommended exports. A cleanly rendered symbol is not proof that a new visitor will recognize it: the surrounding name and existing familiarity still matter.

At the other end, the 720 pixel specimens retain that width on a phone. Scroll the panel to inspect them; do not mistake that wide specimen for a proposed mobile header. A labelled 720 pixel image scaled down to 340 pixels would answer a different question.

What to ask for at handover

The smallest useful package connects each artwork file to a job. It should include the editable source, the chosen arrangements or simplifications, practical exports, background guidance and evidence of the important sizes. It should also say who maintains the source when the identity changes.

Our placement and export sheet records the Blankout examples and provides empty rows for a new commission. The existing 160, 320 and 720 pixel proof choices are references for this identity, not minimum sizes to copy into another brand's guidelines.

When reviewing your own package, ask the designer to complete a sentence for every supplied variant: “Use this when …”. Then ask to see a placement where the full master is less suitable and the selected variant helps. An honest answer may be that the same master already works. A useful system contains the variants the work needs, with reasons for choosing them.

Finally, check the exports against the source. A good proof is little use if an older icon, a different wordmark or an unlabelled reversed file reaches the actual website. The identity and its application rules have to travel together.

Approve the smallest important use as well as the biggest

The large composition sells the character. The small placement reveals what the drawing can carry. Review both before treating the identity as ready for use.

Blankout's choice is straightforward: preserve the original letterforms, reserve the cut for expressive placements, and use a simpler treatment where reading the name has priority. Your identity may need a different answer. The useful deliverable is a demonstrated decision you can apply, not a larger pile of files.

If you are commissioning an identity, bring its smallest important placement into the brief. It gives the designer a real constraint to work with and gives you something concrete to inspect at handover.

For a wider acceptance check, see what a brand handover should contain. Our brand-identity practice develops the source drawings and the rules for putting them to work.