diff --git a/WV5/Roboto-Bold-webfont.woff b/WV5/Roboto-Bold-webfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..ee614ee1948f888879c795318d43a4f99dd9dd07
Binary files /dev/null and b/WV5/Roboto-Bold-webfont.woff differ
diff --git a/WV5/Roboto-Light-webfont.woff b/WV5/Roboto-Light-webfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..8f5552d87bb1f6766edc2e726edf8d1704149991
Binary files /dev/null and b/WV5/Roboto-Light-webfont.woff differ
diff --git a/WV5/Roboto-LightItalic-webfont.woff b/WV5/Roboto-LightItalic-webfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..f6c57b8c8ed382a5ea8a46050123af283fd4d423
Binary files /dev/null and b/WV5/Roboto-LightItalic-webfont.woff differ
diff --git a/WV5/alignment.html b/WV5/alignment.html
new file mode 100644
index 0000000000000000000000000000000000000000..8a823778cb935cc9f0acca58962a6c12d3853fb2
--- /dev/null
+++ b/WV5/alignment.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+ <meta charset='UTF-8'/>
+ <title>Text Alignment</title>
+ <link rel='stylesheet' href='typo.css'/>
+ <style>
+ .left {
+ text-align: left;
+ }
+ .center {
+ text-align: center;
+}
+figcaption {
+ display: none;
+}
+@media only screen and (min-width: 900px) {
+ figure {
+ position: relative;
+ }
+ figcaption {
+ display: block;
+
+ font-style: italic;
+ text-align: right;
+ background-color: #FFFFFF;
+
+ position: absolute;
+ left: -220px;
+ width: 200px;
+ }
+}
+.justify {
+ text-align: justify;
+}
+ </style>
+</head>
+<body>
+
+<header>
+ <nav>
+ <ul>
+ <li><a href='web-fonts.html'>Web Fonts</a></li>
+ <li><a href='history.html'>History</a></li>
+ <li><a href='indents.html'>Indents</a></li>
+ <li class='selected'>Alignment</li>
+ <li><a href='spacing.html'>Spacing</a></li>
+ <li><a href='line-length.html'>Line Length</a></li>
+ </ul>
+ </nav>
+ <div class='hero'>
+ <h1>Text Alignment</h1>
+ </div>
+</header>
+
+<div class='page'>
+
+ <section class='section section--gray left'>
+ <h2>Left Alignment</h2>
+
+ <p>Left-aligned text is the standard because it gives the reader a vertical
+ anchor to jump back to on every line. You should use it for most of your body
+ text (unless you have a very good reason not to).</p>
+
+ </section>
+
+ <section class='section section--gray center'>
+ <h2>Center Alignment</h2>
+
+ <p>Center-aligned text doesn’t have that anchor, so it’s easier for the eye
+ to get lost when it tries to jump to the next line. Reserve it for special
+ kinds of content, like poems, lyrics, and headings.</p>
+
+ </section>
+
+ <section class='section section--gray'>
+ <h2>Right Alignment</h2>
+
+ <p>Only use right-aligned text when it makes sense for the layout. For
+ example, a caption for an image:</p>
+
+ <figure>
+ <figcaption>These letters are touching. This is called a
+ ligature.</figcaption>
+ <img src='ligature.svg'/>
+ </figure>
+
+ <p>Of course, if you’re publishing content in a language that’s read
+ right-to-left, that’s another story...</p>
+
+ </section>
+
+ <section class='section section--gray justify'>
+
+ <h2>Justified Alignment</h2>
+
+ <p>Justified text requires a good hyphenation engine. Without an intelligent
+ way to split long words across lines, you get big spaces between words, which
+ makes it harder to scan the text. Most browsers don’t have good built-in
+ hyphenation engines.</p>
+
+ </section>
+
+</div>
+
+</body>
+</html>
diff --git a/WV5/history.html b/WV5/history.html
new file mode 100644
index 0000000000000000000000000000000000000000..323b5e57acffee9eb9a3e1172b3ca919bcf20ba2
--- /dev/null
+++ b/WV5/history.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+ <meta charset='UTF-8'/>
+ <title>History of Typography</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Droid+Sans+Mono|Lato|Libre+Baskerville|Lobster|Questrial|Rokkitt|Rufina|Sorts+Mill+Goudy|UnifrakturMaguntia" rel="stylesheet">
+ <link rel='stylesheet' href='typo.css'/>
+ <style>
+ .blackletter {
+ font-family: 'UnifrakturMaguntia', cursive;
+ }
+ .old-style {
+ font-family: 'Sorts Mill Goudy', serif;
+}
+.transitional {
+ font-family: 'Libre Baskerville', serif;
+}
+.didot {
+ font-family: 'Rufina', serif;
+}
+.slab {
+ font-family: 'Rokkitt', serif;
+}
+.fat-face {
+ font-family: 'Alfa Slab One', cursive;
+}
+.grotesque {
+ font-family: 'Roboto', sans-serif;
+}
+.geometric {
+ font-family: 'Questrial', sans-serif;
+}
+.humanist {
+ font-family: 'Lato', sans-serif;
+}
+.display {
+ font-family: 'Lobster', cursive;
+}
+.monospace {
+ font-family: 'Droid Sans Mono', monospace;
+}
+ </style>
+</head>
+<body>
+
+ <header>
+ <nav>
+ <ul>
+ <li><a href='web-fonts.html'>Web Fonts</a></li>
+ <li class='selected'>History</li>
+ <li><a href='indents.html'>Indents</a></li>
+ <li><a href='alignment.html'>Alignment</a></li>
+ <li><a href='spacing.html'>Spacing</a></li>
+ <li><a href='line-length.html'>Line Length</a></li>
+ </ul>
+ </nav>
+ <div class='hero'>
+ <h1>History of Typography</h1>
+ </div>
+ </header>
+
+ <div class='page'>
+
+ <section class='section section--gray blackletter'>
+ <h2>Gothic/Blackletter</h2>
+
+ <p>When Gutenburg invented the printing press in 1440, he wanted to
+ mass-produce the hand-drawn caligraphy of monks. It’s hard to read if
+ you’re not a medieval scholar, so don’t use it unless you’re really trying
+ to recreate the middle ages.</p>
+
+ </section>
+
+ <section class='section section--gray old-style'>
+ <h2>Old Style Serif</h2>
+
+ <p>Old style fonts were the first “modern†fonts. They’re soft, warm, and
+ still almost feel hand-drawn. They’re built for legibility, which make them
+ fantastic text fonts. Use them when you want to evoke the Renaissance.</p>
+ </section>
+
+ <section class='section section--gray transitional'>
+ <h2>Transitional Serif</h2>
+
+ <p>Make old-style fonts less hand-drawn and chop the serifs off at right
+ angles, and you get transitional fonts. This was the predominant font
+ during the founding of the United States and has strong connotations with
+ neoclassical architecture and art.</p>
+ </section>
+
+
+ <section class='section section--gray didot'>
+ <h2>Didot Serif</h2>
+
+ <p>Didot fonts create a stark contrast between thick vertical strokes and
+ very thin horizontal ones. They have an air of elegance about them, which
+ is why they’re popular fonts for luxury brands and fasion magazines. Not so
+ great as text fonts though.</p>
+ </section>
+
+
+ <section class='section section--gray slab'>
+ <h2>Slab Serif</h2>
+
+ <p>Take a Didot font, make all the strokes the same width, and you get a
+ slab serif. They’re a font created during the industrial revolution,
+ primarly for titles, not for long runs of text.</p>
+ </section>
+
+
+ <section class='section section--gray fat-face'>
+ <h2>Fat Face Serif</h2>
+
+ <p>The industrial revolution brought about a need to advertise the
+ resulting surplus of goods. Making slab serifs fonts really thick was a
+ good way to stand out. You’ll also recognize fat face serifs in want-ads
+ from the Westward Expansion in the United States.</p>
+
+ </section>
+
+ <section class='section section--gray grotesque'>
+ <h2>Grotesque Sans Serif</h2>
+
+ <p>Slab serif fonts without the serifs don’t have much character, but that
+ makes them really versatile, right? Max Miedinger certainly thought so when
+ he invented Helvetica in 1957.</p>
+
+ </section>
+
+ <section class='section section--gray geometric'>
+ <h2>Geometric Sans Serif</h2>
+
+ <p>Apply Bauhaus design aesthetics to typography, and you get geometric
+ sans serif fonts. They’re like Grotesque fonts, but have rounder forms.
+ They’re a classically modern font for the 1940s and 50s, but they’re hard
+ to read, making them less suitable as text fonts.</p>
+
+ </section>
+
+ <section class='section section--gray humansit'>
+ <h2>Humanist Sans Serif</h2>
+
+ <p>Geometric sans serif fonts lost their human character, so why not add a
+ little hint of old-style serif into a sans serif font? You get a modern
+ font that’s easy-to-read and has enough character to stand on its own as a
+ display font.</p>
+
+ </section>
+
+ <section class='section section--gray display'>
+ <h2>Display</h2>
+
+ <p>Now that we have web fonts, the sky’s the limit with how fancy we can
+ get with our fonts. The last decade has seen an explosion in fancy font
+ faces, many of which are best-suited for titles. These are great for adding
+ unique character to a website’s headings.</p>
+
+ </section>
+
+ <section class='section section--gray monospace'>
+ <h2>Monospace</h2>
+
+ <p>Monospace fonts are a fluke of history. They were designed specifically
+ for the technical limitations of typewriters, ignoring many of the
+ typographic principles that make for legible text. Don’t use them unless
+ you’re marking up code snippets.</p>
+
+ </section>
+
+ </div>
+
+</body>
+</html>
diff --git a/WV5/indents.html b/WV5/indents.html
new file mode 100644
index 0000000000000000000000000000000000000000..4bfa086aaa8d9a86d940c31a0a23c12ba6d3ba1f
--- /dev/null
+++ b/WV5/indents.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+ <meta charset='UTF-8'/>
+ <title>Paragraph Indents</title>
+ <link rel='stylesheet' href='typo.css'/>
+ <style>
+ .paragraph-indent p {
+ text-indent: 1em;
+ margin-bottom: 0;
+ }
+ .paragraph-indent p:first-of-type {
+ text-indent: 0;
+ }
+ /* DESIGNERS WILL JUDGE YOU FOR THIS */
+.never-both p {
+ text-indent: 1em;
+ margin-bottom: 1em;
+}
+ </style>
+</head>
+<body>
+
+ <header>
+ <nav>
+ <ul>
+ <li><a href='web-fonts.html'>Web Fonts</a></li>
+ <li><a href='history.html'>History</a></li>
+ <li class='selected'>Indents</li>
+ <li><a href='alignment.html'>Alignment</a></li>
+ <li><a href='spacing.html'>Spacing</a></li>
+ <li><a href='line-length.html'>Line Length</a></li>
+ </ul>
+ </nav>
+ <div class='hero'>
+ <h1>Paragraph Indents</h1>
+ </div>
+ </header>
+
+ <div class='page'>
+
+ <section class='section section--blue paragraph-indent'>
+ <h2>Indents</h2>
+
+ <p>Everything in typography is about being subtle, and styling the separation
+ between paragraphs is no different.</p>
+
+ <p>Denoting a new paragraph should hardly be noticable to the reader, and
+ first-line indents are a good way to achieve that. The first paragraph
+ doesn’t need to be indented.</p>
+
+ </section>
+
+ <section class='section section--blue'>
+ <h2>Or Margins</h2>
+
+ <p>Spacing is the other way to set off a new paragraph. You can do this with
+ the <code>bottom-margin</code> CSS property.</p>
+
+ <p>We find that using a bottom margin makes it a little easier to scan a web
+ page, while indents give more of a narrative or newspaper-y feel.</p>
+ </section>
+
+ <section class='section section--red never-both'>
+ <h2>But Never Both</h2>
+
+ <p>The purpose of a first-line indent or bottom margin is to indicate to the
+ reader that, well, you’re starting a new paragraph.</p>
+
+ <p>Readers aren’t stupid, and they don’t need two signs that a new paragraph is happening. That’s redundant.</p>
+
+ </section>
+
+ </div>
+
+</body>
+</html>
diff --git a/WV5/ligature.svg b/WV5/ligature.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9d69db3a1bdb665643d68e764a54bc64b302edc7
--- /dev/null
+++ b/WV5/ligature.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="120px" height="140px" viewBox="0 0 120 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
+ <title>ligature</title>
+ <desc>Created with Sketch.</desc>
+ <defs>
+ <rect id="path-1" x="0" y="0" width="120" height="140"></rect>
+ <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="120" height="140" fill="white">
+ <use xlink:href="#path-1"></use>
+ </mask>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="ligature">
+ <use id="Rectangle-4" stroke="#979797" mask="url(#mask-2)" stroke-width="2" xlink:href="#path-1"></use>
+ <text id="ft" font-family="LibreBaskerville-Regular, Libre Baskerville" font-size="120" font-weight="normal" fill="#595959">
+ <tspan x="14" y="116">ft</tspan>
+ </text>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/WV5/line-length.html b/WV5/line-length.html
new file mode 100644
index 0000000000000000000000000000000000000000..01585c3a3e32ccecd79802a8ebf786eaa0c52a4c
--- /dev/null
+++ b/WV5/line-length.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+ <meta charset='UTF-8'/>
+ <title>Line Length</title>
+ <link rel='stylesheet' href='typo.css'/>
+ <style>
+ @media only screen and (min-width: 580px) {
+ .not-so-manageable {
+ max-width: 100%;
+ margin-left: 2em;
+ margin-right: 2em;
+ }
+ }
+ </style>
+
+</head>
+<body>
+
+ <header>
+ <nav>
+ <ul>
+ <li><a href='web-fonts.html'>Web Fonts</a></li>
+ <li><a href='history.html'>History</a></li>
+ <li><a href='indents.html'>Indents</a></li>
+ <li><a href='alignment.html'>Alignment</a></li>
+ <li><a href='spacing.html'>Spacing</a></li>
+ <li class='selected'>Line Length</li>
+ </ul>
+ </nav>
+ <div class='hero'>
+ <h1>Line Length</h1>
+ </div>
+ </header>
+
+ <div class='page'>
+
+ <section class='section section--blue'>
+ <h2>Manageable Line Length</h2>
+
+ <p>You should try to limit the length of your lines to approximately 80
+ characters or less. It reduces strain on the reader’s eyes, since they don’t
+ need to move back and forth as much. It also helps prevent them from jumping
+ to the wrong line when they get to the end of the previous line. The end
+ result is that it’s easier for visitors to digest your content.</p>
+
+ <p>Don’t believe us? Try reading Wikipedia with a narrow browser window. It
+ makes a big difference.</p>
+
+ </section>
+
+ <section class='section section--red not-so-manageable'>
+ <h2>Not-So-Manageable Line Length</h2>
+
+ <p>This section contains the same text as the previous one, but with a line
+ length that always stretches to the size of the browser. It’s more difficult
+ to read when your browser window is wide.</p>
+
+ <p>You should try to limit the length of your lines to approximately 80
+ characters or less. It reduces strain on the reader’s eyes, since they don’t
+ need to move back and forth as much. It also helps prevent them from jumping
+ to the wrong line when they get to the end of the previous line. The end
+ result is that it’s easier for visitors to digest your content.</p>
+
+ <p>Don’t believe us? Try reading Wikipedia with a narrow browser window. It
+ makes a big difference.</p>
+
+ </section>
+
+ </div>
+
+</body>
+</html>
diff --git a/WV5/spacing.html b/WV5/spacing.html
new file mode 100644
index 0000000000000000000000000000000000000000..44f2940c6b67877bb882050724f95704f0903f60
--- /dev/null
+++ b/WV5/spacing.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+ <meta charset='UTF-8'/>
+ <title>Spacing</title>
+ <link rel='stylesheet' href='typo.css'/>
+ <style>
+ .messy {
+ line-height: 1.2em;
+ }
+ .messy h2 {
+ line-height: .9em;
+ }
+ .messy:last-of-type {
+ line-height: 1.5em;
+ }
+ .messy:last-of-type h2 {
+ margin-bottom: .3em;
+ }
+ .messy .button:link,
+ .messy .button:visited {
+ margin-top: 0;
+ }
+ </style>
+
+</head>
+<body>
+
+ <header>
+ <nav>
+ <ul>
+ <li><a href='web-fonts.html'>Web Fonts</a></li>
+ <li><a href='history.html'>History</a></li>
+ <li><a href='indents.html'>Indents</a></li>
+ <li><a href='alignment.html'>Alignment</a></li>
+ <li class='selected'>Spacing</li>
+ <li><a href='line-length.html'>Line Length</a></li>
+ </ul>
+ </nav>
+ <div class='hero'>
+ <h1>Spacing</h1>
+ </div>
+ </header>
+
+ <div class='page'>
+
+ <section class='section section--blue'>
+ <h2>Give Your Elements Enough Room to Breath</h2>
+
+ <p>One of the easiest ways to make your web pages look more professional is
+ to add bigger margins or padding between everything.</p>
+
+ <p>By everything, we mean the space between headings, paragraphs, images,
+ form controls, the vertical space between lines, the horizontal space between
+ the edge of the page, and pretty much every other margin or padding you can
+ think of.</p>
+ </section>
+
+ <section class='section section--blue'>
+ <h2>Consistent Spacing</h2>
+
+ <p>Using a <em>consistent</em> margin between headings, paragraphs, images,
+ and other elements gives a vertical rhythm to the page. See how this button
+ doesn’t seem to break the flow of the page?</p>
+
+ <a class='button' href='#'>Learn More About Typography</a>
+
+ <p>Consistent spacing makes your web page feel more like a cohesive whole,
+ rather than a bunch of unrelated graphical elements.</p>
+
+ </section>
+
+ <section class='section section--red messy'>
+ <h2>Without Enough Space, Things Feel Messy</h2>
+
+ <p>One of the easiest ways to make your web pages look less professional is
+ to reduce margins or padding between everything.</p>
+
+ <p>By everything, we mean the space between headings, paragraphs, images,
+ form controls, the vertical space between lines, the horizontal space between
+ the edge of the page, and pretty much every other margin or padding you can
+ think of.</p>
+ </section>
+
+ <section class='section section--red messy'>
+ <h2>Inconsistent Spacing</h2>
+
+ <p>Using an inconsistent margin between headings, paragraphs, images, and
+ other elements destroys the vertical rhythm of a page. See how this button
+ seems to break the flow of the page?</p>
+
+ <a class='button' href='#'>Learn More About Typography</a>
+
+ <p>The difference between the top and bottom margin makes it feel like it
+ doesn’t fit in, and your web page is no longer a cohesive whole.</p>
+
+ </section>
+
+
+
+ </div>
+
+</body>
+</html>
diff --git a/WV5/typo.css b/WV5/typo.css
new file mode 100644
index 0000000000000000000000000000000000000000..a1f18dacce759113ae048b64fffc88607dc859d3
--- /dev/null
+++ b/WV5/typo.css
@@ -0,0 +1,237 @@
+@font-face {
+ font-family: 'Roboto';
+ src: url('Roboto-Light-webfont.woff') format('woff');
+ font-style: normal;
+ font-weight: 300;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ src: url('Roboto-LightItalic-webfont.woff') format('woff');
+ font-style: italic;
+ font-weight: 300;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ src: url('Roboto-Bold-webfont.woff') format('woff');
+ font-style: normal;
+ font-weight: 700;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Roboto', sans-serif; /* Add 'Roboto' here */
+ font-size: 18px;
+ line-height: 1.8em;
+ color: #5D6063;
+}
+
+/* This will only work in Firefox */
+em, strong {
+ font-synthesis: none;
+}
+
+/* THIS IS A LITTLE AWKWARD */
+em {
+ font-family: 'Roboto Light Italic', serif;
+ font-style: italic;
+}
+
+strong {
+ font-family: 'Roboto Bold', serif;
+ font-weight: bold; /* Or 700 */
+}
+
+h1, h2, h3, h4, h5, h6 {
+ line-height: 1.3em;
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+header {
+ text-align: center;
+ color: #FFF;
+}
+
+nav {
+ background-color: #54575A;
+}
+
+nav ul {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto;
+}
+
+nav li {
+ list-style-type: none;
+
+ width: 50%;
+ padding-top: .5em;
+ padding-bottom: .5em;
+
+ border-top: 1px solid #888F95;
+}
+
+nav li:nth-of-type(1),
+nav li:nth-of-type(2) {
+ border-top: none;
+}
+
+nav li:nth-of-type(2n) {
+ border-left: 1px solid #888F95;
+}
+
+nav li.selected {
+ color: #54A5C4;
+}
+
+nav a:link,
+nav a:visited {
+ color: #888F95;
+ text-decoration: none;
+}
+
+nav a:hover,
+nav a:visited:hover,
+nav a:active,
+nav a:visited:active {
+ color: #54A5C4;
+ text-decoration: underline;
+}
+
+
+.hero {
+ padding-top: 9em;
+ padding-bottom: 9em;
+ background-color: #5D6063;
+}
+
+.hero h1 {
+ font-size: 50px;
+}
+
+
+.section {
+ padding: 4em 1em;
+
+ margin: 0 auto;
+ max-width: 540px;
+}
+
+.section h2 {
+ font-size: 30px;
+ margin-bottom: .7em;
+}
+
+.section--gray {
+ border-top: 1px solid #D6D9DC;
+}
+
+.section--blue {
+ border-top: 1px solid #B2D6FF;
+}
+
+.section--blue h2 {
+ color: #5995DA;
+}
+
+.section--red {
+ border-top: 1px solid #F09A9D;
+}
+
+.section--red h2 {
+ color: #D55C5F;
+}
+
+.section:first-of-type {
+ border-top: none;
+}
+
+.section p,
+.section ul,
+.section ol,
+.section figure {
+ margin-bottom: 1em;
+}
+
+.section p:last-child,
+.section ul:last-child,
+.section ol:last-child,
+.section figure:last-child {
+ margin-bottom: 0;
+}
+
+.button:link,
+.button:visited {
+ display: block;
+ text-decoration: none;
+
+ color: #FFF;
+ background-color: #4A90E2;
+ font-weight: bold;
+ padding: 10px;
+ border-radius: 5px;
+ text-align: center;
+
+ margin: 1.8em auto;
+}
+
+.button:hover,
+.button:visited:hover {
+ color: #FFF;
+ background-color: #6AA9F4;
+}
+
+.button:active,
+.button:visited:active {
+ color: #FFF;
+ background-color: #3F7CC4;
+}
+
+
+@media only screen and (min-width: 580px) {
+ .section {
+ margin: 4em auto;
+ padding: 2.5em 3em;
+ }
+ .section--gray:first-of-type,
+ .section--gray {
+ border: 1px solid #D6D9DC;
+ }
+ .section--blue:first-of-type,
+ .section--blue {
+ border: 1px solid #B2D6FF;
+ }
+ .section--red:first-of-type,
+ .section--red {
+ border: 1px solid #F09A9D;
+ }
+}
+
+
+@media only screen and (min-width: 750px) {
+ nav {
+ padding-left: 2em;
+ padding-right: 2em;
+ }
+ nav li {
+ width: auto;
+ border-top: none;
+ }
+
+ nav li:nth-of-type(2n) {
+ border-left: none;
+ }
+}
diff --git a/WV5/web-fonts.html b/WV5/web-fonts.html
new file mode 100644
index 0000000000000000000000000000000000000000..90ad997e3b2ea5b121f3db2d4e19654a12057615
--- /dev/null
+++ b/WV5/web-fonts.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+ <meta charset='UTF-8'/>
+ <title>Web Typography</title>
+ <link rel='stylesheet' href='typo.css'/>
+ <style>
+ .system-fonts {
+ font-family: sans-serif;
+ }
+ </style>
+</head>
+<body>
+
+ <header>
+ <nav>
+ <ul>
+ <li class='selected'>Web Fonts</li>
+ <li><a href='history.html'>History</a></li>
+ <li><a href='indents.html'>Indents</a></li>
+ <li><a href='alignment.html'>Alignment</a></li>
+ <li><a href='spacing.html'>Spacing</a></li>
+ <li><a href='line-length.html'>Line Length</a></li>
+ </ul>
+ </nav>
+ <div class='hero'>
+ <h1>Web Typography</h1>
+ </div>
+ </header>
+
+ <div class='page'>
+
+ <section class='section section--gray'>
+ <h2>Web Fonts</h2>
+
+ <p>This paragraph is using a web font call <em>Roboto Light</em>. It’s a
+ little more refined and lends some <strong>unique character</strong> to
+ the web page.</p>
+ </section>
+
+ <section class='section section--gray system-fonts'>
+ <h2>System Fonts</h2>
+
+ <p>This paragraph is using a built-in sans-serif font, which is probably
+ Arial or Helvetica. It’s not exactly ugly, but it’s definitely familiar.</p>
+ </section>
+
+ </div>
+
+</body>
+</html>