Dar estilos al texto con CSS

Home » Blog » Dar estilos al texto con CSS

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:

  1. Seleccionar una de las fuentes por defecto de cualquier ordenador que son: Arial, Helvetica, sans-serif, Verdana, etc.
  2. 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:

  1. Descargarse una fuente y usarla en nuestra web.
  2. 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 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.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023