I recall some years ago sitting in a dimly lit classroom, scribbling on my UCAS application form while trying to make a life changing choice regarding my future – would I follow the educational path towards mathematics, or take the winding steps to graphic design? Having always adored maths you’d think the answer was an easy one, but my predicted grades ended up making the difference. Maths had always made sense to me up to A-levels, I adored the logic and patterns found within all the different branches of mathematics. Unfortunately, over those two years of further education I found it much harder to comprehend, it felt like such a huge increase in difficulty level. It was a gap I was unable to jump over and my teachers were either unwilling, or more likely unable, to stretch out a hand long enough to make up the difference.
While upsetting at the time, my poor predicted maths grade ended up leading me down the rabbit hole of design I’ve come to love like the father I already had. It is also rather surprising just how often maths influences design, considering the fabricated divide portrayed between the world of cold logical mathematics and that of the ‘creative, collaborative, emotional’ arts. While not two peas in a pod they are most certainly an orange and apple in the same carrier bag.
Ratio in particular plays a pivotal part in design, though its foundation as a mathematical principle is rarely credited. It’s one of those ‘oh, I guess that is mathematics’ conversation pieces – though said very begrudgingly. You see, there appears to be on some level a fear in the artistic fields of being tied to any form of grounded logic, as if this would get your membership card revoked.
In reality, the consideration of balance is vital in design – whether it be spacing, sizing, tightrope walking (just kidding, not that one) colour or scale, there needs to be a system in place in order to ensure a pleasing and consistent experience. It’s the reason major corporations spend a small fortune on their brands: a strong foundation is necessary, if not essential, for a sturdy house.
Mathematics is of great assistance when it comes to the vital task of producing a typographic ruleset, which is essentially a stone slab of design commandments to ensure consistency. It is here that we see the important role of ratio. As consistency is key to a strong brand, having elements which utilise a ratio is vital to locking this down. The ratio can be any pair of variables decided by the designer. However, to take a common example, one of the first and most significant ratios designers are introduced to is the Golden Ratio (1 : 1.618’ or ‘a : b = b : (a+b)). If you’ve not heard the term, you’ve most likely seen related images such as the beautiful spiral below.
How might this work in practice? Let’s look at a text design example. First, look at some text without any particular design ratio in place.
Here you are presented with a drab block of letters; there is no hierarchy and elements blend into one another with little clue as to where to place emphasis. The verbal equivalent might be listening to someone speak in a particularly monotonous tone, with a distinct lack of colour and tone giving us aural cues about our responses. So how to make this text a more pleasing reading experience? By applying the golden ratio to the typographical system we end up with:
With this in place, headings have become well defined, with a clear hierarchy of importance and paragraphs and lines are spaced appropriately. Much better.
What about typography in website development?
Back in the old days of websites, there lived a town called ‘Pixel Perfect’. Everything had definitive values and that was that; this text is 16px with a line height of 24px, and things will never change1.
As the web has evolved the number of devices we use to browse it has become vast and there have also been great improvements in accessibility standards; as a result Pixel Perfect has become dilapidated and deserted. We now have beautiful new ideas about measurements such as em, rem, vh, vw. These allow a website to vary depending on factors such as: a parent figure (em), root figure (rem) or a browser's dimension (vh [viewport height] and vw [viewport width]). For example, let’s look at rem:
Imagine we have a root value of ‘16px’ as a font size. For a given text box, we state its font size to be ‘1.2rem’. This renders out as ‘19.2px’. If all elements of a site (other than the root) are given such values in rem, then in order to change text size across a whole website we only need to change the root value. It’s then possible to create an even more complex system by assigning a vw (viewpoint height) value to the root. For example, we set the root value to be ‘1vw’. If a user’s browser is 1920px wide, the font renders out at 19.2px – which would then set the ‘1.2rem’ to become ‘23px’.
The same can then apply to a website’s layout. Rather than saying a sidebar is ‘300px’, we can set it to be ‘30%’ of its parent container, or it could be 30vw. Rather than a static entity you can now have a fluid, flexible website rendering out.
Of course the above are very simplified cases: by utilising SASS (a pre-processor scripting language that is interpreted or compiled into Cascading Style Sheets) things can become even more interesting.
Where do you see links between mathematics and design?
- For an excellent old website which is still live check out the Space Jam website
Join the conversation: You can tweet us @CambridgeMaths or comment below.