Look at the shape of the available space
Measure the usable width and height before picking a layout. Include the room that must stay around the logo. A large outer panel can still leave only a narrow slot for the mark.
| Space | First option to inspect |
|---|---|
| Short wide header | Approved horizontal arrangement. |
| Taller panel | Approved stacked arrangement. |
| Narrow print column | Both approved versions at the required width. |
| Tiny square site icon | Approved icon, checked as a separate task. |
These are starting choices, not universal design rules. Put each option in the actual layout before deciding.
Compare the approved arrangements
LogoTidy shows horizontal and vertical sample layouts.
Sources for this point: LogoTidy sample file kit.
- Place both approved options at a useful size.
- Check the name before the smaller tagline.
- Keep the approved symbol and word relationship.
- Look for crowded details and edge room.
- Choose based on this destination, not on one large preview.
Record any part that becomes unreadable. A taller arrangement is not automatically better for every square. A wide version may work if the name gets enough room.
Respect the kind of logo
Some logos are a name by itself. Their horizontal and vertical files may use the same geometry. Some have a symbol and name that can be arranged differently. An intact emblem should stay together unless a changed layout is approved.
Do not cut a badge into parts to force it into a slot. Do not move a tagline or invent a separate symbol without confirming that choice. If neither current option works, name the destination and ask for a defined variation.
Fit the chosen version without stretching
CSS contain fits a proportional image within its box.
Sources for this point: W3C image fitting rules.
SVG aspect ratio settings can preserve proportions in its viewport.
Sources for this point: W3C SVG size and viewBox guide.
For your placement, check that all intended edges remain visible. Leaving room in the box is better than changing the logo shape just to fill it. Use the resizing check if the mark looks squeezed.
Resize a logo without distortion
If a fit setting hides the name or cuts an edge, ask the editor to inspect the box. Do not redraw the source first.
Record which layout belongs in each place
| Destination | Save these choices |
|---|---|
| Website header | Approved filename, background and display width. |
| Front label | Approved layout, physical size and proof reference. |
| Site icon | Approved icon filename and installation note. |
Keep this record with the approved files. It helps the next person choose the same version instead of repeating the decision. Finish after checking the whole chosen mark in its real placement, with readable wording and the intended proportions.
Sources
These sources support the points linked above. Each date shows when we checked that source.
- LogoTidy sample file kit
LogoTidy displays example logo files and layouts Checked . - W3C image fitting rules
CSS fitting controls image proportions and clipping in a box Checked . - W3C SVG size and viewBox guide
SVG viewBox and aspect ratio settings affect display mapping Checked .