title: Formatting QR Codes in HTML emails using the <pre> tag
body: <p>I'm writing an online booking system that sends a QR code as part of a confirmation email / electronic ticket.</p>
  
  <p>The email is in HTML format and, because many people turn off images in their email client, I'm investigating displaying the QR Code in the body of the message using the <code>&lt;pre&gt;</code> tag. </p>
  
  <p>This way the QR Code will display regardless of the email client setting on displaying images or not. </p>
  
  <p>Here is what I have so far: </p>
  
  <pre><code>&lt;pre style="font-family: 'Lucida Console', Monaco, monospace; font-size: 8px; font-weight: 900; padding: 0; letter-spacing: 0; line-height: 8px; "&gt;
  
  
  
       ███████  █  █ ███████     
       █     █ █  █  █     █     
       █ ███ █  █    █ ███ █     
       █ ███ █ █  █  █ ███ █     
       █ ███ █   ███ █ ███ █     
       █     █ ███ █ █     █     
       ███████ █ █ █ ███████     
                 ███             
       █████ ████  ██ █ █ █      
       █ █ █   ██  █  █  █       
       █ █  ███████ █  █ █
       ██  █   ██     ██ ███     
        ███  █    █ █  █ ██      
               █  ████  █        
       ███████ █ █ █ ██    █     
       █     █   █████  █        
       █ ███ █ ██  █  █  █       
       █ ███ █ ██  █  █  █       
       █ ███ █ ██ █ █  ███       
       █     █ ███    ██ ██      
       ███████ ████ █  ███       
  
  
  
  &lt;/pre&gt;
  </code></pre>
  
  <p>This is almost looking okay in Outlook, but in gmail it looks terrible:</p>
  
  <p><img src="https://i.stack.imgur.com/1iD5G.png" alt="pre tag in email reader"></p>
  
  <p>I have a few questions and I'm hoping someone can point me in the right direction:</p>
  
  <ol>
  <li>Is there a trick to get gmail to observe the line height?</li>
  <li>Is there a better font to use? I'm using 'Lucida Console' which gives me a 8px x 6px rectangle but I ideally want a monospace font that is square.</li>
  </ol>