Clase 9 – Tipografía en CSS3

La tipografía en CSS3 es un aspecto esencial del diseño web, crucial para la legibilidad, accesibilidad y estética general de un sitio.

CSS3 ofrece un amplio rango de propiedades tipográficas que permiten a los diseñadores web controlar detalladamente el texto.

Este artículo explora cómo utilizar estas propiedades para crear experiencias de usuario ricas y atractivas.

Fuentes y Tipos de Letra

CSS3 ha mejorado significativamente la forma en que los diseñadores pueden trabajar con fuentes.

font-family

Define la familia tipográfica para un elemento.

Ejemplo:

body {
  font-family: Arial, sans-serif;
}

@font-face

Permite incorporar fuentes personalizadas que no están instaladas en el sistema del usuario.

Ejemplo:

@font-face {
  font-family: 'MiFuentePersonalizada';
  src: url('mifuente.woff2') format('woff2');
}

Control del Tamaño de Fuente

font-size

Establece el tamaño de la fuente. Puede ser en unidades relativas como em o rem, o absolutas como px o pt.

Ejemplo:

p {
  font-size: 16px;
}

Estilizando el Texto

• font-weight: Controla el grosor de la fuente.
• font-style: Aplica estilos como itálica o cursiva.
• text-transform: Transforma el texto a mayúsculas, minúsculas o capitalización de cada palabra.
• text-decoration: Añade decoraciones como subrayado o tachado.

Ejemplo:

h1 {
  font-weight: bold;
  text-transform: uppercase;
}

Espaciado y Alineación

• line-height: Ajusta el espacio vertical entre líneas de texto.
• letter-spacing y word-spacing: Controlan el espaciado entre letras y palabras, respectivamente.
• text-align: Alinea el texto a la izquierda, derecha, centro o justificado.

Ejemplo:

p {
  line-height: 1.5;
  text-align: justify;
}

Sombras y Efectos

• text-shadow: Añade sombra al texto, mejorando la profundidad y el contraste.

Ejemplo:

h1 {
  text-shadow: 2px 2px 4px #000;
}

Mejores Prácticas en Tipografía CSS3

• Legibilidad: Elige tamaños de fuente y colores de texto que aseguren una lectura cómoda.
• Consistencia: Mantén una paleta de fuentes coherente a lo largo del sitio.
• Responsividad: Utiliza unidades relativas como em o rem para tamaños de fuente para mejorar la adaptabilidad del texto en diferentes dispositivos.

La tipografía en CSS3 es una herramienta poderosa en el arsenal del diseño web, permitiendo a los diseñadores expresar la jerarquía, tono y personalidad de un sitio.

Dominar las propiedades tipográficas de CSS3 es esencial para crear experiencias de usuario que no solo sean atractivas, sino también funcionales y accesibles.