Calculating line-height and margin-bottom from design in flat image format

I am developing the UI of a website, if a designer gives me a flat design image, how can I calculate the line height and margin bottom of the headings and paragraphs, lets say he has told me the font size of the following headings , h1 hero is 50px, h1 is 31px, h2 is 27px, and so on,

Do I use any default line-height of 1.5 or 1.2 and use the remaining space for the bottom margin ?

I know while designing there are grids involved but I dont know how do you calculate line-heights and margin-bottom from them

If anyone can guide me towards any article regarding this it would be helpful too.