Tipografías

Utilización de varias tipografías

Para conseguir las tipografías de este ejemplo hemos accedido a google fonts y hemos cogido:

Inder (para párrafos y texto normal)

Alegreya bold (para títulos)

Alegreya light (para subtítulos)

Hemos guardado estas fuentes (con formato .ttf) en la misma carpeta donde tenemos el fichero enlaces.css y para enlazarlas utilizamos este código:

estilos.css

@font-face{
  font-family:inder;
  src: url(inder.ttf) format('truetype');
}
@font-face{
  font-family:alegreya_bold;
  src: url(alegreya_bold.ttf) format('truetype');
}
@font-face{
  font-family:alegreya_light;
  src: url(alegreya_light.ttf) format('truetype');
}

Como queremos utilizar 3 fuentes tenemos que incluir 3 selectores, una para cada fuente.

Se debe enlazar cada una de las fuentes que queramos usar utilizando '@font-face{'.

Con font-family indicamos el nombre que le queremos dar a la fuente (no tiene porqué coincidir con su nombre real).

Con src: indicamos dónde se encuentra el fichero .ttf de la fuente y posteriormente si es 'truetype' (ttf) o bien 'opentype' (otf).

Con esto sólo le decimos al navegador que tenga en cuenta estas fuentes por si decidimos utilizarlas, que es lo que vamos a hacer a continuación.

estilos.css

header{
  font-family:alegreya-light;
  font-size:24px;
  color:white;
}
section{
  font-family:inder;
  font-size:12px;
}
nav{
  font-family:alegreya-bold;
  color:silver;
  font-size:25px;
}
footer{
  font-family:alegreya-light;
  font-size:13px;
  color:silver;
}
#titulo{
  font-family:alegreya-light;
  font-size:18px;
  margin-top:47px;
}

Para el nombre de la empresa del <header> (Aprende jugando, S.L.) utilizamos alegreya-light a un tamaño de 24 píxeles y color blanco.

Para el texto de cada uno de los 3 <article> utilizamos inder a un tamaño de 12 píxeles.
(Al no indicar color se aplica el color por defecto: el negro).

Para los elementos del <nav> (el 'Quiénes somos' y los 2 enlaces) utilizamos alegreya-bold a un tamaño de 25 píxeles.
(El texto que está en color negro identifica al código CSS que ya teníamos creado de temas anteriores).

Para el texto del <footer> utilizamos alegreya-light a un tamaño de 13 píxeles y de color gris claro.

Para un div (que todavía no existe) llamado #titulo utilizamos alegreya-light a un tamaño de 18 píxeles.

y aprovechamos para darle un margen superior con margen-top:47px;.

Vamos a hacer algunas correcciones respecto al código que teníamos de los temas anteriores y añadir código nuevo que no existía en la versión anterior (como el nombre de un div con id #titulo) o eliminar los <h5> del <footer>.

<!doctype html>
<html>

  <head>
	<meta charset="utf-8"/>
	<title>Quiénes somos</title>
	<link rel=stylesheet href="css/estilos.css" type="text/css"/>

	<style type="text/css">
	</style>
  </head>

  <body>
     <header>
 	<img src="img/logo.png" align="center">
 	 Aprende jugando, S.L.
     </header>

     <nav>
        <ul>
          <li><img src="img/icono1.png" align="top"><p>
              Quiénes somos</li>
          <li><img src="img/icono2.png" align="top"><p>
              <a href="servicios.html">Servicios</a></li>
          <li><img src="img/icono3.png" align="top"><p>
              <a href="contacto.html">Contacto/a></li>
        </ul>
     </nav>

   <section id="contenido">
 	 <div id="titulo">
 	      <h2>Quiénes somos</h2>
 	 </div>

 	 <article>
 	   <div>
 	      <img src="img/imagen1.png">
 	   </div>
 	      <h3>Con vocación educativa</h3>
 	      Somos una empresa compuesta por <b>maestros, pedagogos,
 	      guionistas y especialistas en las nuevas tecnologías</b>
 	      para ofrecerle los mejores servicios.
 	      <p>
 	      Anteponemos la educación a la tecnología.
 	 </article>

 	 <article>
 	    <div>
 	      <img src="img/imagen2.png">
 	    </div>
 	      <h3>Con larga experiencia</h3>
 	      Llevamos <b>desde 1998</b> ofreciendo propuestas
 	      diferentes y acciones educativas concretas a escenarios
 	      diversos.
 	      <p>
 	      Diseñamos una solución educativa creativa a su problema
 	      cotidiano.
 	 </article>

 	 <article>
 	    <div>
 	      <img src="img/imagen3.png">
 	    </div>
 	      <h3>Con entusiasmo y motivación</h3>
 	      La <b>motivación</b> y el <b>entusiasmo personal</b>
 	      mueve montañas y es lo que nos hace diferentes. El
 	      disfrutar por lo que hacemos nos distingue.
 	      <p>
 	      Pruébenos una vez...
 	      y se convencerá para siempre.
 	 </article>
   </section>

   <footer>
 	    <h5>
 	       &copy;2015. Aprende jugando, S.L.<br>
 	       c/ del Álamo rojo, 1, local. Barcelona.
 	    </h5>
   </footer>
 </body>
</html>

Los cambios son mínimos:

Añadir el nombre de id="titulo" al div que contiene el texto del título.
(Ubicado más o menos en la parte media del código y coloreado en color rojo).

Eliminar los encabezados <h5> y </h5> que rodean al contenido del <footer>.
(Ubicado al final del código y coloreado en color azul).

En el siguiente tema vamos a colocar los 3 cuadros <article> uno a la derecha del otro: