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?
fuente
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.
fuente
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.
fuente