Ritmo vertical/cuadrícula de línea de base en diseño web

Recientemente leí algunos artículos sobre la importancia de un 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.

rejilla 960

Me resulta muy difícil alinear todo correctamente dentro de la cuadrícula. Logré colocar todo dentro de la cuadrícula vertical en el tamaño de texto predeterminado (16 px), pero a medida que empiezo a jugar con el tamaño de los encabezados, agrego 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?

Respuestas (3)

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

Puedes acercarte a espaciar las cosas, pero eventualmente terminas con algo que puede tener sentido cuando miras los números, pero que probablemente esté mal 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 a partir de sus instintos, no de algunas ecuaciones que simplemente lo volverán loco al implementarlo correctamente en la web.

Aparte, 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, una cuadrícula de referencia tiene sentido y es relativamente fácil de implementar en el mundo de las aplicaciones DTP.

Exacto, estás mezclando manzanas y orangutanes. Es como tratar de obtener la portada de un libro de bolsillo para reproducir un video Flash. A menos que haga todo como una imagen y todo su sitio web sea un JPG con mapas de imagen, simplemente no va a suceder.
No es tan difícil hacer que su css y html coincidan con la cuadrícula 960. Después de todo, la codificación es simplemente matemática. Además de eso, básicamente todos los diseñadores en (por ejemplo) themeforest.net lo usan. No es tan difícil como dices. Y sí.... el concepto de cuadrícula proviene del mundo de la impresión. Sin embargo, el sistema de cuadrícula 960 se convierte para la web para que coincida con una resolución mínima de 1024x768.
la cuadrícula 960 es principalmente para crear cuadrículas horizontales y es algo que recomiendo encarecidamente incluso en sitios de tamaño moderado. Es una herramienta muy útil. Sin embargo, estamos hablando de una línea base de tipo vertical. Sí, la codificación es matemática. Por desgracia, los navegadores y las especificaciones de CSS no hicieron ningún arreglo especial para determinar las líneas de base de las formas de las letras. Puede aproximarse con sus matemáticas, pero está a merced de los navegadores individuales, los sistemas operativos, las fuentes instaladas y las preferencias del usuario, por lo que no es en absoluto una "matemática simple" hacer que funcione el aspecto de cuadrícula de tipo de referencia.
Además de eso, el diseño no siempre es matemática pura. De hecho, rara vez es matemática pura. Las matemáticas nos llevan a un punto, pero más allá de eso, el juicio estético del ojo tiene que tomar su lugar. He creado sitios utilizando un sistema de cuadrícula de línea de base tanto para mí como para otros diseñadores y, la mayoría de las veces, tenemos que desechar la cuadrícula de línea de base al final para que se "sienta" bien. He decidido que debido a eso, generalmente es un esfuerzo inútil hacer que la cuadrícula de referencia funcione, ya que generalmente es algo arbitrario.
Hmm, mi falta de lectura;) No me di cuenta de que solo se trata del ritmo vertical. Tengo que estar de acuerdo en que yo tampoco uso la 960gs para ritmos verticales. Solo para horizontales. Lo único que uso verticalmente es "el pliegue". El resto lo alineo (una vez más verticalmente) por "el ojo".
solo tenga cuidado ya que 'el pliegue' también es un mito. ;)

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 encontré 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 vertical por primera vez.

ingrese la descripción de la imagen aquí

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

HTH

Nota: Me gusta más la tipografía en los sitios que han usado esta técnica que en los que no. Sin embargo, en ambos casos, siempre parece haber un elemento o dos que tienen que "engañar al sistema" para parecer "correcto". También descubrí que prestar atención a la altura general de la línea (por ejemplo, 18 px para una base de fuente de 12 px) hace que establecer márgenes y rellenar imágenes, encabezados gráficos y similares sea bastante sencillo (18 px). Además... la necesidad de calcular todo desaparece... comenzará a notar un "ritmo vertical" en 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 brinda 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, la altura de línea, el relleno y el margen en los elementos html predeterminados para que todo se alinee con la cuadrícula de referencia.

Para ayudar a hacer coincidir todo 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.

Ritmo vertical/cuadrícula de línea de base en diseño web
RespuestasAquíPolítica de privacidad1y, 0v