How do I get the right numbers for the right vertical rhythm?

When you're trying to achieve a vertical rhythm you usually pick a baseline eg: 6px. This means that all your font sizes, image sizes, margins, etc must be a multiple of 6 (or which ever number of your choice). Line heights are trickier to achieve with the unitless values, it is possible if you use values like 1, 1.25, 1.5, 1.75.

Though if the value doesn't fall as a multiple of 6 you could add an additional 3px (or whatever it turns out to be but it's likely to be something divisible by 6 or the number you have used) margin to offset this.

It's tricky to achieve this rhythm with CSS or Sass, it's all dependent on your content, as generally anything can throw it off.

Hopefully I've explained it in a way that isn't confusing or wrong. This is how I understand it though, no numbers are just tried it's all following the baseline number.

And what about using a typographic scale in em units, like in the video?

I think the only way to achieve a precise vertical rhythm is to calculate the space that remains for offset, but that requires much calculation. I think it's definitely more effective to play around with the numbers in a developer tool (like Chrome's inspector tool) until the text gets aligned to the grid, instead of calculating them. I think this is how it's made in the video too.

I made an example so you can see how precise you can be without calculating. Since Chrome's inspector tool highlights the elements' box model, you can easily set their margins or paddings to fill the lines.

I also made an example for calculated version. It's 100% precise, but requires a lot of conversion between pixels and ems (see the comments in the CSS).

So my conclusion is: Precision is important both in web design and typography, but readability is the most important. Although, it's never a bad thing to be precise as much as possible.

Another Matt(#3) here with the same comment/question. I was left wondering how Matt #1 came up with these arbitrary numbers to adjust the margins of the headings. The P adjustment was explained, but none of the others were. Thanks for bringing it up, Matt #2!

Left me a bit confused too!

I'm left feeling totally confused how to actually make this work to. It's the first Treehouse course which has left me with more questions than answers! I think some clarification is needed.

The voice says "I added some padding" (to the header and paragraph elements), the video shows values being set for margin. Confusing. Around 05:36, some bottom margin is applied to the H1 and H3 tag. Can we interpret this as an element "pushing" the next element more/less downwards? Also what if the H1 is followed by some other tag (than an H3), that would require a different value, no? An H4 or H2 or a paragraph for instance.