HTML
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Tipografia</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800|Oswald" rel="stylesheet">
<link href="Stili.css" rel="stylesheet">
</head>
<body>
<header class="main-header">
<div class="logo"> Logo </div>
<nav class="navbar">
<ul>
<li><a href="#titoli">Titoli</a></li>
<li><a href="#liste">Liste</a></li>
<li><a href="#figurine">Figurine</a></li>
</ul>
</nav>
</header>
<section id="titoli">
<header>
<h1>Titoli</h1>
</header>
<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
</section>
<section id="liste">
<header>
<h1>Liste</h1>
</header>
<div>
<ul>
<li>Elemento lista</li>
<li>Elemento lista</li>
<li>Sottolista
<ul>
<li>Elemento sottolista</li>
<li>Elemento sottolista</li>
</ul>
</li>
<li>Elemento lista</li>
<li>Elemento lista</li>
</ul>
</div>
<div>
<ol>
<li>Elemento lista</li>
<li>Elemento lista</li>
<li>Sottolista
<ul>
<li>Elemento sottolista</li>
<li>Elemento sottolista</li>
</ul>
</li>
<li>Elemento lista</li>
<li>Elemento lista</li>
</ol>
</div>
</section>
<section id="figurine">
<header>
<h1>Figurine</h1>
</header>
<figure>
<img src="http://lorempixel.com/1024/640?p=1" alt="Immagine casuale">
<figcaption>Immagine numero 1</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/1024/640?p=2" alt="Immagine casuale">
<figcaption>Immagine numero 2</figcaption>
</figure>
<figure>
<video controls width="540">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Il tuo browser non supporta il tag HTML5 video
</video>
</figure>
<figure>
<iframe width="640" height="360" src="https://www.youtube.com/embed/aCI_uYdgNrM" frameborder="0" allowfullscreen></iframe>
</figure>
</section>
<footer>
© 2017 Accademia di Belle Arti di Urbino
</footer>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body {
font-family:'Open Sans', sans-serif;
font-size: 18px;
line-height: 1.4;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Oswald", sans-serif;
font-weight: 400;
}