Logo Sizing for Horizontal Lockups and Responsive Layouts

The short answer

A horizontal lockup places the symbol beside the wordmark in a single row, which makes it much wider than it is tall. Because of that shape, it is usually more reliable to size it by height than by width. A fixed height keeps the wordmark at a predictable, readable size, and the width then follows from the artwork's proportions. In a responsive layout, the horizontal lockup is one of several versions, not a single file stretched to fit every screen. When the available width gets too narrow for the wordmark to stay legible, the usual approach is to switch to a stacked lockup or a symbol-only mark instead of shrinking the horizontal version further.

The source material for this article contains no specific minimum sizes, breakpoints or measurements for any particular logo. Those values belong in each brand's own guidelines. The principles below are general practice, and the exact numbers must come from the logo owner or from testing the specific artwork.

What a horizontal lockup is and how it differs from other versions

• Horizontal lockup: symbol and wordmark side by side. It suits wide, shallow spaces such as website headers, email signatures and letterheads.
• Stacked (vertical) lockup: symbol above or below the wordmark. It is more compact in width and suits narrow or square spaces.
• Symbol-only or monogram: the mark without the wordmark. It is used where text would be too small to read, such as favicons, app icons and small mobile headers.
• Wordmark-only: the logotype without the symbol, for contexts where the name carries the identity.

These versions are designed relationships, not crops. The spacing between symbol and wordmark, their relative scale and the alignment axis are set deliberately in each lockup. Rearranging the parts yourself creates an unofficial variant, and the brand owner may not permit that.

Why height is the better sizing control

If you set a horizontal lockup to a fixed width, its height, and therefore the size of its lettering, depends entirely on the aspect ratio. A long company name produces a shallow logo with small text at that width, and a short name produces a taller one. Setting the height gives you consistent control over the dimension that governs legibility and visual weight next to navigation text and other interface elements. Pair it with a maximum width so a very long lockup cannot push other header content out of place.

Minimum size works the same way. Brand guidelines often express it as a minimum height or width for each lockup. The horizontal version typically needs more total width than the stacked version before its wordmark becomes hard to read. If the guidelines give no minimum, test the artwork at the actual sizes it will appear and judge whether the smallest letterforms, thin strokes and counters remain clear. That judgment is editorial, not a documented specification.

Clear space and how it scales

Clear space is the protected margin around the logo. Guidelines commonly define it relative to an element of the logo itself, such as the height of a letter or the symbol, so the margin scales with the logo instead of staying fixed. In a responsive layout, keep that proportional relationship: as the lockup gets smaller, the required clear space shrinks with it. Decide whether clear space is built into the exported file as padding or applied in layout code, and apply that choice consistently. Mixing the two makes logos look inconsistently sized across pages.

Switching versions at breakpoints

Responsive logo systems swap lockups as space changes rather than scaling one version indefinitely. A typical progression runs from the horizontal lockup on wide screens, to a stacked lockup or a reduced-detail version on medium widths, to a symbol-only mark on the narrowest views. Where each switch happens depends on the specific artwork and layout, so the breakpoints should be chosen by checking when the current version becomes cramped or illegible. A standard number should not be borrowed for this.

Very small sizes can also call for simplified artwork, such as fewer details, heavier strokes or removed taglines, instead of a straight reduction. Only use such versions if the brand provides them or permits creating them.

Preparing the vector file for responsive use

• Trim the artboard or viewBox to the artwork, or to the artwork plus a defined clear-space margin, so stray empty space does not shrink the visible logo.
• Keep the viewBox attribute in exported SVGs. It lets the browser scale the artwork proportionally. Fixed width and height attributes can be removed or overridden with CSS.
• Outline or convert text to paths for delivery files so the wordmark does not depend on the viewer having the font installed. Keep a separate editable master with live type if the font license allows it.
• Export each lockup (horizontal, stacked, symbol-only) as its own file instead of relying on cropping one file in code.

Do not assume a file contains editable vector paths because of its name or extension. An SVG, EPS, PDF or AI file can contain an embedded raster image, and some files labeled as logos are only raster previews saved in a vector container. Open the file in a vector editor and check for selectable paths. Embedded raster content will blur or pixelate when scaled up, which defeats the point of responsive sizing. A PNG or JPG preview is useful for checking appearance but cannot be scaled up cleanly.

Example markup

The snippet below shows the height-led approach with a version swap. The custom property and the breakpoint value are placeholders. Replace them with values taken from the brand's guidelines or from testing your layout.

<picture class="site-logo">
  <!-- Placeholder breakpoint: set from your own layout testing -->
  <source media="(min-width: 48em)" srcset="logo-horizontal.svg">
  <img src="logo-symbol.svg" alt="Company name">
</picture>

<style>
  .site-logo img {
    height: var(--logo-height); /* set from brand minimums */
    width: auto;                /* width follows the aspect ratio */
    max-width: 100%;            /* stops long lockups overflowing */
  }
</style>

Permission to download is not permission to modify

Being able to download a logo file does not mean you may resize it in nonstandard ways, rearrange its parts, create a new lockup or change its colors. The artwork may be protected by copyright, the wordmark may use a licensed font, and the logo as a whole is often a registered or unregistered trademark. Use the official versions and sizing rules the owner publishes. If you need a variant they do not supply, request it or get permission first.

What this article cannot confirm

No specific logo, brand guideline or measurement was supplied, so this article gives no minimum heights, pixel values, clear-space ratios or breakpoint figures as facts. For a particular logo, get those values from its official brand guidelines or confirm them by testing the actual vector artwork in the layouts where it will appear.