Lesson 6A: Typography

Web-based typography has exploded in capability in recent years. Thanks in large part to the ability to embed web fonts on a website.

Web Typography

Helvetica

I wouldn’t be doing my job if I let you leave this class without learning about the typeface “Helvetica.” Helvetica is a sans-serif typeface that is widely known in the design community as the gold standard. Watch the two videos below to hear two typographers speak about Helvetica (start video two at 3:54).

[wonderplugin_carousel id=”2″]

Sandbox

Use the CodePen sandbox below to test out the typographic properties above!

@import url(http://fonts.googleapis.com/css?family=Pacifico);
h1{
font-family: 'Pacifico', cursive;
  font-size:40px;
}

See the Pen pHufq by Michael Macfadden (@mmacfadden) on CodePen.

Typographic Posters

For this project, create a new CodePen.io page and build a typographic poster, that features your favorite quote, like the one in the video below. For inspiration, search font posters.

<div class="container">
  <p class="line-1">have a</p>
  <p class="line-2">healthy</p>
  <p class="line-3">disregard</p>
  <p class="line-4">for the</p>
  <p class="line-5">Impossible</p>
  <p class="line-6">-Larry Page</p>
</div>

See the Pen IukqD by Michael Macfadden (@mmacfadden) on CodePen.