title: Bold fonts are too bold on iOS with shrink-to-fit
body: <p>I'm working on a website and using the following HTML meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=600, shrink-to-fit=yes"&gt;
  </code></pre>
  
  <p>I also have the minimum width of the page set to <code>600px</code>.  Because of the nature of the site, I'm not worried about having a completely mobile-compatible site, however, one small issue keeps bothering me.  On iOS, bold fonts tend to render more bold than they should.  If the default zoom on my iPhone 6s is 62.5% (375px device width divided by the 600px minimum), when I pinch zoom so that the effective zoom is closer to 100%, everything looks fine.</p>
  
  <p>It's a minor issue and I could work around it with a solution that tailors to iOS (maybe updating classes based on the browser and viewport size), but I'm wondering if there are other CSS attributes or meta tags that could be applied to more easily fix the issue.  I have a few font attributes on the body that aren't solving the issue:</p>
  
  <pre><code>body {
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }
  </code></pre>
  
  <p>The problem is only occurring on iOS.  I checked in Android and it looked fine.</p>