TypeSource

@tobiasahlin

10 ways of

Getting Things

Done

Permanent Marker

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=Permanent+Marker:400' rel='stylesheet' type='text/css'>
<!-- Typography -->
<div class="gtd">
  <h1 class="gtd-r1">10 ways of</h1>
  <h1 class="gtd-r2">Getting Things</h1>
  <h1 class="gtd-r3">Done</h1>
</div>

<style type="text/css">
.gtd {
  color: #fff;
  text-align: center;
  background-image: url(/images/typesource/table.jpg);
  background-size: cover;
  background-color: #d2bd9c;
  font-family: Permanent Marker, sans-serif;
  text-transform: uppercase;
  line-height: 3em;
  padding-top: 12em;
  padding-bottom: 13em;
}

.gtd-r1 {
  font-size: 3em;
  line-height: 1em;
}

.gtd-r2 {
  font-size: 6em;
  line-height: 1.1em;
}

.gtd-r3 {
  font-size: 21em;
  line-height: 0.72em;
}

</style>
Browse more examples