Logo Usage Guidelines: Spacing and Size Rules That Hold Up

A logo that looks balanced on a presentation slide can become unreadable in a navigation bar. Clear space protects its silhouette; minimum size protects its details. Treat these as separate constraints, then test them together in the places where the identity actually appears.

Start with the artwork, not its export box

Clear space is the exclusion zone around visible artwork. It is not whatever transparent margin happened to survive an export. A padded SVG and a tightly cropped PNG can display the same mark at very different apparent sizes when both receive the same CSS width.

Inventory the horizontal lockup, stacked lockup, symbol and any approved tagline version. Record each asset's visible proportions. Use the image resizer calculator to calculate proportional dimensions for proposed placements before producing exports. It helps with sizing arithmetic, but visual inspection still determines whether a mark survives.

Start with three real placements: a mobile header, a partner logo strip and a presentation footer. These expose different constraints. The header limits width, the strip introduces neighbouring identities, and the footer often reveals that a tagline has become too small to read.

Do not include invisible export padding in the stated logo width. Write down whether measurements refer to the artwork or the container, and use that convention consistently throughout the guide.

Define a repeatable exclusion zone

Choose a measurement that travels with the logo. A square symbol might use one quarter of its width as unit x. A wordmark might use the cap height of a particular letter. Avoid defining x through a tiny feature that disappears at small sizes or is difficult for partners to identify.

For an illustrative horizontal lockup with a 24-pixel symbol, define x as 6 pixels and require at least x on every side. Its 120-by-24-pixel visible artwork then needs a minimum 132-by-36-pixel protected area. Those numbers are an example, not an industry standard.

Show the measurement on a diagram in the source brand guide, and accompany it with text that survives copying into a ticket. State which objects must stay outside the zone: text, borders, other marks, image focal points and container edges. Background colour can extend through the zone; competing content cannot.

Optical alignment may need a separate note. A curved symbol can appear slightly inset beside a straight text edge even when their mathematical boundaries align. Allow a documented optical adjustment rather than encouraging arbitrary nudges. The principle resembles the distinction between perceived and measured spacing discussed in Nielsen Norman Group's visual design guidance.

Find minimum sizes through failure tests

Minimum size is the smallest approved reproduction at which essential characteristics remain intact. It is not the smallest file you can export. Test each lockup independently because a symbol, a wordmark and a tagline have different failure points.

Make a contact sheet at actual display size, perhaps using wordmark widths of 160, 140, 120, 100 and 80 CSS pixels. Inspect counters, thin strokes, spacing and any similar letter pairs. Ask someone unfamiliar with the company to read the name without zooming. Record the first size that fails, then choose a conservative approved size above that boundary.

Evaluate ordinary-density screens as well as high-density ones. A 240-pixel raster file displayed at 120 CSS pixels can improve sampling on a high-density display, but it does not make a physically tiny tagline readable. Keep export resolution separate from displayed dimensions.

Print requires another test. Produce a sheet at actual millimetre sizes and use representative stock and printing conditions. An office laser print is useful screening, not proof that embroidery or uncoated packaging will reproduce fine gaps. Record production-specific exceptions rather than pretending one digital threshold applies everywhere.

Implement protected space in website components

Keep the asset and its protected wrapper conceptually separate. Use layout padding to reserve space when the file is tightly cropped. If the file already includes approved padding, do not add the same exclusion zone twice. MDN's box model guide is useful when designers and developers disagree about which dimensions include padding.

The following component assumes tightly cropped artwork with a 5:1 aspect ratio. Its 7-pixel padding is an example tied to a 28-pixel artwork height, not a universal logo token.

.brand-home {
display: inline-flex;
padding: 7px;
flex-shrink: 0;
}
.brand-home img {
display: block;
width: 140px;
height: auto;
}

A narrow header must switch to an approved compact lockup before it violates the wordmark's minimum width. Do not solve overflow by squeezing the mark or clipping its whitespace. Coordinate the switch with the actual navigation content rather than choosing a breakpoint solely from a device label.

A home-link logo also needs an accessible name. Use suitable image alternative text, avoiding duplicate labels when adjacent text already names the brand. Follow the WAI image decision tree for the particular context. Clear space is not a replacement for link focus visibility or an adequate interaction area.

Publish rules partners can actually follow

A useful delivery package contains approved lockups, measurement definitions, minimum sizes and placement examples. It also lists prohibited transformations: stretching, rotating, adding outlines, rebuilding lettering and separating a symbol from a fixed lockup without permission.

Provide a partner-ready file whose built-in padding makes ordinary placement safer, alongside a tightly cropped production master. Name them distinctly. Otherwise a partner may crop the padded version while an engineer accidentally doubles its spacing. The workflow in organising digital assets helps keep those exports identifiable.

For a sponsor strip, align identities by perceived visual weight rather than forcing every asset into the same visible width. Respect each participant's exclusion zone. If the strip cannot accommodate the largest minimum size, change the layout or obtain an approved alternative instead of quietly violating the rules.

Assign an owner for exceptions and record the surface, reason and approved asset. A small wearable badge might need a simplified symbol, while a legal document needs the full name. Neither exception should silently become the new master. Keep the rules close to the reusable components through documented design tokens, while preserving the visual examples that explain their intent.

Key takeaways

• Measure visible artwork, not accidental export padding.
• Define one reproducible spacing unit for each approved lockup.
• Test minimum sizes on actual screens and representative print outputs.
• Separate display size, raster resolution and protected container dimensions.
• Offer approved compact alternatives instead of shrinking every detail.
• Publish clear ownership and an exception process alongside the assets.