Colores y fuentes

Sistemas de color (RGB, HEX, HSL)

En CSS, los colores se pueden definir utilizando diferentes sistemas de notación que nos permiten especificar con precisión qué color queremos aplicar a nuestros elementos. Cada sistema tiene sus ventajas y casos de uso específicos, desde la simplicidad del formato hexadecimal hasta la intuitividad del modelo HSL para ajustar colores.

Formato hexadecimal (HEX)

El sistema hexadecimal es probablemente el más utilizado en desarrollo web. Utiliza una combinación de números del 0 al 9 y letras de la A a la F para representar colores, siempre precedido por el símbolo #.

/* Sintaxis completa de 6 dígitos */
.titulo {
  color: #FF5733; /* Naranja vibrante */
}

.fondo {
  background-color: #2E8B57; /* Verde mar */
}

/* Sintaxis abreviada de 3 dígitos */
.texto {
  color: #F53; /* Equivale a #FF5533 */
}

El formato hexadecimal funciona dividiendo el color en tres componentes: rojo, verde y azul. Los primeros dos dígitos representan el rojo, los siguientes dos el verde, y los últimos dos el azul. Cada par puede tener valores desde 00 (ausencia total del color) hasta FF (intensidad máxima).

<div class="ejemplo-hex">
  <p class="rojo-puro">Texto en rojo puro</p>
  <p class="verde-puro">Texto en verde puro</p>
  <p class="azul-puro">Texto en azul puro</p>
</div>

.rojo-puro {
  color: #FF0000; /* Solo componente rojo al máximo */
}

.verde-puro {
  color: #00FF00; /* Solo componente verde al máximo */
}

.azul-puro {
  color: #0000FF; /* Solo componente azul al máximo */
}

Sistema RGB

La función rgb() permite definir colores especificando directamente los valores de rojo, verde y azul en una escala de 0 a 255. Este sistema es más intuitivo cuando necesitas ajustar programáticamente los componentes de color.

.encabezado {
  color: rgb(255, 87, 51); /* Mismo naranja que #FF5733 */
}

.sidebar {
  background-color: rgb(46, 139, 87); /* Mismo verde que #2E8B57 */
}

/* Con transparencia usando rgba() */
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Negro con 50% de opacidad */
}

La ventaja del sistema RGB es su claridad numérica. Cada componente tiene un rango fijo de 0 a 255, donde 0 significa ausencia total del color y 255 representa la intensidad máxima. La función rgba() añade un cuarto parámetro para la transparencia (alpha), con valores de 0 (completamente transparente) a 1 (completamente opaco).

<div class="galeria">
  <div class="caja roja">Roja</div>
  <div class="caja verde">Verde</div>
  <div class="caja azul">Azul</div>
  <div class="caja transparente">Semi-transparente</div>
</div>

.caja {
  padding: 20px;
  margin: 10px;
  color: white;
  font-weight: bold;
}

.roja {
  background-color: rgb(220, 53, 69);
}

.verde {
  background-color: rgb(40, 167, 69);
}

.azul {
  background-color: rgb(0, 123, 255);
}

.transparente {
  background-color: rgba(108, 117, 125, 0.7);
}

Sistema HSL

El modelo HSL (Hue, Saturation, Lightness) es el más intuitivo para diseñadores, ya que imita cómo percibimos naturalmente los colores. Permite ajustar el tono, la saturación y la luminosidad por separado.

.boton-primario {
  background-color: hsl(210, 100%, 50%); /* Azul puro */
}

.boton-secundario {
  background-color: hsl(210, 50%, 70%); /* Azul desaturado y más claro */
}

/* Con transparencia usando hsla() */
.modal-fondo {
  background-color: hsla(0, 0%, 0%, 0.8); /* Negro semi-transparente */
}

En HSL, el primer valor representa el matiz (hue) en grados de 0 a 360, correspondiendo a la rueda de colores: 0° es rojo, 120° es verde, 240° es azul. El segundo valor es la saturación en porcentaje: 0% es gris, 100% es el color puro. El tercer valor es la luminosidad: 0% es negro, 50% es el color normal, 100% es blanco.

<div class="paleta-colores">
  <div class="color base">Color base</div>
  <div class="color claro">Versión clara</div>
  <div class="color oscuro">Versión oscura</div>
  <div class="color desaturado">Versión desaturada</div>
</div>

.color {
  padding: 15px;
  margin: 5px;
  color: white;
  text-align: center;
}

.base {
  background-color: hsl(300, 80%, 50%); /* Magenta vibrante */
}

