Actividad: Utiliza varias tipografías
Profesor: Javier López
Volver
Descargar html de base
Actividad
Resultado final
Solucionador

Actividad: Utiliza varias tipografías
En esta actividad vamos a centrarnos en la utilización de fuentes para nuestra web.

Aunque, a estilos prácticos la utilización conjunta de tres fuentes podría no ser lo más adecuado, en este caso al tratarse de una práctica, lo vamos a pasar por alto.

  1. Busca tres fuentes (ya sea en Google fonts o en otros servicios) una light, otra media y otra bold (nosotros proponemos 'inder', 'alegreya-light' y 'alegreya-bold').
  2. Coloca los tres ficheros (ttf) en una carpeta (si lo deseas puedes utilizar la carpeta CSS).
  3. Identifica las tres fuentes en 'estilos.css' para su utilización general en todos los htmls que al final tendremos.
  4. Añade un nombre id al <div> que contiene el título "Quiénes somos" (que hay al inicio del <section>).
  5. Elimina los encabezados <h5> que hay en #titulo (proveniente de las versiones anteriores).
  6. Aplica estas fuentes al contenido ya creado, de la siguiente manera.
    • En el <header> utiliza la fuente media (alegreya-light) con un tamaño de 24px y color blanco.
    • En el <section> utiliza la fuente para el texto(inder) de un tamaño de 12px.
    • En el <nav> utiliza la fuente bold (alegreya-bold) con un tamaño de 25px.
    • En el <footer> utiliza la fuente media (alegreya-light) con un tamaño de 13px y de color 'silver'.
    • En el #titulo utiliza la fuente media (alegreya-light) con un tamaño de 18px y un margen superior de 47px.