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?

  • 3
    @Dominic I'm not familiar with canons of web design, but canons of page construction are all about competing sets of principles for whitespace. I have no doubt there are similar competing canons for email, webpages, and so forth.
    – BESW
    Oct 16, 2013 at 17:51

1 Answer 1


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.

  • Though I can understand the actual math in this case. I am wondering how the proportions were calculated and the reasoning behind it so that those principles can be applied to other projects. For example, I am working on a header and used the Golden Mean. But for whitespace I am wondering about some of the best practices.
    – JGallardo
    Oct 16, 2013 at 22:29
  • 1
    Customarily I use multiples of a single value. For example: Assume type size is 16px, line-height 20px. Margin below paragraph 20px (one line), margin below section 40px (two lines). Everything is based on the line-height so vertical margins are also a multiple of the line height. Basically... it's a grid just like print materials. Text begin the most important factor, the grid is based on the text.
    – Scott
    Oct 16, 2013 at 23:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.