.claro {
  background-color: hsl(300, 80%, 70%); /* Mismo tono, más claro */
}

.oscuro {
  background-color: hsl(300, 80%, 30%); /* Mismo tono, más oscuro */
}

.desaturado {
  background-color: hsl(300, 30%, 50%); /* Mismo tono, menos saturado */
}

Comparación práctica de los sistemas

Cada sistema tiene ventajas específicas según el contexto de uso. El hexadecimal es compacto y universal, RGB es preciso para cálculos programáticos, y HSL es ideal para crear variaciones de un mismo color.

/* El mismo color expresado en los tres sistemas */
.ejemplo-equivalencias {
  /* Todas estas reglas producen el mismo color azul */
  color: #4A90E2;
  color: rgb(74, 144, 226);
  color: hsl(212, 73%, 59%);
}

/* Crear una paleta cohesiva es más fácil con HSL */
.tema-azul {
  --color-primario: hsl(212, 73%, 59%);
  --color-secundario: hsl(212, 73%, 75%);
  --color-acento: hsl(212, 73%, 45%);
}

La elección del sistema depende de tus necesidades: usa hexadecimal para colores específicos de una paleta de diseño, RGB cuando necesites manipular componentes individuales, y HSL cuando quieras crear variaciones armoniosas de un color base.

Propiedades de texto y tipografía

La tipografía en CSS nos permite controlar cómo se ve y se comporta el texto en nuestras páginas web. Las propiedades tipográficas van más allá de simplemente cambiar la fuente: nos permiten ajustar el tamaño, peso, espaciado y alineación para crear una experiencia de lectura óptima.

Propiedades básicas de fuente

La propiedad **font-family** define qué tipografía utilizar para el texto. Es recomendable especificar múltiples opciones como respaldo, terminando siempre con una familia genérica.

