DISEÑO UI CON CSS

Tipografía y Texto en CSS

Color, fuentes y estilos para una lectura clara y profesional

Controla la apariencia del texto en tu web con CSS. Aprende a manejar color, fuentes, tamaño, interlineado y espaciado para lograr una lectura clara y profesional en cualquier dispositivo.

1

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.

/* 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);
}
Publicidad
html-css-online-course-responsive-web-design-from-scratch

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 especial
Ver próximas fechas
3

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.

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.
4

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.

/* 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;
}
Publicidad
html-css-online-course-responsive-web-design-from-scratch
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 especial
Ver próximas fechas
5

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.
6

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.

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.
7

Peso y estilo del texto

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

.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.
8

Transformación y espaciado del texto

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

.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;
}
9

Decoración del texto

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

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;
}
10

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.

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

Lección anterior

Jerarquía, herencia y cascada de estilos en CSS
Visualización del flujo de estilos CSS sobre un árbol DOM jerárquico.

Jerarquía CSS: Herencia, Cascada y Especificidad

CSS no aplica estilos al azar. Domina la herencia, cascada y especificidad para resolver conflictos entre reglas y escribir código CSS priorizado, claro y escalable.

Comenzar Lección

Lección actual

Diseño tipográfico y color del texto aplicado con CSS en una interfaz web
La tipografía y el color definen la personalidad, jerarquía y legibilidad de una interfaz web.

Tipografía y Texto en CSS

Controla la apariencia del texto en tu web con CSS. Aprende a manejar color, fuentes, tamaño, interlineado y espaciado para lograr una lectura clara y profesional en cualquier dispositivo.

Lección actual

Lección siguiente

Capas de color y transparencia aplicadas a elementos HTML con CSS
El manejo correcto del color de fondo impacta directamente en la legibilidad y la accesibilidad.

background-color en CSS

Aprende el uso avanzado de background-color en CSS. Domina formatos, transparencia RGBA, evita errores con opacity y aplica criterios de contraste para 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.