The Proportional Web: una hoja de estilos web para tipografía proporcional

• The Proportional Web es un diseño que toma algunos principios de 《The Elements of Typographic Style》 de Robert Bringhurst y los aplica al navegador; es el sucesor proporcional de The Monospace Web y una hoja de estilos reutilizable.
• Usa Alegreya y Alegreya SC para el cuerpo del texto, y Courier Prime para el código; mantiene tamaños y ritmo vertical coherentes sobre la base de una fuente raíz de 16 px, rem y una altura de línea de 1.2 rem.
• Aplica justificación aprovechando word-break, text-wrap y hyphens de los navegadores modernos, pero recomienda usar text-align: left si empeoran el espaciado entre palabras o los ríos de espacios en blanco.
• Estiliza títulos, citas, figuras, tablas y bloques de código con foco en HTML5 semántico; las notas laterales en pantallas anchas se colocan en el margen derecho y, en pantallas pequeñas, se convierten en párrafos en línea con ornamentos.
• Es adecuado para documentos centrados en prosa, como libros, revistas, blogs, manuales y wikis; no se recomienda para aplicaciones web dinámicas, y puede usarse descargando el código fuente de GitHub para agregar CSS y JavaScript, o junto con Pandoc.

---

De The Monospace Web a tipografía proporcional

• The Monospace Web se difundió más de lo esperado, hasta ser adoptado en blogs personales e interfaces de aplicaciones.
• The Proportional Web es el sucesor espiritual de ese proyecto: está diseñado para usar fuentes proporcionales en lugar de monoespaciadas y para poder reutilizarse libremente.
• Comenzó después de leer 《The Elements of Typographic Style》 de Robert Bringhurst, como un trabajo para implementar en el navegador la maquetación y la tipografía del libro.
• A diferencia del material impreso, la web no tiene un tamaño de página fijo y además es una plataforma programable, por lo que resulta difícil aplicar las mismas reglas tal cual.
  • En su lugar, se publica para que cada quien pueda elegir y usar los elementos que considere útiles o atractivos.
• Para generar el HTML se usó Pandoc, pero la hoja de estilos puede funcionar en otros entornos con pequeñas modificaciones.

Sistema tipográfico

• El diseño se basa en el principio de Bringhurst de elegir una sola familia tipográfica versátil en lugar de mezclar varias.
• La familia Alegreya se usa de forma diferenciada según el propósito.
  • Alegreya Regular se aplica al cuerpo del texto y a los títulos de tercer nivel.
  • Alegreya SC se usa para títulos de primer nivel con forma de mayúsculas de título, títulos de segundo nivel en versalitas y abreviaturas en línea como HTML.
• Para fragmentos de código monoespaciados se aplica Courier Prime.

Unidades relativas y ritmo vertical

• Todos los tamaños se especifican en unidades rem, tomando como base un tamaño de fuente raíz de 16 px.
• Los tamaños estándar son 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 2, 2.5, 3 y 4 rem, equivalentes respectivamente a 12, 14, 16, 18, 20, 22, 24, 32, 40, 48 y 64 px.
• Con solo cambiar el tamaño de fuente raíz se puede ampliar o reducir todo el diseño en conjunto.
  • Por ejemplo, cuando el ancho de pantalla es de 480 px o menos, se puede cambiar el font-size de :root a 14 px.
• La altura de línea es de 1.2 rem, y se intenta alinear verticalmente todos los elementos a múltiplos de ese valor.
• Sin aplicarlo de forma tan extrema como The Monospace Web, mantiene un ritmo de alineación común en todo el documento.

Justificación implementada en navegadores modernos

• Como en el libro de Bringhurst, el cuerpo del texto se dispone con justificación, no con margen derecho irregular.
• Aunque existe una fuerte percepción de que en la web conviene evitar la justificación, se considera que las funciones mejoradas de los navegadores permiten volver a intentarlo.
• Los saltos de línea y la separación con guiones se controlan con las siguientes propiedades CSS:
  • word-break
  • text-wrap
  • hyphens
  • hyphenate-limit-chars, que controla el alcance de la separación con guiones
• La justificación implica el riesgo de que el espaciado entre palabras se abra demasiado o de que aparezcan ríos de espacios en blanco en los párrafos.
• En el documento actual, la combinación de longitud de línea, tamaño de fuente y contenido produce resultados aceptables, y en algunas palabras difíciles se insertaron manualmente guiones opcionales.
• Si no encaja con el contenido, lo adecuado es cambiar a text-align: left.

Sangría de párrafos y color

