Logo gardens are a commonly used module on many websites today. They help provide credibility and are a great way to show off your portfolio of clients/partners.
While they are simple to create in concept, making sure all the logos look visually balanced and appealing can take time and effort. Why? Because logos come in all shapes and sizes! Some are horizontally oriented while others are vertically oriented. A logo could be straightforward or have lots of detail.
How logo gardens work
When we build a logo garden, we generally apply a max height and a max width to each logo container to help retain uniformity and remove the need to set a height and width in the CMS manually.
If you have a horizontally oriented logo, it will fill out the max width before reaching the max height. For a vertical logo, it will hit the max height before the max width. In general, using all horizontally oriented logos will look best. It is very common for companies to have various versions of their logo (in color / black and white or vertical/horizontal formats) in their press kit.
In the example below, both logo containers have a max width and height of 160 x 80. However, since one is horizontally oriented and one is a circle, they may visually look different in size.
What file format should I use to upload logos?
The best file format for vector-based assets such as logos, illustrations, and icons, is an SVG. SVG files are “responsive” by default and therefore have no clearly defined dimensions. To read more about SVG files, check out this article from Adobe.
If you’re unable to find an SVG version of a logo you want to use, a high-quality PNG with a transparent background could also work. When doing so, ensure you have no empty space around the logo. Although you may not see the pixels, they are still there and will be treated as part of the image, causing the logo to appear smaller than intended. You can get rid of this empty space by cropping the image in the media gallery editor to be as close to the logo edge as possible.
Conclusion & alternative options
As you can see, there are no “best dimensions” for a logo. If you’re unable to find a horizontal version of a logo, the next solution would be for us to increase either the max height or width of the logo containers to accommodate the outliers and create more visual balance.
If that still does not work, we could change the logo garden settings to include a field to adjust the scale of the logo in the CMS. This will require a bit more trial and error on the content entry side for your team.
If you’re on a Simpatico retainer, our design team is also happy to help tweak the logos to fit your design! Not on a maintenance plan yet but interested in adding support to your team? Check out our post: Do you offer maintenance plans? to learn more!