Resizing logos is one less worry for content editors

Many of the websites that we design and build require logos to be displayed in some way. To list sponsors, support case studies, promote events, list clients or members of an organisation.

Additionally any given logo often needs to appear in multiple places at different sizes and contexts across a given website.

However we often see a random assortment of logos, off varying quality and crops, added to sites. So it’s no surprise that one of the common client requests is for help finding a decent quality logo and resizing it for use in their website.

We therefore needed a solution to streamline the process. And as a rule we try and minimise any reliance on us for any content management!

We found one by creating an algorithm that proportionally sizes a logo within a given container. All the content editor needs to do is upload a cropped logo or crop the logo within the CMS with the image editor crop tool.

Apart from the many benefits to the client, we also could rest easy that we would not witness logo carnage in our designs!

You can see the solution in action on this website on the homepage, work overview page, project pages, and interactive testimonial panels. Each instance is slightly different but the logo only needs uploading once.

If all you care about is that you no longer need to resize logos, stop here. If you’re interested in geeking out about design, read on!

How we did it

We originally developed the solution a few years ago using a small sample of logos, but we decided to revisit the idea with the help of Joacim, our UI design intern.

Experimentation

We started by resizing over 130 logos within a rectangular container. For this exercise we used the golden ratio for the rectangle’s dimensions. The goal was to balance the visual weight of the logo against the container so when it is grouped with other logos they all appear to have the same weight.

We then measured the dimensions of each logo and opened up Excel and created some charts. We found that there is an exponential relationship between the width/height ratio of a logo and the width of a logo within the container.

The relationship was strongest for the wide and tall logos while we found there was more variability as logos became more square. We think this is explained by how two logos with the same dimensions can have different perceived visual weights depending on whether they are outlines, use solid blocks of colour or have elements that extend out.

The following diagram presents the general distribution of logos.

We were happy with the general distribution given we had a broad range of logo sizes in the sample. As it happens, tall and thin logos were the hardest to find as reflected by the 11% figure.

Exploring the maths

We had a theory that the trend line would be very close to the area of a logo based on the golden rectangle within the main container. Indeed our line is very close to the curve this creates. Which got us excited. We adjusted all the logos to match the golden ratio curve. However it was not quite right. While it generally did a good job, we found that for the middle range of logo sizes, they were a little too large and felt too heavy.

We tested the general curve against different samples of logos and adjusted outliers to see what difference it would make. We eventually settled on a curve much closer to our original trend line but with some adjustments to include the best of the golden ratio relationship. Overall we found it does a good job sizing the logos proportionally to each other for the given sample. Even given the wide range of logo types: intricate, heavy, spaced out etc.

Translating it into something we can use

Unfortunately calculus is not something that is catered for in CSS! And we wanted a light weight solution that does not rely on JavaScript.

Our solution was to turn the curve into six straight line segments which each could then be described with the simpler y=mc+b equation. Jumping back into Excel we were able to calculate m and b for each line.

We can now determine the correct equation to use based on the only thing we know for sure about a given logo - the ratio of its width and height - and a series of ‘if statements’ in the website template code.

And there we have it, we can now calculate the proportional width of the logo within a given layout. The height takes care of itself.

Testing the theory

You guessed it. We then went through all the logos again and adjusted them using the equations we refined. On balance we were pleased with the result. There will always be the odd outlier logo but the time saved by content editors has been welcomed!

Summary

We set out to see if there was a way to save clients or us from having to manually adjust logos so they looked balanced in a layout.

We found a relationship that was tantalisingly close to relying on the golden ratio. We were able to simplify the maths so we could use it in a practical way in our website builds.

It’s also worth mentioning you could adjust the relationship to change the look and feel of the logo relationships based on a particular design concept.