Demos: Font Smoothing

Try this example in your iOS or Safari web browser in horizontal orientation, or read more about font smoothing and CSS transitions.

Tap each box to apply translate3d


<a class="black-on-white" href="javascript:void(0)">HelveticaNeue</a>
<a class="white-on-black" href="javascript:void(0)">HelveticaNeue</a>


.black-on-white, .white-on-black {
  margin: 5px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  line-height: 64px;
  width: 160px;
  border: 1px solid black;

.black-on-white {
  color: black;
  background-color: white;

.white-on-black {
  color: white;
  background-color: black;

.black-on-white:active, .white-on-black:active {
  -webkit-transform: translate3d(0px,0px,0px);