A Typography Guide: Serif Families

a-typography-guide-serif-families.markdown

A Typography Guide: Serif Families

A Pen by Justina V on CodePen.

License.

index.html

<header class="inner text-center serif ls-1">
  <h1>A Typography Guide</h1>
  <h3>Serif Families</h3>
</header>

<div class="container-fluid inner serif">
  <h1>One: Georgia</h1>
  <p>Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
  </div>

<div class="container-fluid inner courier">
  <h1 class="fw-700">Two: Courier / 700</h1>
  <p class="fw-400">Courier / 400. Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
</div>

<div class="container-fluid inner arvo">
  <h1 class="fw-700">Three: Arvo / 700</h1>
  <p class="fw-400">Arvo / 400. Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
</div>

<div class="container-fluid inner playfair">
  <h1 class="fw-900">Four: Playfair / 900</h1>
  <h1 class="fw-700">Four: Playfair / 700</h1>
  <p class="fw-400">Playfair / 400. Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
</div>

<div class="container-fluid inner merriweather">
  <h1 class="fw-900">Five: Merriweather / 900</h1>
  <h1 class="fw-700">Five: Merriweather / 700</h1>
  <p class="fw-400">Merriweather / 400. Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
</div>

<div class="container-fluid inner gentium">
  <h1 class="fw-700">Six: Gentium / 700</h1>
  <p class="fw-400">Gentium / 400. Roboto comes in the following weights: 400,700. Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
</div>

<div class="container-fluid inner quattrocentro">
  <h1 class="fw-700">Seven: Quattrocentro / 700</h1>
  <p class="fw-400">Quattrocentro / 400. Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
</div>

<div class="container-fluid inner abril">
  <h1 class="fw-400">Eight: Abril Fatface / 400</h1>
  <p class="fw-400">Abril Fatface  / 400. Lorem ipsum dolor sit amet, qui iuvaret oporteat elaboraret no, has ex quas perfecto definitionem. Sed ei zril mollis. No malorum facilis usu, cu veritus nominavi erroribus ius. Delenit ponderum no sit. Sea enim primis ut.</p>
  <p><strong>This is STRONG text.</strong></p>
  <p><em>This is italic text.</em></p>
</div>

style.css

@import url("https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css");

@import url("https://fonts.googleapis.com/css?family=Arvo:400,700");

@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900");

@import url("https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900");

@import url("https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700");

@import url("https://fonts.googleapis.com/css?family=Quattrocentro:400,700");

@import url("https://fonts.googleapis.com/css?family=Abril+Fatface");

body {
  font-family: 'Georgia', serif;
}

.inner {padding: 30px;}

/* Font Families */

.courier {
  font-family: "Courier New", Courier, monospace;
}

.arvo {
  font-family: 'Arvo', serif;
}

.playfair {
  font-family: 'Playfair Display', serif;
}

.merriweather {
  font-family: 'Merriweather', serif;
}

.gentium {
  font-family: 'Gentium Book Basic', serif;
}

.quattrocentro {
  font-family: 'Quattrocentro', serif;
}

.abril {
  font-family: 'Abril Fatface', serif;
}

/* Font Weight 100-900 */

.fw-100 {
  font-weight: 100;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

/* Letter Spacing */

.ls-1 {
  letter-spacing: 1px;
}