TypeSource

@tobiasahlin

Jack KerouacLive, travel,

adventure, bless,

and don’t be sorry.

Merriweather Light

View Google Font

Grumpy wizards make toxic brew for the evil Queen and Jack.

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

123456789 !?:%;&_/"()’[]'$£@”

HTML & CSS for this example

<!-- Include in <head> to load fonts from Google -->
<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
<!-- Typography -->
<div class="lta">
  <div class="lta-wrapper">
    <h1 class="lta-r1"><span class="lta-source">Jack Kerouac</span>Live, travel,</h1>
    <h1 class="lta-r2">adventure, bless,</h1>
    <h1 class="lta-r3">and don’t be sorry.</h1>
  </div>
</div>

<style type="text/css">
.lta {
  color: #fff;
  text-align: center;
  background-image: url(/images/typesource/forest.jpg);
  background-size: cover;
  background-color: #d2bd9c;
  font-size: 1em;
  font-family: Merriweather, serif;
  padding: 11em 0 13em;
}

.lta-wrapper {
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}

.lta-r1 {
  padding-right: 3.5em;
  font-size: 7em;
  font-weight: 300;
  line-height: 1.1em;
  position: relative;
}

.lta-r2 {
  font-size: 4.8em;
  font-weight: 300;
  line-height: 1.2em;
}

.lta-r3 {
  font-size: 4.405em;
  font-weight: 300;
  line-height: 1.3em;
}

.lta-source {
  margin-top: -1em;
  position: absolute;
  top: 0;
  right: 0;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-weight: 300;
  font-size: 0.12em;
  float: right;
  width: 24em;
  height: 24em;
  line-height: 23.5em;
  border: 0.3em solid #fff;
  text-align: center;
}

</style>
Browse more examples

Want more?

Be first to get your hands on new examples & projects filled with inspiration.