CodePen

HTML

            
              <div class="wrap">
  <div class="colophon">
    <span>Aa</span>
    <ul>
      <li>Typeface: <a href="#">Source Serif Pro</a></li>
      <li>Designer: <a href="#">Frank Grießhammer </a></li>
      <li><p>Source Serif is designed for a digital environment, the letter shapes are simplified and highly readable.</p></li>
    </ul>
  </div>
</div>
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Source+Serif+Pro);

body {
  font-family: 'Source Serif Pro', serif;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -102px;
  margin-left: -270px;
  width: 540px;
  height: 204px;
}
.colophon {  
  width: 500px;
  height: 162px;
  border-top: 1px dotted rgba(0,0,0,.225);
  border-bottom: 1px dotted rgba(0,0,0,.225);
  padding: 20px;
}

.colophon span {
  float: left;
  width: 250px;
  font-size: 130px;
  line-height: 162px;
  text-align: center;
}

.colophon ul {
  float: right;
  width: 234px;
  border-left: 1px dotted rgba(0,0,0,.225);
  list-style: none;
  padding-left: 15px;
}

.colophon ul li {
  font-size: 15px;
  line-height: 22px;
}

.colophon ul li p {
  border-top: 1px dotted rgba(0,0,0,.225);
  margin-top: 15px;
  padding-top: 15px;
}
    
.colophon ul li a {
  color: #8B1F04;
  text-decoration: none;
}
            
          
!

JavaScript

            
              $(function(){
    setTimeout(function(){
        $('.colophon span').fadeOut(300);
    },500);
    setInterval(function(){
        var c = $('.colophon span').text()[0] || "@";
         changeChar(c)   
    },2000);
});

function changeChar(b){
    var a = doNext(b == "Z" ? "@" : b);
    $('.colophon span').fadeOut(300,function(){
        $(this).text(a + a.toLowerCase()).fadeIn(300).delay(1000).fadeOut(300);   
    })
}

function doNext(a) {
    return String.fromCharCode(a.charCodeAt(0) + 1);
}

            
          
!
999px
Loading ..................