Un sitio personal es el único proyecto en el que el cliente eres tú y la fecha límite es «cuando dejes de disfrutarlo». Eso es a la vez el placer y la trampa. No hay product manager que te diga que la serif está bien. Solo está esa sensación persistente, a la una de la mañana, de que el espaciado de la raya no termina de estar bien.
Reconstruí el mío tres veces antes de esta versión. Esta es la primera que enseñaría sin pedir disculpas.
Primero, restricciones
Todo buen proyecto en el que he trabajado empezó con una restricción que alguien decidió respetar. Para el sitio:
- Una sola columna de 34rem, unos 544 píxeles o 62 a 68 caracteres por línea.
- Dos tipografías y una monoespaciada. Sin excepciones.
- Sin plantilla, sin tema, sin constructor. Cada rectángulo es deliberado.
- HTML estático, un presupuesto de unos 100KB de JavaScript y ninguna imagen en la primera pantalla.
- Un color de acento, usado con la suficiente moderación como para que todavía signifique algo.
Una restricción no es una limitación: es una forma de tomar diez mil decisiones por adelantado para poder gastar la atención en la que importa.
La tipografía hace casi todo el trabajo
En un sitio de escritura, la interfaz es el texto. Casi todo lo demás es medición.
El cuerpo va en serif a 1,0625rem con una altura de línea de 1,78. La medida es 34rem porque ahí una línea deja de sentirse larga sin que la columna parezca estrecha en un portátil. Los títulos aprietan un poco el espaciado entre letras; los metadatos lo aflojan y cambian a la sans, porque las fechas y los tiempos de lectura son etiquetas, no frases.
.prose {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.78;
hanging-punctuation: first last;
}La última línea hace más de lo que parece. La puntuación colgante hace que una comilla al inicio de línea o una coma al final queden fuera de la medida en lugar de empujar el texto hacia dentro, de modo que el borde izquierdo del párrafo se lee como una vertical limpia. Solo algunos navegadores lo soportan hoy. Los que no, simplemente renderizan normal, que es una definición perfectamente buena de mejora progresiva.
También dediqué una cantidad irrazonable de tiempo a la línea divisoria. Un hairline al diez por ciento de tinta, no al dieciocho, porque al dieciocho compite con el texto que debería separar.
El presupuesto de rendimiento es una decisión de diseño
La velocidad no es una preocupación de ingeniería que llega después de terminar el diseño. Es parte de cómo se siente la cosa, y es lo primero que experimenta quien visita.
Las reglas que me puse: sin framework de cliente, sin tipografías de terceros, sin script de analítica que bloquee el primer pintado, sin imagen más grande que el texto que ilustra. Todo el sitio compila a HTML y un poco de CSS, con unas pocas líneas de JavaScript para el cambio de tema y la barra de progreso de lectura.
La barra de progreso son dos píxeles de color de acento en la parte superior, escalados según el desplazamiento. Cuesta un elemento, una propiedad y una docena de líneas. También es el único movimiento no opcional de la página y la única pieza de interfaz por la que pelearía.
El modo oscuro no es una inversión del claro. El tema claro es papel cálido y tinta; el oscuro es verde siempreverde y un blanco roto más suave, porque el blanco puro sobre fondo oscuro vibra. El acento hay que volver a elegirlo en cada tema, no recolorearlo. Los tokens lo hacen posible sin buscar un valor suelto por todos los componentes.
Por qué seis idiomas
El sitio está en inglés, chino, japonés, español, francés y alemán. No es una estrategia de crecimiento. Es a quién quiero que el sitio le resulte legible: mi familia en Shanghái, amigos en Tokio, los clientes y colaboradores que he acumulado en distintos husos horarios.
Escribir en otro idioma no es traducir. Es un segundo intento de la misma idea, por una escritora peor, con instintos distintos. Escribo primero el inglés, luego reescribo la pieza en chino como si fuera nueva y después hago lo mismo en japonés. Algunas frases mejoran. Otras se pierden. El sitio deja una nota discreta cuando una pieza todavía no ha llegado a un idioma, porque fingir lo contrario es peor que ser honesta.
Para qué sirve el sitio
No para generar leads. No para una marca personal. Es un jardín al que voy cuando quiero pensar con cuidado sobre algo, y la excusa que necesito para seguir haciendo cosas a mano.
Lo mejor de un sitio que es tuyo es que puede ser imperfecto en público. Puedes cambiar el ancho de la columna un martes porque se siente mejor. Puedes dejar una frase ligeramente equivocada porque todavía la crees. Nadie la va a mandar a revisión.
El sitio volverá a cambiar. De eso se trata construirlo tú misma.
La medida de 34rem es un punto de partida, no una ley. Alrededor de 62 caracteres por línea el ojo está cómodo; por debajo de 50 se siente entrecortado, y por encima de 80 volver a la línea siguiente se convierte en una pequeña decisión. Si hoy eliges un solo número, que sea este.