• A los párrafos consecutivos se les aplica una sangría de 3ch, equivalente al ancho de tres caracteres 0.
• Es una forma de facilitar visualmente la identificación del inicio y el final de los párrafos, usada en materiales impresos durante al menos 500 años.
• En la web normalmente se usa espacio vertical entre párrafos en lugar de sangría, pero la sangría tradicional sigue siendo una opción válida.
• El color se limita a fondo blanco y texto negro.
  • Se prefiere una composición minimalista como valor predeterminado para documentos centrados en prosa.
  • Reservar el uso del color permite concentrar la atención del lector en los elementos más importantes, como gráficos que comunican datos complejos.

HTML semántico, títulos y énfasis

• Salvo algunas clases adicionales, casi todo está compuesto solo con marcado HTML5 semántico.
• Los títulos se estilizan en tres niveles.
  • h1: título principal a nivel de capítulo
  • h2: título de sección
  • h3: título de subsección
• El elemento <em> se muestra en cursiva, de acuerdo con la expectativa habitual.

Separadores y detalles plegables

• Como el libro de Bringhurst no ofrece una guía clara sobre separadores horizontales, se los usa como elementos decorativos.
• En los separadores se usa el símbolo U+2767 Rotated Floral Heart Bullet del bloque Unicode Dingbats.
• Con el elemento <details> se puede ocultar información que se despliega al pulsar una etiqueta.

Notas laterales y nombres propios

• Las notas laterales usadas por Bringhurst se implementan con <aside> de HTML.
• Cuando la pantalla es lo suficientemente ancha, se muestran en el margen derecho, alineadas con la parte superior del párrafo anterior.
• En pantallas pequeñas, se pliegan como párrafos en línea con decoración y se manejan de forma responsiva.
• Los nombres propios y denominaciones oficiales marcados con la clase .canonical-name se renderizan en versalitas, como en los ejemplos de Bringhurst.

Citas y figuras

• Las citas en bloque se componen de un bloque con sangría y comillas alrededor del cuerpo del texto.
• En el pie se colocan autor, obra y año.
• Las imágenes y sus leyendas se colocan respectivamente en elementos <figure> y <figcaption>.
• Para el autor y el título de la obra en las figuras, al igual que en las citas, se usan versalitas y cursiva, y comparten el mismo sistema de sangría.

Listas y tablas

• Admite listas con viñetas y listas ordenadas, y la estructura anidada de las listas ordenadas se muestra de forma habitual.
• Los encabezados de tabla se distinguen con fuerza mediante etiquetas en versalitas y bordes.
• El resto del diseño de las tablas reduce la decoración y se apoya en el espaciado.

Representación de código

• Aunque el diseño completo está pensado para documentos centrados en prosa más que para documentación técnica centrada en código, los bloques de código y el código en línea también están preparados para leerse bien.
• Para el código se usa Courier Prime, que aporta una nostalgia de máquina de escribir y armoniza con Alegreya y con el tono general del diseño.
• Las variables de estilo básicas incluyen fuente, altura de línea, grosor de borde, color de texto y color de fondo.
  • --font-family: "Alegreya", serif
  • --line-height: 1.2
  • --border-thickness: 1.5px
  • --text-color: #000
  • --background-color: #fff

Usos adecuados y licencia

• Es un diseño para documentos web centrados en prosa, como libros, revistas, blogs y manuales.
• Puede usarse como base para un sitio web personal, un proyecto específico o una wiki más grande.
• Es muy probable que no sea adecuado para aplicaciones web dinámicas.
• Se pueden copiar las partes deseadas o hacer un fork y modificarlas, pero se requiere atribución adecuada.
• Las condiciones de atribución pueden cumplirse manteniendo la información de licencia en el encabezado de los archivos fuente.

Instalación y uso con Pandoc

• Para empezar rápido, descarga el código fuente de GitHub y colócalo en el directorio the-proportional-web del proyecto.
• En el head del HTML, agrega los siguientes archivos:
  • the-proportional-web/index.min.css
  • the-proportional-web/index.js
• En Pandoc se pueden especificar argumentos como profundidad de la tabla de contenidos, numeración de secciones, CSS, JavaScript y desactivación del resaltado de sintaxis para convertir Markdown a HTML.
• Si se necesita resaltado de sintaxis, puede considerarse una plantilla personalizada como la plantilla usada para esta salida HTML.
• En ese caso, el CSS que Pandoc incluye por defecto debe eliminarse de la plantilla personalizada.

Proyectos tipográficos relacionados

• The Elements of Typographic Style Applied to the Web de Richard Rutter sigue en gran medida la estructura del libro de Bringhurst, adaptando sus consejos al diseño web.
  • Tiene un alcance mucho más amplio que The Proportional Web y se enfoca en transmitir información.
  • En cambio, The Proportional Web se parece más a un showcase que muestra directamente las ideas y la hoja de estilos.
  • En ese sitio, las diferencias de tamaño de fuente en teléfonos eran grandes y dificultaban la lectura; se entiende que existe desde hace al menos 20 años y que no ha recibido actualizaciones durante unos 8 años.
  • The Proportional Web dedicó mucho esfuerzo a mantener tanto la responsividad como la coherencia ante distintos tamaños de pantalla, y ambos proyectos pueden coexistir porque tienen propósitos distintos.
