Diseño UI con CSS

Tipografía y Color: La Voz Visual de tu Web

El texto en la web no es solo información; es interfaz. En este módulo aprenderás a manipular la 'voz' de tu contenido mediante propiedades de color, familias tipográficas, pesos, decoraciones y las nuevas reglas modernas de maquetación de texto.

La tipografía abarca el 90% del diseño web. Controlar su estilo es fundamental para comunicar con eficacia.

Gestión del Color: Propiedad 'color'

La propiedad `color` define el tono del primer plano del contenido (generalmente el texto). Es importante no confundirla con el color de fondo. Formatos principales: 1. **Keywords**: Nombres en inglés (`red`, `blue`). Limitados y poco usados en producción. 2. **Hexadecimal**: El estándar web (#RRGGBB). Millones de colores. 3. **RGB/RGBA**: Permite definir la intensidad de Rojo, Verde y Azul, añadiendo un canal 'Alpha' para transparencias.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

h1 {
  /* Formato Hexadecimal (Más común) */
  color: #2c3e50;
}

span {
  /* RGB con 50% de opacidad */
  color: rgba(0, 0, 0, 0.5);
}

h1 {
  /* Formato Hexadecimal (Más común) */
  color: #2c3e50;
}

span {
  /* RGB con 50% de opacidad */
  color: rgba(0, 0, 0, 0.5);
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Tip: Escribe 'red', luego usa el picker 
   del editor para buscar el tono exacto */
.destacado {
   color: #e74c3c;
}

/* Tip: Escribe 'red', luego usa el picker 
   del editor para buscar el tono exacto */
.destacado {
   color: #e74c3c;
}

Interfaz de un selector de color cromático integrado en el editor — El flujo de trabajo moderno prioriza la selección visual y deja que la herramienta genere el código matemático.

Familia Tipográfica: Font-Family

Define la tipografía del elemento. Se recomienda usar una 'pila de fuentes' (font stack) ordenada por prioridad. El navegador buscará la primera fuente; si no la encuentra (porque el usuario no la tiene), probará la siguiente. **Siempre** se debe terminar con una familia genérica (`sans-serif`, `serif`, `monospace`) para garantizar la legibilidad.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

body {
  /* 1. Google Font | 2. Sistema | 3. Genérica */
  font-family: 'Open Sans', Helvetica, sans-serif;
}

code {
  font-family: 'Fira Code', monospace;
}

body {
  /* 1. Google Font | 2. Sistema | 3. Genérica */
  font-family: 'Open Sans', Helvetica, sans-serif;
}

code {
  font-family: 'Fira Code', monospace;
}

Fuentes Web (Web Fonts)

Para superar las limitaciones de las fuentes instaladas en el sistema, usamos Web Fonts (como Google Fonts). Estas fuentes se descargan 'al vuelo' cuando el usuario entra a la web. Se implementan vinculando la hoja de estilos externa en el HTML o importándola desde CSS.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Importación en CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.parrafo-moderno {
  font-family: 'Roboto', sans-serif;
}

/* Importación en CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.parrafo-moderno {
  font-family: 'Roboto', sans-serif;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

html {
  font-size: 16px; /* Base estándar */
}

h1 {
  font-size: 2rem; /* 32px (16 * 2) */
}

.nota {
  font-size: 0.875rem; /* 14px */
}

html {
  font-size: 16px; /* Base estándar */
}

h1 {
  font-size: 2rem; /* 32px (16 * 2) */
}

.nota {
  font-size: 0.875rem; /* 14px */
}

Gráfico comparativo de unidades de medida px vs rem — El uso de 'rem' permite que si el usuario configura su navegador con 'texto grande', tu sitio se adapte automáticamente.

Ritmo Vertical: Line-Height

El interlineado es el aire que permite leer sin cansancio. Un `line-height` bajo hace que las líneas se toquen; uno muy alto desconecta el texto. Se recomienda usar valores numéricos sin unidad (ej: `1.5`), lo que actúa como un multiplicador del tamaño de la fuente actual.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

p {
  font-size: 1rem;
  
  /* El espacio será 1.5 veces el tamaño de letra */
  line-height: 1.6; 
  
  color: #333;
}

p {
  font-size: 1rem;
  
  /* El espacio será 1.5 veces el tamaño de letra */
  line-height: 1.6; 
  
  color: #333;
}

Peso y Estilo: Weight & Style

Modifican el trazo de la letra para generar jerarquía o énfasis: * **`font-weight`**: Define el grosor. Puede ser `bold` (700), `normal` (400) o valores numéricos específicos si la fuente lo soporta (100 a 900). * **`font-style`**: Generalmente usado para aplicar cursiva (`italic`).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.titulo-fuerte {
  font-weight: 800; /* Extra Bold */
}

.texto-cita {
  font-style: italic;
  font-weight: 300; /* Light */
}

.titulo-fuerte {
  font-weight: 800; /* Extra Bold */
}

.texto-cita {
  font-style: italic;
  font-weight: 300; /* Light */
}

Transformación y Espaciado

Pequeños ajustes para UI (botones, etiquetas): * **`text-transform`**: Cambia la capitalización sin tocar el HTML (`uppercase`, `lowercase`, `capitalize`). * **`letter-spacing`**: Ajusta la distancia entre caracteres (tracking). Es vital aumentar este valor cuando usamos mayúsculas sostenidas para mejorar la lectura.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.boton-ui {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: bold;
}

.boton-ui {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: bold;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

a.boton {
  text-decoration: none;
}

.precio-oferta {
  text-decoration: line-through;
  color: gray;
}

a.boton {
  text-decoration: none;
}

.precio-oferta {
  text-decoration: line-through;
  color: gray;
}

Visualización de estados de decoración de texto — La limpieza de estilos por defecto (reset) en los enlaces es uno de los primeros pasos en cualquier hoja de estilos.

Alineación y Balance

`text-align` gestiona la distribución horizontal (`left`, `center`, `right`, `justify`). **Tip Moderno:** Para titulares que ocupan varias líneas, usa `text-wrap: balance`. Esta nueva propiedad distribuye las palabras matemáticamente para evitar que quede una sola palabra 'huérfana' en la última línea, equilibrando el bloque visualmente.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

h1.titular {
  text-align: center;
  text-wrap: balance; /* Evita líneas huérfanas */
}

h1.titular {
  text-align: center;
  text-wrap: balance; /* Evita líneas huérfanas */
}

Estilos de Lista: List-Style

Las listas (`ul`) tienen viñetas por defecto. Para crear menús de navegación o listas limpias, usamos `list-style-type: none`. Esto elimina visualmente los puntos, permitiéndonos maquetar los elementos `<li>` como botones o tarjetas sin perder la semántica de lista.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.menu-principal {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* Lista limpia lista para ser un menú */
}

.menu-principal {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* Lista limpia lista para ser un menú */
}

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