Ritmo vertical / cuadrícula de referencia en diseño web

Recientemente leí algunos artículos sobre la importancia del buen ritmo vertical / el uso de una cuadrícula de referencia para una buena tipografía en el diseño web. Decidí intentar usar una cuadrícula de referencia, como la cuadrícula 960 que se muestra a continuación, como imagen de fondo para un diseño web / tema de WordPress en el que estoy trabajando actualmente.

Me resulta muy difícil alinear todo correctamente dentro de la cuadrícula. Logré obtener todo dentro de la cuadrícula vertical con el tamaño de texto predeterminado (16px), pero a medida que empiezo a jugar con el tamaño de los encabezados, agregando imágenes, etc., los elementos no siempre permanecen alineados correctamente en la cuadrícula.

Me gustaría saber cómo mejorar mi tipografía usando ritmo vertical. ¿Alguien tiene algún consejo o técnica que deba usar?

La cuadrícula de referencia en el diseño web es un acertijo académico necesario, pero sobre todo poco práctico desde un punto de vista matemático codificado. Dado que CSS no tiene el concepto de una línea base para el tipo, es técnicamente imposible hacer que las líneas base coincidan.

Puedes acercarte a espaciar las cosas, pero eventualmente terminas con algo que puede tener sentido al mirar los números, pero es probable que se apague visualmente y termines desviándote de la fórmula para asegurarte de que las cosas se vean bien.

Entonces, en resumen, un ritmo visual es importante, pero constrúyalo desde su instinto, no algunas ecuaciones que simplemente lo volverán loco implementando correctamente en la web.

Por otro lado, tenga en cuenta que el concepto de una cuadrícula de referencia proviene del mundo del diseño de impresión ... específicamente diseños de varias columnas, como en un periódico donde desea que el tipo se alinee de columna a columna como preferencia. Para facilitar la composición tipográfica de ese tipo de publicación, tiene sentido una cuadrícula de referencia y es relativamente fácil de implementar en el mundo de las aplicaciones DTP.

El ritmo vertical no es difícil de implementar, especialmente si comienza con un reinicio de CSS . Me topé con este enlace http://24ways.org/2006/compose-to-a-vertical-rhythm hace algún tiempo, y desde entonces he estado usando la técnica en todos mis diseños.

Lo que he encontrado es que después de trabajar con un conjunto "enlatado" de declaraciones de tipo en mi archivo CSS (h1 - h6, p, etc., específicamente, tamaño, altura de línea, márgenes inferiores) es muy fácil de implementar.

Aquí hay una imagen de fondo que me ha ayudado a ver las cosas un poco más claras ... especialmente, cuando estaba usando el ritmo vert por primera vez.

Puede ser difícil de ver, pero cuando se repite como una imagen de fondo: verá una cuadrícula de 20x20.

HTH

Nota: Me gusta la tipografía en los sitios que han usado esta técnica mejor que los que no. Sin embargo, en ambos casos, siempre parece haber un elemento o dos que tienen que "engañar al sistema" para que se vean "bien". También descubrí que prestar atención a la altura de línea general (digamos 18px para una base de fuente de 12px) hace que la configuración de los márgenes y el relleno alrededor de las imágenes, encabezados gráficos y similares sea bastante sencillo (18px). Además ... la necesidad de calcular todo desaparece ... comenzará a notar un "ritmo vertical" sobre el diseño y podrá extraer el relleno / margen / altura de línea correctos de una lista muy corta de valores en tu cabeza.

Este muy buen artículo en Smashing Magazine sobre la línea de base y el ritmo vertical le da una idea de la importancia de las líneas de base en el diseño web y cómo implementarlas en su CSS. Utiliza el tamaño de fuente, el alto de línea, el relleno y el margen en los elementos html predeterminados para que todo se alinee con su cuadrícula de referencia.

Para ayudar a que todo coincida con la cuadrícula, una imagen de fondo es muy útil, como sugiere Dawson.

He estado siguiendo esta técnica para mis últimos diseños, y creo que realmente vale la pena.