• Practical Typography de Matthew Butterick es un recurso práctico que cubre con suficiente detalle casi todos los temas necesarios para usuarios generales o ingenieros cercanos a la tipografía.
• Tufte CSS es un trabajo influyente y reconocido que, aunque uno no esté de acuerdo con algunos detalles de composición tipográfica, resulta sólido en conjunto.

Alcance y herramientas de producción

• No toma toda la metodología de Bringhurst, sino solo algunas ideas, adaptadas a la web.
• Para producir el documento se usaron las siguientes herramientas:
  • Pandoc
  • html-minifier
  • esbuild
  • GNU Make
• Las ideas de diseño y la maquetación real provienen en gran medida de 《The Elements of Typographic Style》 de Robert Bringhurst.

[GN⁺]

Opiniones en Lobste.rs

• Hay que evitar fijar el tamaño de fuente en píxeles de esta forma porque perjudica la accesibilidad

  @media screen and (max-width: 480px) {  
    :root {  
      font-size: 14px;  
    }  
  }  
  

  • La unidad px de CSS ya no corresponde 1:1 con un píxel físico, sino que significa max(1/96in, 1 pixel)
  • La forma que prefiero es poner font-size de :root en 0.625 para que 1rem corresponda a 10px, y luego asignar 1.6rem o 2rem al body para que toda la página lo herede
    Para las fuentes no uses px, y menos wv o wh; usa rem o em. Para layouts que no necesiten escalar junto con el tamaño de la fuente, se pueden usar sobre todo px, wv, wh, etc.
    Recomiendo mucho usar em o rem en vez de px para las fuentes, para que los usuarios con problemas de visión puedan usar la función de cambiar el tamaño del texto del navegador
    También hay que evitar usar wv o wh para el tamaño de fuente, porque al hacer zoom con Ctrl-+ en escritorio, innerWidth e innerHeight también se reducen en la misma proporción y el tamaño del texto se queda igual. Un uso mixto sutil como font-size: calc(1.6rem + 2wv) para agrandarlo un poco solo en pantallas grandes está bien
  • Es mejor no cambiar el tamaño de fuente predeterminado del navegador. En documentos de texto simples puede estar bien, pero en la mayor parte de la web puede romper el layout
    En la práctica es muy difícil diseñar sitios complejos para que manejen correctamente cualquier tamaño de fuente arbitrario, y además las restricciones de diseño aumentan muchísimo
    Si hace falta accesibilidad, como en casos de discapacidad visual, lo correcto es cambiar el zoom predeterminado del navegador. Así el sitio solo tiene que encargarse de un diseño responsivo común que maneje de forma natural distintos tamaños de viewport, lo cual sí es realista
    Antes los navegadores permitían al usuario ajustar directamente el tamaño de fuente, pero como la experiencia no era buena, desde hace décadas cambiaron al enfoque de zoom de página completa

• No estoy seguro de que esto realmente esté hecho para que también se pueda leer bien en móvil

• Impresiona lo bien que reproduce la tipografía del libro de Bringhurst
  Aun así, a veces se sale de la cuadrícula uniforme con altura de línea fija. Por ejemplo, si se mezcla en una línea texto en Courier, la altura de línea aumenta un poco

  • Para evitar eso, hay que poner line-height: 1 en <code>. No sé si hay consenso sobre si 0 sería mejor
    Además, para seguir 『The Elements of Typographic Style』, los símbolos de listas con viñetas y numeradas deberían colocarse en el margen, aunque no recuerdo si eso era un requisito explícito

• Es excelente ver el resultado de explorar libros clásicos de tipografía, y me gusta que haya más diseño basado en restricciones como este en línea

• En esta área, para mí http://lamb.cc/typograph/ de 2009 sigue siendo lo mejor

• El escalado relativo es excelente, pero sobrescribir el tamaño de fuente raíz me parece un error
  Un sitio debería respetar la configuración de tamaño de fuente del usuario, y un sistema de tamaños relativos basado en proporciones y relaciones encaja muy bien con eso

• Es fácil actuar como si lo importante fuera solo el texto y no la forma de presentarlo, pero un layout de página diseñado con cuidado hace que una entrada de blog, una novela o un artículo se vean mucho más profesionales
  La buena composición de página se está convirtiendo un poco en un arte olvidado, así que da gusto ver intentos como este
  Adopté tuft.css al principio y aunque hizo falta ajustarlo durante años, me ha funcionado bien hasta ahora. Esto se ve mejor en algunos aspectos, pero no tanto como para cambiarme