Tipografía, Texto y Color en CSS | Guía Completa de Estilos

Gestión del Color con la propiedad color

La propiedad color define el color del texto y del contenido en primer plano. Es una de las bases del diseño visual en CSS y no debe confundirse con el color de fondo. Se puede definir usando palabras clave, valores hexadecimales o formatos RGB y RGBA.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Seleccionamos el título principal h1 */
h1 {
  /* Definimos el color del texto usando hexadecimal */
  color: #2c3e50;
}

/* Seleccionamos los elementos span */
span {
  /* Color negro con 50% de transparencia usando RGBA */
  color: rgba(0, 0, 0, 0.5);
}

/* Seleccionamos el título principal h1 */
h1 {
  /* Definimos el color del texto usando hexadecimal */
  color: #2c3e50;
}

/* Seleccionamos los elementos span */
span {
  /* Color negro con 50% de transparencia usando RGBA */
  color: rgba(0, 0, 0, 0.5);
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Clase usada para resaltar texto importante */
.destacado {
  /* Color definido con ayuda del color picker del editor */
  color: #e74c3c;
}

/* Clase usada para resaltar texto importante */
.destacado {
  /* Color definido con ayuda del color picker del editor */
  color: #e74c3c;
}

Selector de color visual integrado en VS Code — El uso de color pickers acelera el trabajo y reduce errores al definir colores.

Familia tipográfica con font-family

La propiedad font-family define qué tipografía se utiliza. Se recomienda usar una pila de fuentes para asegurar compatibilidad entre distintos sistemas.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

body {
  /* Fuente principal personalizada */
  /* Fuente alternativa si la primera no está disponible */
  /* Familia genérica como respaldo final */
  font-family: 'Open Sans', Helvetica, sans-serif;
}

code {
  /* Fuente monoespaciada ideal para mostrar código */
  font-family: 'Fira Code', monospace;
}

body {
  /* Fuente principal personalizada */
  /* Fuente alternativa si la primera no está disponible */
  /* Familia genérica como respaldo final */
  font-family: 'Open Sans', Helvetica, sans-serif;
}

code {
  /* Fuente monoespaciada ideal para mostrar código */
  font-family: 'Fira Code', monospace;
}

Ejemplo visual de pila de fuentes en CSS — Las font stacks garantizan compatibilidad y buena lectura en todos los sistemas.

Uso de fuentes web

Las fuentes web permiten usar tipografías que no dependen del sistema del usuario. Se descargan automáticamente cuando se carga el sitio.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Importamos la fuente Roboto desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Aplicamos la fuente importada a un párrafo */
.parrafo-moderno {
  font-family: 'Roboto', sans-serif;
}

/* Importamos la fuente Roboto desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Aplicamos la fuente importada a un párrafo */
.parrafo-moderno {
  font-family: 'Roboto', sans-serif;
}

htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, ~~sin videos fríos~~ ni ~~cursos masivos~~.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

Tamaño del texto

La propiedad font-size controla el tamaño del texto. Usar unidades relativas como rem mejora la accesibilidad y escalabilidad.

Comparación visual entre unidades px y rem en tipografía — El uso de `rem` permite que el texto escale según las preferencias del usuario.

Interlineado con line-height

El interlineado define el espacio entre líneas de texto. Un buen valor mejora la lectura y reduce el cansancio visual.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

p {
  /* Tamaño normal de texto */
  font-size: 1rem;
  /* Espacio entre líneas proporcional al tamaño del texto */
  line-height: 1.6;
  /* Color de texto legible */
  color: #333;
}

p {
  /* Tamaño normal de texto */
  font-size: 1rem;
  /* Espacio entre líneas proporcional al tamaño del texto */
  line-height: 1.6;
  /* Color de texto legible */
  color: #333;
}

Comparación de texto con distintos valores de line-height — Un interlineado correcto reduce el cansancio visual y mejora la lectura.

Peso y estilo del texto

El peso y el estilo permiten destacar texto y construir jerarquía visual sin depender solo del color.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.titulo-fuerte {
  /* Texto muy grueso para títulos importantes */
  font-weight: 800;
}

.texto-cita {
  /* Texto en cursiva para citas o énfasis */
  font-style: italic;
  /* Peso liviano para un estilo elegante */
  font-weight: 300;
}

.titulo-fuerte {
  /* Texto muy grueso para títulos importantes */
  font-weight: 800;
}

.texto-cita {
  /* Texto en cursiva para citas o énfasis */
  font-style: italic;
  /* Peso liviano para un estilo elegante */
  font-weight: 300;
}

Diferentes pesos y estilos tipográficos en un mismo texto — El peso y el estilo permiten destacar información sin usar colores adicionales.

Transformación y espaciado del texto

Estas propiedades se usan mucho en botones, etiquetas y componentes de interfaz.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.boton-ui {
  /* Convierte el texto a mayúsculas visualmente */
  text-transform: uppercase;
  /* Aumenta el espacio entre letras */
  letter-spacing: 1.5px;
  /* Texto en negrita para mayor presencia */
  font-weight: bold;
}

.boton-ui {
  /* Convierte el texto a mayúsculas visualmente */
  text-transform: uppercase;
  /* Aumenta el espacio entre letras */
  letter-spacing: 1.5px;
  /* Texto en negrita para mayor presencia */
  font-weight: bold;
}

Ejemplo de texto con letter-spacing y mayúsculas — El espaciado entre letras mejora la legibilidad en textos en mayúsculas.

Decoración del texto

Permite agregar o quitar líneas decorativas como subrayados o tachados.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

a.boton {
  /* Quitamos el subrayado por defecto de los enlaces */
  text-decoration: none;
}

.precio-oferta {
  /* Texto tachado para indicar precio anterior */
  text-decoration: line-through;
  color: gray;
}

a.boton {
  /* Quitamos el subrayado por defecto de los enlaces */
  text-decoration: none;
}

.precio-oferta {
  /* Texto tachado para indicar precio anterior */
  text-decoration: line-through;
  color: gray;
}

Ejemplos de subrayado y texto tachado en CSS — Eliminar estilos por defecto es clave para un diseño consistente.

Alineación y balance del texto

La alineación define cómo se distribuye el texto horizontalmente. Las propiedades modernas ayudan a mejorar la estética en títulos largos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

h1.titular {
  /* Centramos el texto horizontalmente */
  text-align: center;
  /* Balancea las líneas para que se vean más parejas */
  text-wrap: balance;
}

h1.titular {
  /* Centramos el texto horizontalmente */
  text-align: center;
  /* Balancea las líneas para que se vean más parejas */
  text-wrap: balance;
}

Comparación entre títulos balanceados y desbalanceados — El balance tipográfico mejora la estética en encabezados multilínea.

Leccion Anterior

Jerarquía, herencia y cascada de estilos en CSS

Jerarquía CSS: Herencia, Cascada y Especificidad

CSS no aplica estilos al azar. En esta lección aprendés cómo el navegador resuelve conflictos entre reglas usando herencia, cascada y especificidad. Dominá el orden real de prioridad para escribir CSS claro, escalable y sin sorpresas.

Comenzar Lección

Leccion Actual

Diseño tipográfico y color del texto aplicado con CSS en una interfaz web

Tipografía y Texto en CSS

En esta lección aprendés a controlar cómo se ve y se lee el texto en la web usando CSS: colores, familias tipográficas, tamaños, interlineado, espaciado y técnicas modernas de legibilidad.

Comenzar Lección

Lecciones Siguiente

Capas de color y transparencia aplicadas a elementos HTML con CSS

background-color en CSS

En este módulo profundizamos en el uso avanzado de background-color en CSS. Analizamos formatos de color, transparencia con RGBA, errores comunes con opacity y criterios de contraste para crear interfaces accesibles y profesionales.

Comenzar Lección

¿Qué diferencia hay entre `rem` y `em`?

`rem` es relativo a la raíz del documento (siempre constante), mientras que `em` es relativo al tamaño de fuente del elemento padre directo. El `em` puede causar un efecto de composición (bola de nieve) si se anidan muchos elementos, haciéndolo más difícil de controlar.

¿Por qué no funciona `vertical-align: middle` en un div?

La propiedad `vertical-align` solo funciona en elementos de línea (`inline`, `inline-block`) o celdas de tabla. Para centrar verticalmente elementos de bloque (como un div), la solución moderna estándar es usar Flexbox (`align-items: center`).

¿Cómo elijo el color de texto correcto para accesibilidad?

Debes garantizar un 'ratio de contraste' suficiente entre el texto y el fondo. El estándar WCAG AA recomienda un ratio de al menos 4.5:1. Evita gris claro sobre blanco.

¿Es obligatorio usar Google Fonts?

No. Puedes usar fuentes del sistema para máximo rendimiento, o alojar tus propios archivos de fuente (`.woff2`) en tu servidor y cargarlos con `@font-face` para no depender de terceros.

¿Qué hace exactamente `text-transform: uppercase`?

Cambia visualmente todas las letras a mayúsculas, pero el texto en el HTML original permanece intacto. Es ideal para lectores de pantalla, que pueden leerlo con la entonación correcta, a diferencia de si escribieras todo en mayúsculas en el HTML.

¿Para qué sirve `word-spacing`?

Similar a `letter-spacing`, pero en lugar de separar letras, separa palabras completas. Se usa menos frecuentemente, pero puede ayudar a ajustar la textura de párrafos justificados.

¿Por qué `text-justify` crea espacios grandes y feos?

La justificación fuerza al texto a tocar ambos bordes. Si la línea es corta o hay palabras largas, el navegador estira los espacios en blanco (ríos). En web, se prefiere la alineación a la izquierda para mejor legibilidad.

¿Qué unidad debo usar para `line-height`?

La mejor práctica es usar un número sin unidad (ej: `1.5` en vez de `24px` o `150%`). Esto permite que el interlineado se recalcule proporcionalmente si el tamaño de la fuente cambia por herencia.

¿Cómo corto un texto que es demasiado largo con '...'?

Usando la combinación: `white-space: nowrap;`, `overflow: hidden;` y `text-overflow: ellipsis;`. Esto truncará el texto y añadirá tres puntos al final si no cabe en su contenedor.

¿Qué es una fuente 'Serif' y una 'Sans-serif'?

Las Serif (como Times New Roman) tienen pequeños adornos o 'pies' en los extremos de las letras, asociadas a lo clásico. Las Sans-serif (como Arial o Roboto) son 'de palo seco', sin adornos, y suelen ser más legibles en pantallas digitales.

¿Puedo poner sombras al texto?

Sí, con `text-shadow`. Acepta valores para desplazamiento X, Y, desenfoque y color. Ej: `text-shadow: 2px 2px 5px rgba(0,0,0,0.3);`. Úsalo con moderación.

¿Qué es la propiedad `font-display: swap`?

Es una instrucción para la carga de fuentes web. Le dice al navegador que muestre una fuente de respaldo inmediata (fallback) mientras carga la fuente personalizada, evitando que el texto sea invisible durante la carga.

¿Qué es `text-indent`?

Permite sangrar (indentar) solo la primera línea de un párrafo. Es un estilo muy común en maquetación editorial o de libros, aunque menos usado en diseño web moderno.

¿Cómo evito que el texto se salga de su caja?

Si tienes una palabra muy larga (como una URL) que rompe el diseño, usa `overflow-wrap: break-word;` o `word-break: break-all;` para forzar al navegador a cortar la palabra y saltar de línea.

¿Qué es una fuente monoespaciada (monospace)?

Es una tipografía donde cada letra ocupa exactamente el mismo ancho horizontal (la 'i' ocupa lo mismo que la 'm'). Se usa para mostrar código porque facilita la alineación vertical de caracteres.

¿Afecta el color al SEO?

Indirectamente sí. Si usas texto del mismo color que el fondo (texto invisible) para ocultar palabras clave (Black Hat SEO), Google penalizará tu sitio. El contraste y la legibilidad son factores de experiencia de usuario que Google valora.

¿Qué es `font-variant: small-caps`?

Convierte las letras minúsculas en mayúsculas, pero de un tamaño reducido (versalitas). Da un toque elegante y clásico a los encabezados.

¿Cómo hago que el texto no se seleccione?

Usando `user-select: none;`. Es útil para elementos de interfaz como botones o iconos que no deberían ser copiables como texto, mejorando la sensación de aplicación nativa.

¿Qué es la unidad `ch`?

Es una unidad relativa al ancho del carácter '0' de la fuente actual. Es muy útil para limitar el ancho de los párrafos (`max-width: 60ch`) para asegurar que las líneas no sean demasiado largas y cansen la vista.

¿Se pueden usar degradados (gradientes) en el texto?

Sí, pero requiere un truco moderno: `background-clip: text;` junto con `color: transparent;` y un `background-image` con el degradado. Esto hace que el fondo tome la forma de las letras.