.titulo-principal {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.texto-cuerpo {
  font-family: "Georgia", "Times New Roman", serif;
}

.codigo {
  font-family: "Fira Code", "Consolas", monospace;
}

<h1 class="titulo-principal">Título con fuente sans-serif</h1>
<p class="texto-cuerpo">Párrafo con fuente serif para mejor lectura.</p>
<code class="codigo">console.log("Código con fuente monoespaciada");</code>

La propiedad **font-size** controla el tamaño del texto. Las unidades más utilizadas son px para tamaños fijos, em para tamaños relativos al elemento padre, y rem para tamaños relativos al elemento raíz.

.encabezado-grande {
  font-size: 2.5rem; /* 40px si la raíz es 16px */
}

.texto-normal {
  font-size: 1rem; /* 16px por defecto */
}

.texto-pequeño {
  font-size: 0.875rem; /* 14px */
}

.nota-pie {
  font-size: 0.75rem; /* 12px */
}

Control del peso y estilo

La propiedad **font-weight** define el grosor de los caracteres. Puedes usar valores numéricos del 100 al 900 o palabras clave como normal y bold.

.texto-fino {
  font-weight: 300; /* Light */
}

.texto-normal {
  font-weight: 400; /* Normal, equivale a 'normal' */
}

.texto-medio {
  font-weight: 500; /* Medium */
}

.texto-negrita {
  font-weight: 700; /* Bold, equivale a 'bold' */
}

.texto-extra-negrita {
  font-weight: 900; /* Black */
}

<div class="ejemplos-peso">
  <p class="texto-fino">Texto con peso 300 (light)</p>
  <p class="texto-normal">Texto con peso normal (400)</p>
  <p class="texto-medio">Texto con peso medio (500)</p>
  <p class="texto-negrita">Texto en negrita (700)</p>
  <p class="texto-extra-negrita">Texto extra negrita (900)</p>
</div>

La propiedad **font-style** permite aplicar cursiva o mantener el texto en posición normal.

.cita {
  font-style: italic;
}

.enfasis {
  font-style: normal; /* Remueve la cursiva heredada */
}

Espaciado y altura de línea

El **line-height** controla el espacio vertical entre líneas de texto. Un valor entre 1.4 y 1.6 suele proporcionar la mejor legibilidad para texto de párrafo.

.texto-compacto {
  line-height: 1.2; /* Líneas más juntas */
}

.texto-legible {
  line-height: 1.5; /* Espaciado óptimo para lectura */
}

.texto-espaciado {
  line-height: 2; /* Líneas muy separadas */
}

<div class="ejemplo-line-height">
  <p class="texto-compacto">
    Este párrafo tiene un line-height de 1.2, lo que hace que las líneas 
    estén más juntas y el texto se vea más compacto.
  </p>
  <p class="texto-legible">
    Este párrafo tiene un line-height de 1.5, proporcionando un espaciado 
    cómodo para la lectura prolongada.
  </p>
</div>

La propiedad **letter-spacing** ajusta el espacio horizontal entre caracteres, útil para títulos o efectos tipográficos especiales.

.titulo-espaciado {
  letter-spacing: 0.1em; /* Aumenta el espaciado */
}

.texto-condensado {
  letter-spacing: -0.02em; /* Reduce ligeramente el espaciado */
}

.logo {
  letter-spacing: 0.3em; /* Mucho espaciado para efecto visual */
  text-transform: uppercase;
}

Alineación y transformación de texto

La propiedad **text-align** controla la alineación horizontal del texto dentro de su contenedor.

.centrado {
  text-align: center;
}

.justificado {
  text-align: justify;
}

.derecha {
  text-align: right;
}

.izquierda {
  text-align: left; /* Valor por defecto */
}

<div class="ejemplos-alineacion">
  <p class="centrado">Texto centrado</p>
  <p class="derecha">Texto alineado a la derecha</p>
  <p class="justificado">
    Este texto está justificado, lo que significa que se ajusta 
    para ocupar todo el ancho disponible distribuyendo el espaciado.
  </p>
</div>

La propiedad **text-transform** modifica la capitalización del texto sin alterar el HTML original.

.mayusculas {
  text-transform: uppercase;
}

.minusculas {
  text-transform: lowercase;
}

.capitalizado {
  text-transform: capitalize; /* Primera letra de cada palabra en mayúscula */
}

Decoración y efectos de texto

La propiedad **text-decoration** permite añadir o quitar líneas decorativas como subrayados o tachados.

.enlace-sin-subrayado {
  text-decoration: none; /* Quita el subrayado de los enlaces */
}

.texto-subrayado {
  text-decoration: underline;
}

.texto-tachado {
  text-decoration: line-through;
}

.texto-sobrayado {
  text-decoration: overline;
}

<div class="decoraciones">
  <p class="texto-subrayado">Texto con subrayado</p>
  <p class="texto-tachado">Texto tachado</p>
  <a href="#" class="enlace-sin-subrayado">Enlace sin subrayado</a>
</div>

Para un control más preciso, puedes usar las propiedades individuales de text-decoration:

.decoracion-personalizada {
  text-decoration-line: underline;
  text-decoration-color: #e74c3c;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

Propiedades modernas para mejor legibilidad

CSS moderno incluye propiedades que mejoran la experiencia de lectura. La propiedad **text-rendering** optimiza el renderizado del texto.

.texto-optimizado {
  text-rendering: optimizeLegibility;
}

Para textos largos, **hyphens** permite la división automática de palabras:

.texto-largo {
  hyphens: auto;
  word-wrap: break-word;
}

Ejemplo práctico completo

Aquí tienes un ejemplo que combina múltiples propiedades tipográficas para crear un diseño de texto profesional:

<article class="articulo">
  <h1 class="titulo-articulo">Diseño Tipográfico Moderno</h1>
  <p class="entradilla">
    Una introducción que destaca los puntos clave del artículo con un estilo 
    diferenciado que invita a la lectura.
  </p>
  <p class="cuerpo-texto">
    El texto del cuerpo principal debe ser fácil de leer, con un espaciado 
    adecuado y una tipografía que no fatigue la vista durante la lectura prolongada.
  </p>
</article>

.articulo {
  max-width: 600px;
  margin: 0 auto;
}

.titulo-articulo {
  font-family: "Roboto", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.entradilla {
  font-family: "Georgia", serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: #7f8c8d;
  font-style: italic;
  text-align: center;
  margin-bottom: 2rem;
}

.cuerpo-texto {
  font-family: "Georgia", serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #2c3e50;
  text-align: justify;
  hyphens: auto;
}

Este enfoque tipográfico crea una jerarquía visual clara donde cada elemento tiene un propósito específico y contribuye a una experiencia de lectura agradable y profesional.

Google Fonts e importación de fuentes

El uso de fuentes personalizadas permite crear diseños únicos y mantener la consistencia visual de un proyecto. Google Fonts ofrece una amplia colección de tipografías gratuitas que podemos integrar fácilmente en nuestros sitios web, mientras que también podemos importar fuentes desde otras fuentes o archivos locales.

Importación desde Google Fonts

Google Fonts proporciona múltiples métodos para integrar sus tipografías. El método más común es usar la regla @import directamente en nuestro archivo CSS, lo que mantiene todo el código de estilo en un solo lugar.

/* Importar una sola fuente */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* Importar múltiples fuentes */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Open+Sans:wght@400;600&display=swap');

.titulo {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.cuerpo-texto {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

<div class="contenido">
  <h1 class="titulo">Título con Roboto</h1>
  <p class="cuerpo-texto">Párrafo con Open Sans para mejor legibilidad.</p>
</div>

La URL de Google Fonts incluye parámetros importantes: wght especifica los pesos que necesitas (300, 400, 700, etc.), y display=swap mejora la experiencia del usuario mostrando una fuente del sistema hasta que la personalizada se carga completamente.

Método alternativo con etiqueta link

También puedes importar las fuentes directamente en el HTML usando la etiqueta <link> en la sección <head>. Este método puede ofrecer mejor rendimiento en algunos casos.

<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
  <!-- Contenido de la página -->
</body>
</html>

.contenedor {
  font-family: 'Inter', sans-serif;
}

.texto-ligero {
  font-weight: 300;
}

.texto-normal {
  font-weight: 400;
}

.texto-medio {
  font-weight: 500;
}

.texto-negrita {
  font-weight: 700;
}

Las líneas preconnect establecen una conexión temprana con los servidores de Google Fonts, reduciendo el tiempo de carga de las tipografías.

Optimización de la carga de fuentes

Para mejorar el rendimiento, es importante cargar solo los pesos y estilos que realmente vas a utilizar en tu proyecto.

Importación de fuentes locales

Además de Google Fonts, puedes usar fuentes almacenadas localmente en tu servidor utilizando la regla **@font-face**. Este método te da control total sobre las fuentes y evita dependencias externas.

@font-face {
  font-family: 'MiFuentePersonalizada';
  src: url('../fonts/mi-fuente.woff2') format('woff2'),
       url('../fonts/mi-fuente.woff') format('woff'),
       url('../fonts/mi-fuente.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.texto-personalizado {
  font-family: 'MiFuentePersonalizada', Arial, sans-serif;
}

<div class="contenido-personalizado">
  <h1 class="texto-personalizado">Título con fuente personalizada</h1>
  <p>Si la fuente no se carga, se usará Arial como respaldo.</p>
</div>

Es importante incluir múltiples formatos de fuente para compatibilidad con diferentes navegadores. WOFF2 es el formato más moderno y eficiente, WOFF es compatible con navegadores más antiguos, y TTF sirve como respaldo universal.

Gestión de múltiples fuentes en un proyecto

Cuando trabajas con varias fuentes, es recomendable organizar las importaciones al inicio de tu archivo CSS y definir variables CSS para facilitar el mantenimiento.

/* Importaciones de fuentes al inicio del archivo */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');

/* Variables CSS para las fuentes */
:root {
  --fuente-titulo: 'Playfair Display', serif;
  --fuente-cuerpo: 'Source Sans Pro', sans-serif;
  --fuente-sistema: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.encabezado-principal {
  font-family: var(--fuente-titulo);
  font-weight: 700;
}

.texto-articulo {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
}

.boton {
  font-family: var(--fuente-sistema); /* Fuente del sistema para elementos de interfaz */
}

<article class="articulo-ejemplo">
  <h1 class="encabezado-principal">El Arte de la Tipografía</h1>
  <p class="texto-articulo">
    Este párrafo utiliza Source Sans Pro, una tipografía optimizada para 
    la lectura en pantalla que mantiene la legibilidad en diferentes tamaños.
  </p>
  <button class="boton">Leer más</button>
</article>

Consideraciones de rendimiento y accesibilidad

La propiedad **font-display: swap** es crucial para mejorar la experiencia del usuario. Permite que el texto se muestre inmediatamente con una fuente del sistema mientras la fuente personalizada se descarga en segundo plano.

/* Para fuentes locales */
@font-face {
  font-family: 'TituloEspecial';
  src: url('../fonts/titulo-especial.woff2') format('woff2');
  font-display: swap; /* Mejora la percepción de velocidad */
}

/* Para Google Fonts, incluir en la URL */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

También es importante proporcionar fuentes de respaldo adecuadas que mantengan características similares a la fuente principal:

.titulo-elegante {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  /* Si Playfair Display no carga, Times New Roman es un serif similar */
}

.texto-moderno {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Progresión lógica de fuentes sans-serif similares */
}

.codigo-fuente {
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  /* Fuentes monoespaciadas para código */
}