Serif vs San Serif

index.html

<h1>LOREM</h1><hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id velit eu enim lobortis bibendum ultrices eget nunc. Quisque pharetra cursus nisl, in consequat nibh euismod non. Mauris hendrerit semper venenatis. Donec fringilla metus vel nisl rhoncus, at placerat arcu faucibus. </p>


<h1 class="san">LOREM</h1><hr class="two">
<p class="san"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id velit eu enim lobortis bibendum ultrices eget nunc. Quisque pharetra cursus nisl, in consequat nibh euismod non. Mauris hendrerit semper venenatis. Donec fringilla metus vel nisl rhoncus, at placerat arcu faucibus. </p>

serif-vs-san-serif.markdown

Serif vs San Serif

A Pen by Marcello Hutchinson-Trujillo on CodePen.

License.

style.css

h1 {
text-align: center;
font-family: Didot;
font-size: 70px;
padding-top: 30px;
padding-bottom: 0px;
}
p{
width: 50vw;
text-align: center;;
margin-left: auto;
margin-right: auto;
 font-size: 30px;
 color: black;
 font-family: Didot;
 font-style: italic;
}

.san{
  font-family: Futura
}

hr {
    border: none;
    height: 4px;
    /* Set the hr color */
    color:black; /* old IE */
    background-color: black; /* Modern Browsers */
  width: 70px;
}

hr.two{
  border: none;
    height: 8px;
    /* Set the hr color */
    color:black; /* old IE */
    background-color: black; /* Modern Browsers */
  width: 70px;
}