-Whilst I mostly agree with the article, multiple times you mention working in pixels.

If using web technologies for screen targets, pixels is a broken, inaccessible garbage measurement that really should be restricted to hairline (1-3px) borders and shadows. Using them for much of anything else is flipping the bird at users with accessibility needs.

Thus one should be working in EM. Thankfully in most cases EM is easier to work with, since you can use common padding of 1, 1.5, 2,, 4 and 6. Micromanaging sizes below that or with a higher granularity is typically just not worth the time.

In general I tend to go with half of the heading's em size as the bottom padding of a heading, and 1.5em as the bottom padding of a paragraph. In terms of flow and visible unity the values you suggested of 40px and 10px are not good for clarity... and will be inconsistent if you're using EM font-sizes like a good little dooby.

One of the big rules of CSS. If you're thinking in pixels, you're not thinking.