Guía de estilos: tipografía y elementos

Este post no cuenta nada nuevo: es un banco de pruebas. Reúne en una sola página todos los elementos de texto que usa el blog para poder juzgar, hito a hito, cómo evoluciona la estética. Si un cambio mejora los encabezados pero rompe las citas, aquí se ve de un vistazo.

El cuerpo que estás leyendo usa una serif (IBM Plex Serif), la misma que compone los títulos con más peso; el código y los datos —fechas, etiquetas, navegación— van en mono (IBM Plex Mono). Es la superfamilia IBM Plex: serif para el cuaderno, mono para los marcadores del log.

Encabezados y jerarquía

Un h2 abre sección. Debajo, un h3 la subdivide. La escala es fluida: cambia el ancho de la ventana y verás cómo los títulos crecen o encogen de forma continua, sin saltos bruscos.

Un subtítulo de tercer nivel

El salto de tamaño y peso entre h2 y h3 es lo que da jerarquía: sin mirar el contenido, la vista ya sabe qué manda sobre qué.

Texto en línea

Dentro de un párrafo conviven varios estilos: negrita para lo que no debe pasarse por alto, cursiva para un matiz o un término, código en línea para nombres técnicos como getCollection, y enlaces que llevan a otra parte. También existe el tachado, para lo que se corrige sin borrar.

Un párrafo puede ser largo y aun así leerse cómodo si la medida (el ancho de línea) está bien elegida: ni tan corta que el ojo salte a cada momento, ni tan larga que se pierda al volver al margen izquierdo. Ese equilibrio es medio oficio, medio tipografía.

Listas

Las no ordenadas agrupan elementos sin un orden que importe:

• Un primer punto, corto.
• Un segundo punto algo más largo, que se extiende hasta ocupar más de una línea y así comprobar cómo sangra la continuación respecto a la viñeta.
• Un tercero, con lista anidada dentro:
  • Sub-punto anidado.
  • Otro sub-punto anidado.

Las ordenadas se usan cuando la secuencia sí es información:

1. Primero se decide la dirección visual.
2. Luego se traduce a tokens.
3. Y solo entonces se escribe el CSS.

Citas

Una cita destacada se separa del cuerpo para dar voz a otra persona o subrayar una idea. Debería notarse que es una cita sin necesidad de leerla, solo por su tratamiento.

Y una cita de varios párrafos, para ver el ritmo interno:

El diseño no es solo cómo se ve o cómo se siente. El diseño es cómo funciona.

Lo demás son adornos que, sin un propósito, sobran.

---

Bloques de código

El resaltado lo hace Shiki en build, con doble tema (claro/oscuro). Un ejemplo en TypeScript:

// Deriva las páginas de cada etiqueta a partir de la colección.
export async function getStaticPaths() {
  const posts = await getCollection("blog", ({ data }) => !data.draft);
  const tags = [...new Set(posts.flatMap((p) => p.data.tags))];
  return tags.map((tag) => ({
    params: { tag },
    props: { posts: posts.filter((p) => p.data.tags.includes(tag)) },
  }));
}

Y otro más breve, en la shell, para ver un lenguaje distinto:

npm run build   # descarga las fuentes y genera dist/
npm run preview # sirve la compilación en local

Tablas

Una tabla pone datos en rejilla. Sirve para comparar de un vistazo:

Rol	Fuente	Dónde se usa
Display	IBM Plex Serif	Títulos (h1–h3)
Texto	IBM Plex Serif	Párrafos y listas
Monoespacio	IBM Plex Mono	Código, fechas y etiquetas

Un encabezado deliberadamente largo para probar el reparto de líneas

Cuando un título ocupa varias líneas, el reparto equilibrado evita que quede una palabra suelta y huérfana en la última línea. Este h2 está aquí justo para eso.

Con esto queda cubierto lo esencial. A medida que avancen los hitos estéticos, vuelve a esta página: es el mismo contenido, así que cualquier cambio que notes es puro diseño.