What principles of whitespace were used in this email?

I received this beautiful email from Skillshare and thought that their white space was done well. Below is the bottom of that email which has the copy. The top has an image, part of which is encased in this grey box of which the screen shot shows.

skillshare email looking for teachers

How can this be mathematically calculated, or could it just be trial and error?


The math seems clear to me.

50px between sections, 25px between paragraphs.

Then 75px above the unsubscribe notice. Although this looks a bit less than 75px. But definitely more than 50px. I’d set it at 50px if it were me, just to remain consistent.

So for a formula I guess it would be:
section margin bottom = 2x paragraph margin bottom
This is actually a good formula for a great deal of web design. It creates enough visual separation between sections and supports a good “rhythm” when reading.

Page design canons, as BESW points out, somewhat translate to the web. Good design is generally good design regardless of the medium.

Source : Link , Question Author : JGallardo , Answer Author : Scott

Leave a Comment