Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Mejorando la maquetación con ritmo vertical

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Typography Basics for Developers
All About Grid Systems

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Aprender todo acerca de los pros y los contras del lado técnico de la tipografía es algo que debes hacer, y es muy bueno. Te dará una base firme cuando estés buscando tipos de fuentes o fuentes y te ayudará a entender un poco más acerca del arte de la tipografía en si. Muy pronto te darás cuenta cuánto esfuerzo toma conseguir el tipo correcto de fuente en cualquier momento, no sólo en la web.

Uno de los aspectos más importantes de la tipografía en la web es el ritmo vertical - y este, además, puede ser uno de los más difíciles de hacer correctamente, por así decirlo, a menudo toma mucho tiempo y experimentación. Hay muchas maneras para lograr un buen ritmo vertical en una página, aunque algunos pueden reducirse sencillamente a lo que sientes y lo que te parece bien en la pantalla.

Pero… ¿Qué es el Ritmo Vertical?

Ritmo es

un modelo fuerte, regular y repetido de movimiento o sonido

y mientras más consistente y familiar es el ritmo, cuanto mejor y más fuerte llega a ser.

Podemos aplicar este concepto a la web con el término “ritmo vertical” - en la cultura Occidental, como leemos de izquierda a derecha y de arriba hacia abajo, queremos esforzarnos por conservar un ritmo visual consistente para el contenido de nuestra página. Conservar nuestro ritmo vertical consistente, significa que podemos crear una experiencia visual más relajante, evocando un sentimiento de familiaridad para nuestros usuarios, quitando las barreras visuales y haciendo el contenido más fácil de leer.

Crear un buen ritmo vertical en un diseño de un sitio web puede ser complicado. El objetivo es crear una relación armoniosa entre todo el contenido (incluyendo imágenes y el texto) de tu sitio web.

Por ejemplo, ¿cómo se ve el espacio entre párrafos (es decir; es demasiado grande o pequeño)? ¿cuán fácil fue para ti encontrarlo para leerlo? Hay muchas preguntas por hacer y muchas de ellas se reducen a cuán fácil es leer (incluso echando un vistazo rápido) el contenido de tu sitio web. Incluso los cambios más pequeños que hagas para una mejor experiencia de lectura en tu sitio web, hará una enorme diferencia para tus usuarios.

¿Qué es lo que define un Buen Ritmo Vertical?

Bueno, ahora que sabemos lo que es un ritmo vertical, necesitamos aprender un poco más acerca de cómo hacer un buen ritmo vertical. La clave es legibilidad.

vertical-rhythm-good
vertical-rhythm-poor

Cuando trabajas con tipografía en la web, las dos cosas más importantes a las que quieres prestar atención son; el tamaño de la fuente y las alturas de líneas. Sin embargo, hay mucho más que solamente estás dos cosas, estos son tus dos componentes claves para crear un buen ritmo vertical en el diseño de tu página. Si el tamaño de tus fuentes no encajan bien - debido a que los títulos tienen un enorme tamaño y el tamaño del cuerpo del párrafo es ridículamente pequeño, por ejemplo - entonces hará que el contenido sea mucho más difícil de leer o de escanear rapidamente. De manera similar, si tu contenido tiene una altura de línea que hace que tu texto sea incómodo leer - ya sea que a través del espacio se ven muy unidos o se ven demasiado separados- esto hará que tus usuarios se vayan, cuando lo que quieres es que se interesen por él.

Creando Buen Ritmo Vertical

La creación de buen ritmo vertical en tus diseños solamente bien con mucha práctica, pero también, con mucha teoría y algunas veces, también un poco de matemática.

Primero, necesitas empezar observando en una línea base (también conocida como guía de línea base). Una línea base es la altura de línea estándar sobre la que tu apoyarás el ritmo vertical - y desde ahí, puedes empezar a usar esta línea base para asistirte en las alturas de líneas para todas las otras fuentes y contenidos en tu diseño.

Trent Walton's website is a brilliant example of good vertical rhythm in design.
El sitio web de Trent Walton es un ejemplo brillante de diseño con un buen ritmo vertical.

Cuando trabajas con una línea base, es una muy buena idea seguir con la altura de línea de los más comúnmente usados o tamaño de fuentes primarios en tu diseño. El ejemplo más fácil que se me ocurre es pensar en su principal base, tamaño de fuente 100% (lo cual es igual a 16px en la mayoría de los navegadores). Si tienes una altura de línea de 1 entonces, esto significa, que la altura de línea también es de 16px. Sin embargo, las alturas de líneas son, por lo general, mejor ajustadas entre 1.4-1.6 veces el tamaño de tu fuente (visualmente, esto parece funcionar con la mayoría de las fuentes - aunque no debería tomar eso como una regla, tan solo juega con esos parámetros). Si luego encontramos una altura de línea correcta en medio de esos parámetros de 1.5, por ejemplo, nuestra altura de línea será de 24px - y eso es nuestro número para la línea base. Desde aquí en adelante, queremos estar seguro que todos los contenidos y los elementos tipográficos de nuestro diseño coinciden o añaden más de esta cifra de 24px

Otra cosa muy importante que tenemos que medir son nuestros márgenes. Un forma muy fácil de mantener nuestro ritmo es verificando el uso de este número mágico, por así decirlo (24px) para nuestros márgenes.

