A Typography Style Guide: Sans Serif

a-typography-style-guide-sans-serif.markdown

A Typography Style Guide: Sans Serif

A Pen by Justina V on CodePen.

License.

index.html

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

<div class="container-fluid inner">
  <h1>One: Helvetica</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 droidsans">
  <h1 class="fw-700">Two: Droid Sans / 700</h1>
  <p class="fw-400">Droid Sans / 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 lato">
  <h1 class="fw-700">Three: Lato / 700</h1>
  <h1 class="fw-900">Three: Lato / 900</h1>
  <p class="fw-400">Lato / 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 muli">
  <h1 class="fw-400">Four: Muli / 400</h1>
  <p class="fw-300">Muli / 300. 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 opensans">
  <h1 class="fw-800">Five: Open Sans / 800</h1>
  <h1 class="fw-600">Five: Open Sans / 600</h1>
  <p class="fw-400">Open Sans / 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 roboto">
  <h1 class="fw-900">Six: Roboto / 900</h1>
  <h1 class="fw-700">Six: Roboto / 700</h1>
  <p class="fw-400">Roboto / 400. Roboto comes in the following weights: 100,300,400,500,700,900. 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 oswald">
  <h1 class="fw-700">Seven: Oswald Heavy / 700</h1>
  <h1 class="fw-400">Seven: Oswald Book / 400</h1>
  <p class="fw-300">Oswald Light / 300. 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 class="fw-300"><strong>This is STRONG text.</strong></p>
  <p class="fw-300"><em>This is italic text.</em></p>
  <p class="fw-400">Oswald / 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 class="fw-400"><strong>This is STRONG text.</strong></p>
  <p class="fw-400"><em>This is italic text.</em></p>
</div>

<div class="container-fluid inner montserrat">
  <h1 class="fw-700">Eight: Montserrat / 700</h1>
  <p class="fw-400">Montserrat / 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=Droid+Sans:400,700");

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

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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800);

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

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

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

.inner {padding: 30px;}

/* Font-Families */
.droidsans {
  font-family: 'Droid Sans', Sans-serif;
}

.lato {
  font-family: Lato, sans-serif;
}

.muli {
  font-family: 'Muli', sans-serif;
}

.opensans {
  font-family: 'Open Sans', sans-serif;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

.oswald {
  font-family: 'Oswald', sans-serif;
}

.montserrat {
  font-family: 'Montserrat', sans-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;
}