A CodePen by Sven Wolfermann. iOS font rendering - test of iOS font rendering (landscape bolding of text)

index.html

<div class="block1">
  <h1>type rendering – black on white</h1>
  <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2>
  <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </p>
</div>

<div class="block2">
  <h1>type rendering – white on black</h1>
  <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2>
  <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </p>
</div>

<div class="block3">
  <h1>type rendering – with text-shadow</h1>
  <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2>
  <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </p>
</div>

style.css

@import url(http://fonts.googleapis.com/css?family=Quicksand:400,300);

body {
  font-family: 'Quicksand', sans-serif;
  /* -webkit-font-smoothing: subpixel-antialiased; */
  /* font-smoothing does not work on iOS */
  
  /* -webkit-transform: translate3d(0,0,0); */
  /* adding translate3d() force the same font-rendering in all orientations */
}

h1, h2 {
  font-weight: normal;
}
.block1 {
  background-color: white;
  color: black;
  padding: 1%;
}

.block2, .block3 {
  background-color: black;
  color: white;
  padding: 1%;
}
@media only screen and (min-width: 1024px) {
  .block1, .block2, .block3 {
    float: left;
    width: 31%;
  }
}

@media only screen and (orientation: portrait) {
  .block3 {
    text-shadow: 0 0 0 rgba(255,255,255,1);
  }
}