title: Why does Proxima Nova text bleed at certain font sizes and weights depending on the OS and screen resolution?
body: <p>We are using Proxima Nova on our site. As it is one of the more common fonts, I am posting to see if anyone has seen any similar issues.</p>
  
  <p><strong>The Problem:</strong> When on Windows, any browser, certain screen resolutions, certain text sizes, and certain font weights bleed together making text hard to read. For example, lowercase "i" looks like an "l" because there is no separation between the dot and the body. This is making the boss not very happy. These issues do not occur on Mac OS X, with or without smoothing. For some Windows users, changing the screen resolution fixes it.</p>
  
  <p>Here's a group of screen shots showing the issue best I can (note: Moodi is a made up company, sorry if there is a real Moodi out there reading this)....</p>
  
  <p><a href="https://i.stack.imgur.com/3CXnO.png" rel="nofollow noreferrer">proxima nova error</a></p>
  
  <p>Notice the clarity of the "i" on Mac and on font-size: 16px.</p>
  
  <p>So, I am aware we can change the font (not very desirable), change the font weight, change the font size, etc. I am more wondering if anyone else has experienced this, what causes it, and is something wrong in our setup that is causing these issues since this is a very popular font.</p>
  
  <p>Our default css is...</p>
  
  <pre><code>body {
      font-family: proxima-nova, Arial, sans-serif;
      font-size: 15px;
      letter-spacing: 0.01em;
      line-height: 1.6;
      text-size-adjust: none;
  }
  </code></pre>
  
  <p>And the example broken text includes these extras...</p>
  
  <pre><code>.btn-link {
      font-weight: 600;
      letter-spacing: 0.025em;
  }
  </code></pre>
  
  <p>If anyone has experienced this or knows why this occurs that would be really helpful.</p>
  
  <p>Thanks!</p>