What is an Aspect Ratio?

An aspect ratio is simply width ÷ height, expressed as a proportion.

• 1:1 means the image is as wide as it is tall (square).
• 2:1 means it’s twice as wide as it is tall.
• 1:2 means it’s taller than it is wide.

A key point: aspect ratio is about shape, not size.

• A 200×200 image and a 1200×1200 image share the same aspect ratio (1:1).
• A 400×200 image and an 800×400 image share the same aspect ratio (2:1).

When you preserve the aspect ratio, the logo scales up or down without distortion. When you don’t preserve it, you get the classic design mistake: logos that look stretched, squashed, or “off-brand.”

In automotive UI, you’ll constantly encounter fixed boxes—app icons, favicons, vehicle cards, comparison tables, and nav bars. Those containers often enforce a particular aspect ratio. Your job is to pick a logo variant that naturally fits the container (or adjust the container), rather than forcing the logo to fit by distortion.

Car brands rarely rely on a single logo file. They typically have multiple “lockups,” each optimized for a different context:

1. 1.Badge (emblem): Usually compact and near-square, made to work on a grille, steering wheel, app tile, or small UI icon.

1. 1.Wordmark: Usually horizontal, designed for readability across headers, documentation, or partner pages.

1. 1.Full logo / lockup: A composed version that may include both emblem and wordmark, often closer to a rectangle than a square.

Motomarks makes this distinction practical because you can request different logo types.

Examples (same brand, different shapes):

- Tesla badge is tall-ish and compact for icons:

- Tesla wordmark is wide and header-friendly:

- BMW badge is extremely square-friendly:

- Mercedes-Benz full lockup often needs more breathing room than a strict square:

The takeaway: If your layout is 1:1 (square), a badge will typically look best. If your layout is wide (like 4:1), a wordmark usually wins. If you choose the wrong variant, you’ll end up either shrinking it too much (hurting legibility) or cropping it (hurting brand integrity).

Once you move beyond “keep proportions,” aspect ratio becomes a practical engineering constraint.

1) Resizing vs. cropping
- Resizing changes the dimensions while preserving the ratio (best for logos).
- Cropping cuts parts of the image to force a ratio (risky for logos).

If you place a wide wordmark into a square tile and crop to 1:1, you may cut off letters. That’s why many design systems provide both a badge and a wordmark.

2) Padding and safe area (logo breathing room)
Even if a badge is technically square, it may need a margin so it doesn’t feel cramped in a UI tile. Many brand marks are designed with “clear space” rules—essentially a built-in safe area.

A practical approach:
- Use a square container (1:1).
- Scale the badge to ~70–85% of the tile width.
- Center it and keep consistent padding.

3) Pixel density and file formats
Aspect ratio doesn’t guarantee clarity—format and resolution do.
- SVG is ideal for wordmarks and crisp edges in responsive layouts.
- PNG/WebP can be best for complex full-color marks or where SVG support is limited.

With Motomarks you can request formats explicitly:
- Wordmark SVG example:

4) Responsive design and container queries
Modern design systems often switch logo variants at breakpoints:
- Small screens: badge (square-ish)
- Medium: full lockup
- Large: wordmark

That’s not just aesthetic—it’s aspect-ratio logic. A navbar might be 6:1 wide but only 48px tall, which is hostile to tall marks. Swapping to a wordmark prevents the logo from becoming too small.

5) Do not ‘stretch to fill’
If you’ve ever seen a logo that looks slightly “fatter,” that’s usually because someone used CSS like object-fit: fill or forced width/height independently. For brand assets, always preserve aspect ratio (e.g., set one dimension and auto-calc the other).

Below are common placements where aspect ratio decisions show up quickly.

A) App icon / launcher tile (usually 1:1)
Pick a badge or emblem that reads at small sizes.

- BMW badge works naturally in a square:

- Audi’s rings are also compact and iconic:

Practical tip: if the emblem is thin (like rings), increase padding consistency across brands so it doesn’t look “lighter” than thicker marks.

B) Comparison tables (often 3:2 or 4:3 card images)
Cards typically favor balanced marks. If you use wordmarks, you may need a wider card or smaller type.

Compare how a badge vs wordmark behaves:
- Toyota badge (compact):

- Toyota wordmark (wider):

If your card is narrow, the wordmark may force the logo to shrink—hurting recognition.

C) Website header (wide, short container)
Headers typically prefer wordmarks because they’re designed for horizontal alignment.

- Mercedes-Benz wordmark:

- Tesla wordmark:

D) Vehicle infotainment and instrument clusters
These UIs often have strict bounding boxes and multiple themes (day/night). Aspect ratio still matters, but so does contrast. Using SVG wordmarks can help maintain sharp edges; using badges can help keep layouts uniform.

E) Print and large-format signage
Print rarely forces a single aspect ratio; instead, it demands quality and safe area. Full lockups can work well because you can place them with generous margins.

- Full logo example:

Even in print, avoid stretching to fit a template—adjust the template’s container ratio instead.

Aspect ratios gained mainstream attention through photography and film (4:3, 16:9), then expanded into web and mobile UI (1:1 tiles, responsive cards, social media crops). Branding followed because logos had to live inside those frames.

Automotive brands in particular span many physical and digital touchpoints:
- Physical: grille badges, wheel caps, steering wheels, trunk lettering
- Digital: configurators, apps, marketplace listings, in-car software

That’s why many marques maintain both a compact emblem and a linear wordmark. Visually, emblems tend to be designed as “medallions” (often circular or shield-like), which naturally map to square-ish ratios. Wordmarks are typographic, so they naturally map to wide rectangles.

If you train your eye, you’ll start to see the ‘native container’ of each mark:
- Round or shield emblem → wants a square container
- Typographic wordmark → wants a wide container
- Combined lockup → wants a moderate rectangle plus extra clear space

When you’re implementing logos via an API, the simplest workflow is to choose the variant first, then the size/format.

Step 1: Identify the container ratio
- 1:1 tile → badge
- Wide header → wordmark
- Marketing block with flexible spacing → full

Step 2: Request the right logo type
- Badge: ?type=badge
- Wordmark: ?type=wordmark
- Full: default (or ?type=full if you standardize)

Step 3: Choose format and size
- For crisp UI: prefer SVG for wordmarks when possible:
?type=wordmark&format=svg
- For image-heavy environments: WebP/PNG can be practical:
?format=webp or ?format=png

Step 4: Preserve aspect ratio in code
Set one dimension and let the other auto-scale, or use object-fit: contain in a fixed box.

Step 5: Standardize padding, not distortion
If different brand marks look visually mismatched in the same tile, don’t stretch them—adjust padding or switch variants.

If you want hands-on examples and endpoints, start with the documentation and browse pages:
- See /docs for request parameters
- Use /browse to explore available brands and variants

Aspect ratio connects to a handful of design and implementation concepts. If you’re building a clean logo system, these terms will help you make better decisions:

• Wordmark (text-only logo variants) — helpful for wide containers.
• Badge/Emblem (iconic mark) — ideal for square tiles.
• Clear space (safe area around a logo) — prevents cramped layouts.
• SVG (scalable vector format) — keeps edges sharp across sizes.
• Responsive images (serving the right size/format) — improves performance.

You can explore these in Motomarks’ glossary and examples:
- /glossary/wordmark
- /glossary/badge
- /glossary/svg
- /glossary/clear-space
- /examples/logo-sizes