Aunque es cierto que una imagen o un vídeo ayuda (y mucho) a la conversión, no es menos cierto que la materia prima básica de cualquier Web son los textos, ya que se usan para que el cliente entienda quienes somos, que vendemos y sobre todo que queremos de él. Por eso vamos a repasar diferentes estilos CSS que nos permitirá modificar su aspecto para diferentes circunstancias.
Definir la fuente
En primer lugar debemos seleccionar la fuente que vamos a usar en nuestra web. Habitualmente se suele usar una fuente para toda la Web o como mucho 2, porque sino puede que hagamos que nuestra web sea confusa e incómoda. Para establecer una fuente tenemos 2 opciones:
- Seleccionar una de las fuentes por defecto de cualquier ordenador que son: Arial, Helvetica, sans-serif, Verdana, etc.
- Utilizar una fuente personalizada gratuita o de pago. Podemos encontrar fuentes gratuitas en Google Fonts.
En el primer caso su uso es muy sencillo:
p{
font-family:Arial, Helvetica, sans-serif;
}
En este caso establecemos que la fuente de los párrafos sea Arial, si el navegador no encuentra esa fuente en el dispositivo, mostraría el diseño Helvetica y en último caso sans-serif. Estas fuentes son muy parecidas y son muy muy frecuentes.
En el segundo existen 2 posibilidades:
- Descargarse una fuente y usarla en nuestra web.
- Usar la fuente desde un servidor externo como google font.
En el primer caso primero tenemos que descargarnos la fuente, descomprimirla y subirla en una carpeta dentro de nuestro proyecto y a continuación crear las reglas para poder usar esa fuente en nuestro CSS.
@font-face{
font-family:'fuente';
src:url(carpeta/fuente.eot);
src:url(carpeta/fuente.svg);
src:url(carpeta/fuente.ttf);
}
@font-face{
font-family:'fuenteBold';
src:url(carpeta/PfennigBold.eot);
src:url(carpeta/PfennigBold.svg);
src:url(carpeta/PfennigBold.ttf);
}
En este caso cargamos 2 fuentes, una normal y la misma fuente en negrita (bold), si pensamos usar cursiva debemos descargarla e instalarla. A partir de este momento podemos usar la fuente:
p{ font-family: fuente; }
En segundo lugar podemos agregar una fuente de Google Fonts sin necesidad de descargarnos la fuente. Buscamos la fuente y entramos dentro, y entonces indicamos que queremos añadirla clickando en el botón de arriba a la derecha. Abajo podemos ver las fuentes añadidas pinchando en el botón family selected. Además nos muestra en ese bloque el link que debemos añadir en las páginas que queremos usar esa fuente (Recomendación: Si solo usas esas fuentes en algunas páginas, intenta cargar esta línea para ellas no para toda la web, ya que ralentiza la carga y penaliza de cara a los buscadores).
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
p{ font-family: Lato; }
A la hora de seleccionar una fuente ten en cuenta que no todas tienen soporte a los caracteres latinos, y que si quieres poner negrita o en cursiva debes revisar que la fuente permita esos estilos.
Dar estilos de diseño a la fuente
Ahora que ya hemos establecido nuestra fuente podemos dar diferentes estilos a cada bloque de texto. Por ejemplo vamos a dar diseño al titular o encabezado h1 de nuestra web.
h1{
padding:5px;
font-style:italic;
font-weight:bold;
text-decoration:underline;
}
En este ejemplo y por orden estamos estableciendo el titular:
- Un espacio de 5 pixeles por cada lado y arriba y abajo.
- Que el texto este en cursiva. Siempre y cuando la fuente permita fuente cursiva.
- Que el texto este en negrita. Siempre y cuando la fuente lo permita.
- Y que tenga el texto subrayado.
Otra opción es establecer diferentes tamaños de fuente para diferentes bloques. Por ejemplo queremos que el H1 sea mayor que el h2, etc.
h1{
font-size:3.5em;
}
h2{
font-size:2.5em;
}
El valor em hace referencia al tamaño del carácter m y es el formato más recomendado para realizar webs responsive. Si tenemos en cuenta que el 1em hace referencia al tamaño base, 3.5 es lo mismo que decir que el tamaño sea un 3.5% más grande que la principal que 100% ósea 350% y si queremos que la fuente sea más pequeña seria 0.8 por ejemplo.