For a group of objects of varying sizes and shapes (like logos, headshots, or e-commerce products) to look as clean and organized as possible when displayed in a grid format, they need to all be in containers with identical aspect ratios. The most versatile aspect ratio to create a uniform grid for inconsistently-shaped objects is a square (1:1) ratio. – Download our template
Since often these containers have some sort of a border, it is best to leave a slight margin between the edges of the logo and the container. Generally speaking, logos should not have background colors and should appear consistent in size (although that’s not always possible as the example above demonstrates).
We recommend the following guidelines for preparing logos in square containers for use on the web:
- Logos for this purpose should be a minimum of 800px wide.
- We recommend a container size of 800px by 800px with a margin of 20px (on all sides) or if you know you’ll have great logo copies to work with, you could go as high as 1000px by 1000px with a 30px margin as used in our template.
- Horizontal logos should span the full width of the container (but within the margin space)
- Taller logos should be centered and sized in a way that makes them proportionate to each other while not overpowering the horizontal logos. (Getting this balance right takes some practice)
- Avoid using logos with background colors or patterns. (We recommend extracting the logo from the background whenever possible.)
- You can use a white or transparent backgrounds, but choose one or the other (not both)
