How to Add Blank Space in Notes field

I’m getting the hang of this html stuff but I’m confused by the PDF output!!

The image below shows the html code I have placed in the custom field called Bank Details on my invoice.
This looks good on the screen view of the invoice.
It also looks good when I Print to the “Microsoft Print to PDF” printer and view with Adobe Acrobat

Now then, if I email the invoice and open the attachment with Adobe Acrobat the font has changed and no longer fits the box!!

OK, I can change the height and width of the box to make it fit the emailed invoice and it looks reasonable in the printed pdf. But why are they different?

Do I need to define the font and size in the HTML?