Thread by @fmontes

🤮 ¿La tipografía en tu sitio web se ve extraña?

🎼 Seguro no tiene "ritmo vertical" y este concepto te va a cambiar la vida.

📖 Te explico que es y como generarlo.

❤️ RT para evitar diseños feos.

🧵 THREAD

Para entender el ritmo vertical hay que saber que es el "baseline" en la tipografía.

Y no es más que la línea invisible sobre la que se apoya una línea de texto.

El ritmo vertical (vertical rhythm) es un concepto tipográfico que propone que todas las líneas de tu texto deben estar espaciadas unifórmente sin importar:

- Tamaño
- Alto de línea
- Margin o pdding

👀 Veamos un ejemplo...

En el primer ejemplo puedes ver como el baseline no se alinea con la línea guía.

Mientras que en el segundo ejemplo si se alinea perfectamente.

¿Y cuáles son los beneficios? Veamos...

💄 El principal y más notable es que tu página se percibe mejor diseñada y más profesional.

📖 La legibilidad mejora, el ser humano está acostumbrado a leer con ritmo.

¿Y como se logra?...

Es un cálculo matemático que se hace en los #CSS con las variables de:

- font-size
- line-height
- padding
- margin

Para generar los estilos con ritmo puedes usar:

nowodzinski.pl/syncope/

Te genera todos los CSS para incluir en tu página web.

Finalmente, para medir el ritmo vertical de tu página puedes usar la extensión de Chrome:

🔗 Baseliner chrome.google.com/webstore/detai…

❤️ Si te gustó este contenido ayúdame con un RT al primer tweet.

Si quieres lucirte en las entrevistas tengo dos libros que te ayudan: fmontes.com/99 o 99.tips

🌅 En mi Instagram comparto tips sobre diseño, desarrollo y empleos.

instagram.com/fmontes