He sido un gran fanático de los márgenes en una sola dirección desde Harry Roberts sugirió esto en un artículo a mediados de 2012, en donde escribió, que los márgenes que aplicamos a todos los bloques de elementos son colocados en una dirección (por ejemplo, al fondo de los elementos). Se puede decir lo mismo cuando también estás diseñando, en tanto que 24px es nuestro “número mágico” - y todos los números que deberán ser multiplos de él, o al menos relacionado con ese número- podemos añadir al margen inferior de todos nuestros elementos de niveles de bloques un márgen de 24px (o 1.5rem, si así lo prefieres - por otra parte, si quieres añadir este código en tu estilo CSS esta bien!). Esto nos ayudará a conservar nuestro ritmo vertical fluyendo agradablemente, y hará todos nuestros elementos a mantenerse en línea con la línea base que hemos creado.

Imágenes en Tu Diseño

Un pequeño consejo, encontré que cuando trabajaba con imágenes en mi diseño - y asegurando que las imágenes no han arrojado nuestra línea base y nuestro ritmo vertical completamente fuera de control - es estar seguro de que la altura de las imágenes coincide con un múltiplo de nuestro número mágico. Así que, por ejemplo, una imagen podrá tener una altura de 240px (10px x 24px, y vualà nuestro número mágico) con un margen inferior de 24px. O incluso podemos tener una altura de 252 con un margen inferior de 12px - siempre y cuando todos los números que añadamos sean múltiplos de 24px, conservaremos un excelente ritmo vertical.

¡Improvisa!

Aunque es importante recordar tu número mágico, todavía puedes hacer una pequeña pausa con su uso - si algo, simplemente, no te hace sentir que esta del todo bien con una altura de línea de 1.5 que has configurado anteriormente, entonces intenta algo más - siempre y cuando puedes volver alinear los otros valores para que todo vuelva apoyarse en la línea base y de ese modo conserve su ritmo vertical bajo control.

Por ejemplo, si en vez de eso usted elige seguir con una altura de línea más alta, levemente de 26 pixeles (la que ocupa 1.625 veces el tamaño de la fuente que tenemos de 16px), entonces siempre y cuando tus margenes reflejen esto, tu ritmo vertical lucirá bien. Como añadimos dos pixeles extras a la altura de línea, necesitamos tomar esos dos pixeles del margen inferior del elemento. Obviamente, si puedes, prueba y busca patrones en tu diseño donde esto podría pasar y estructura tu hoja de estilos CSS en una manera que refleje este modelo - así que creando una clase modular CSS para elementos que tengan ese modelo de diseño, como lo haría cualquier proyecto que este desarrollando.

Herramientas para Construir un Ritmo Vertical

Cuando trabajas para crear un buen ritmo vertical puede ser difícil - pero, afortunadamente, como con la mayoría de diseños y técnicas de desarrollo, hay algunas herramientas buenas que pueden ayudarnos. Encontré estas herramientas, en particular, estupendas para practicar y visualmente entender más acerca de la tipografía en una página.

Aplicación Typecast

Typecast es una herramienta asombrosa para los diseñadores - no solamente te permite jugar con miles de diferentes fuentes o combinaciones de fuentes sino que también nos ayuda en configurar un tipo de fuente y formando una línea base apropiada. Encuentro que siempre debo profundizar en esto antes de cualquier otra cosa cuando empiezo a ver la tipografía en mi diseño.

typecast

Escala Modular

La escala modular es otra pequeña técnica que puede ser aprovechada o usada en el diseño con la tipografía - como se describió en A List Apart

una escala modula es una secuencia de números que se relacionan unos con otros en una forma significativa.

Tim Brown

Estos números pueden ser usados (a través de mucha experimentación de intercambiar y cambiar) en tus diseños, si así lo deseas. Al menos vale la pena verlo y jugar un poco con el - y puede ayudarte a hacer decisiones informado acerca de cosas tales como la anchura de los contenedores, y cómo estos otros números, además, pueden representar una parte en tu ritmo vertical.

modular-scale

Basehold.it y Baseline.js

Si eres un fanático diseñando en los navegadores, o solo quieres estar seguro que la línea base que has diseñado en otro lugar continua siguiendo ese mismo ajuste cuando empiezas codificando - entonces usando uno de estos dos plugins de JavaScript, te ayudarán a comprobar como tu línea base esta ejecutándose en tu código. El primero (Basehold.it), diseñado por Dan Eden y Michael Wright, facilitado con una capa de JavaScript en tu página web, mientras que Baseline.js elaborado por Dan Eden se ofrece con una forma de manejar las imágenes en tu página, si es que tu página lo necesita.

baseline-basehold

Asignación

Para esta primera asignación, sencillamente, quiero que juegues con una guía de línea base - ya sea si lo haces a través de una prueba en Typecast, o usando una de los mencionados plugins de JavaScript o simplemente a través de un guía de línea base en Photoshop o en cualquier otra aplicación gráfica, no importa, eso depende de ti. Una vez que tengas lista la guía de línea base, empieza a poner los principios de este artículo en ella, es decir, pon algo de tu contenido en ese lugar, y empieza a determinar la escala y tamaño de fuente que quieres usar.

Una vez que tengas eso en su lugar, empieza observando como todos estos elementos se ven juntos con su guía de línea base. Si nunca antes habías hecho esto, puede ser un poco difícil conseguir que tu cabeza lo consiga - pero vale la pena tomarse el tiempo para entender exactamente como funciona. Después de eso, serás capaz de empezar integrando un buen ritmo vertical en el diseño de tu sitio web mucho más facilmente - ¡y tus usuarios te lo agradecerán!

Además debes leer

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.