TypeSource

@tobiasahlin

25/8

Fall Collection

Roboto Condensed Bold

View Google Font

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

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

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

Roboto Thin

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=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<!-- Typography -->
<div class="fc">
  <h1 class="fc-r1">25/8</h1>
  <h1 class="fc-r2">Fall Collection</h1>
</div>

<style type="text/css">
.fc {
  font-family: Roboto Condensed, sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background-image: url(/images/typesource/leaves.jpg);
  background-color: #2b5a33;
  background-size: cover;
  padding: 4em 6em 7.5em;
}

.fc-r1 {
  font-size: 30em;
  font-weight: 700;
  line-height: 1em;
}

.fc-r2 {
  font-family: Roboto, sans-serif;
  font-size: 2.7em;
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0.64em;
  color: #1d6152;
  background-color: #fff;
  display: inline-block;
  margin-top: -0.7em;
  padding: 0.65em 0 0.65em 0.7em;
}
</style>
Browse more examples