TypeSource

@tobiasahlin

Here is Edward Bear, coming downstairs now, bump, bump, bump, on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it.

And then he feels that perhaps there isn't. Anyhow, here he is at the bottom, and ready to be introduced to you. Winnie-the-Pooh.

Lora Italic

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=Lora:400italic' rel='stylesheet' type='text/css'>
<!-- Typography -->
<div class="eb-lora">
  <p class="eb-lora-p"><span class="eb-lora-fl">H</span>ere is Edward Bear, coming downstairs now, bump, bump, bump, on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it.</p>
  <p class="eb-lora-p">And then he feels that perhaps there isn't. Anyhow, here he is at the bottom, and ready to be introduced to you. Winnie-the-Pooh.</p>
</div>

<style type="text/css">
.eb-lora {
  color: #000;
  background-color: #f6f6f6;
  text-align: left;
  font-family: Lora, sans-serif;
  font-style: italic;
  font-weight: 400;
  line-height: 3em;
  padding: 11em 12em 10em;
}

.eb-lora-p {
  font-size: 17px;
  font-size: 1.7em;
  max-width: 570px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  line-height: 1.9em;

}

.eb-lora-fl {
  font-size: 7em;
  float: left;
  line-height: 0.8em;
  margin-top: -0.29em;
  margin-right: -0.05em;
}

</style>
Browse more examples

Want more?

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