Share
Aprender todo sobre los entresijos de la parte técnica de la tipografía es bueno. Te dará una base sólida para buscar tipos de letra o fuentes y te ayudará a entender un poco más sobre el arte de la tipografía. Pronto se dará cuenta de cuánto trabajo se necesita para escribir correctamente en cualquier momento, no solo en la web..
Uno de los aspectos más importantes de la tipografía en la web es el ritmo vertical, y este también puede ser uno de los más difíciles de corregir, ya que a menudo requiere mucho tiempo y experimentación. Hay muchas maneras de lograr un buen ritmo vertical en una página, aunque algunas pueden reducirse a simplemente lo que se siente y se ve bien en la pantalla..
El ritmo es ...
Un patrón de movimiento o sonido fuerte, regular y repetido.
y cuanto más consistente y familiar es un ritmo, mejor y más fuerte se vuelve..
Podemos aplicar esto a la web con el término "ritmo vertical": en la cultura occidental, mientras leemos de izquierda a derecha y de arriba a abajo, queremos tratar de mantener un ritmo visual coherente con el contenido de nuestra página. Mantener nuestro ritmo vertical constante significa que podemos crear una experiencia visualmente más relajante, evocando una sensación de familiaridad con nuestros usuarios, eliminando barreras visuales y haciendo que el contenido sea mucho más legible.
Crear un buen ritmo vertical en el diseño de un sitio web puede ser difícil. El objetivo es crear una relación armoniosa entre todo el contenido (incluidas las imágenes). y texto) en su sitio web.
Por ejemplo, ¿cómo se ve el espacio entre los párrafos (es demasiado grande o demasiado pequeño?), ¿Qué tan fácil, usted mismo, lo encuentra para leer? Hay muchas preguntas que hacer y la mayoría se reducirá a lo fácil que es leer (incluso escanear rápidamente) el contenido de su sitio web. Incluso los cambios más pequeños que mejoran la experiencia de lectura en su sitio web supondrán una gran diferencia para sus usuarios.
Entonces, ahora que sabemos qué es el ritmo vertical, necesitamos aprender un poco más sobre lo que hace que un buen ritmo vertical. La clave aquí es la legibilidad..
Cuando trabajas con tipografía en la web, las dos cosas principales a las que debes prestar atención son el tamaño de fuente y la altura de las líneas. Aunque hay muchas otras cosas que acompañan esas dos cosas, estos son sus dos componentes clave para crear un mejor ritmo vertical en el diseño de su página. Si sus tamaños de fuente no encajan bien, por ejemplo, al tener tamaños de encabezado masivos y tamaños de texto de párrafos de cuerpo minúsculo ridículamente, esto hará que el contenido sea mucho más difícil de leer o escanear rápidamente. De manera similar, si su contenido tiene una altura de línea que hace que el texto sea difícil de leer, ya sea por estar espaciados demasiado juntos o por estar demasiado separados, eso hará que los usuarios se desactiven cuando desee interactuar con ellos..
Crear un buen ritmo vertical en sus diseños conlleva mucha práctica, pero también mucha teoría, y algunas veces también matemáticas..
En primer lugar, debe comenzar a ver una línea de base (también conocida como cuadrícula de línea de base). Una línea base es la altura de línea estándar en la que basará su ritmo vertical y, a partir de ahí, puede comenzar a usar esta línea base para ayudarlo en las alturas de línea para todas las demás fuentes y contenido de su diseño..
El sitio web de Trent Walton es un brillante ejemplo de buen ritmo vertical en el diseño.. Cuando trabaje con una línea de base, es una buena idea ir con el alto de línea del tamaño de fuente más usado o principal en su diseño. El ejemplo más fácil que se me ocurre es pensar en el tamaño de fuente de su base principal del 100% (lo que equivale a 16px en la mayoría de los navegadores). Si tiene una altura de línea de 1, entonces su altura de línea también será 16px. Sin embargo, las alturas de línea suelen ser las más adecuadas para sentarse entre 1,4 y 1,6 veces el tamaño de su fuente (visualmente, esto parece funcionar con la mayoría de las fuentes, aunque no tome eso como una regla, solo juegue con ellas). Si luego consideramos tener una altura de línea justo en el medio de eso, de 1,5, nuestra altura de línea será de 24 px, y ese es nuestro número de referencia. De aquí en adelante, queremos asegurarnos de que todo el contenido y los elementos tipográficos en nuestro diseño coincidan o se sumen a esta cifra de 24px.
Otra cosa importante a medir es nuestros márgenes. Una forma realmente fácil de mantener nuestro ritmo bajo control es usar este número mágico (24 px) para nuestros márgenes.
He sido un gran fan de los márgenes de una sola dirección desde que Harry Roberts sugirió esto en un artículo a mediados de 2012, donde los márgenes que aplicamos a todos los elementos a nivel de bloque se colocan en una dirección (es decir: en la parte inferior de los elementos). ). Lo mismo se puede decir cuando estamos diseñando, por lo que 24px es nuestro "número mágico", y el número del cual todo debería ser múltiplo de, o al menos estar relacionado con él, podemos agregar un margen inferior a todos nuestros niveles de bloque. elementos de 24px (o 1.5rem, si así lo prefieres, sin embargo, si quieres agregar este código en tu CSS, ¡está bien!). Esto nos ayuda a mantener nuestro ritmo vertical fluyendo bien y hace que todos nuestros elementos se mantengan en línea con la línea de base que hemos creado..
Un pequeño consejo que encuentro al trabajar con imágenes en mi diseño, y asegurarme de que no cambien nuestra línea de base y ritmo vertical por completo, es asegurarse de que las alturas de las imágenes coincidan con un múltiplo de nuestro número mágico. Así, por ejemplo, una imagen puede tener una altura de 240 px (10 x 24 px, nuestro número mágico) con un margen inferior de 24 px. O incluso podríamos tener una altura de 252px con un margen inferior de 12px, siempre que todo se convierta en ese múltiplo de 24px, deberíamos estar bien.
Si bien es importante recordar su número mágico, siempre puede romperlo ligeramente, si algo no se siente bien a la altura de 1.5 líneas que ha establecido, luego intente otra cosa, siempre que pueda realinear el otro. valores para que caiga de nuevo en la línea de base y, por lo tanto, mantenga su ritmo vertical bajo control.
Por ejemplo, si elige ir con una altura de línea ligeramente mayor de 26 píxeles (que funciona aproximadamente 1.625 veces el tamaño de fuente original que teníamos de 16px), siempre que sus márgenes reflejen esto, su ritmo vertical va a estar bien. Como hemos agregado dos píxeles adicionales a la altura de la línea, debemos tomar esos dos píxeles del margen inferior de ese elemento. Obviamente, si puede, intente buscar patrones en su diseño donde esto pueda suceder y diseñe su CSS de una manera que refleje este patrón, así que cree una clase de CSS modular para los elementos que tienen ese patrón de diseño, como lo haría con cualquier proyecto. estás desarrollando.
Trabajar para crear un buen ritmo vertical puede ser difícil, pero afortunadamente, como con la mayoría de las técnicas de diseño y desarrollo, hay algunas buenas herramientas que nos ayudan. En particular, estas herramientas me parecen excelentes para practicar y comprender visualmente más sobre la tipografía en una página..
Typecast es una herramienta increíble para los diseñadores: no solo te permite jugar con miles de fuentes diferentes o combinaciones de fuentes, sino que también nos ayuda a tipear y formar una línea de base adecuada. Encuentro que siempre me meto en esto antes que nada cuando comienzo a ver tipografía en mi diseño..
La escala modular es otra técnica pequeña que se puede aprovechar o utilizar en el diseño con tipografía, como se describe en A List Apart
Una escala modular es una secuencia de números que se relacionan entre sí de manera significativa..
Tim Brown
Esos números se pueden usar (a través de mucha experimentación y cambio y cambio) en sus diseños, si así lo desean. Al menos vale la pena echarle un vistazo y jugar, y puede ayudarlo a tomar decisiones más informadas sobre cosas como el ancho de los contenedores y cómo estos otros números también pueden participar en su ritmo vertical..
Si es un fanático del diseño en el navegador, o simplemente quiere asegurarse de que las líneas de base que ha diseñado en otros lugares sigan adelante cuando comience a codificar, entonces usar uno de estos dos complementos de JavaScript lo ayudará a verificar cómo está su línea de base. realizando en su código. El primero (Basehold.it), de Dan Eden y Michael Wright, le brinda una superposición de JavaScript en su página web, mientras que Baseline.js de Dan Eden le brinda una forma de administrar imágenes en su página, si es necesario..
Para esta tarea, quiero que simplemente juegues con una cuadrícula de línea de base, ya sea a través de una prueba en Typecast, utilizando uno de los complementos de JavaScript mencionados anteriormente o simplemente creando un esquema de cuadrícula de línea de base en Photoshop u otra aplicación de gráficos. tú. Una vez que tenga preparada una cuadrícula de referencia, comience a incluir los principios de este artículo; ponga algo de su contenido en su lugar y comience a averiguar las escalas y los tamaños de fuente que desea usar.
Una vez que los tenga en su lugar, comience a ver cómo estos se relacionan con su cuadrícula de línea de base. Si nunca has hecho esto antes, puede ser un poco de trabajo moverte de la cabeza, pero vale la pena tomarse el tiempo para entender exactamente cómo funcionan. Después de eso, podrá comenzar a integrar un buen ritmo vertical en los diseños de su sitio web con mucha más facilidad, y sus usuarios se lo agradecerán.!
Accentsconagua