Tips de tipografía para devs y otros mortales

Como diseñadora gráfica de base y habiendo trabajado como maquetadora, siempre intenté mejorar la visualización de la tipografía y llevar a lo digital todo lo que aprendí (y enseñé por 4 años como ayudante) en la materia Tipografía en la universidad.

Algunas recomendaciones para mejorar la lectura del usuario en tus productos digitales:

Básicos

Tener un buen contraste para hacer legible el texto y testear con humanos el tamaño de lectura es básico y clave, pero a la vez veo muchos problemas con esto en sitios web o redes sociales. Si tienen un celular super plus, piensen que al hacer posteos sus seguidores pueden tener celulares de tamaños mas chicos que no lo vean correctamente.

Traten de que tenga buena lectura con el fondo (si va a haber texto sobre imagen, se sugiere que sea un texto corto y se lea bien, por ejemplo un título: Tipografías Display).

Utilizar fuentes creadas para web

A la hora de diseñar, se pueden llegar a usar tipografías que fueron pensadas para utilizar en editorial y luego no encontrarlas para web, entonces terminamos agregándolas o convirtiéndolas.

Esto puede traer problemas en la visualización pero también en la carga de esta tipografía (primero vemos la fuente por default y luego de unos segundos carga la que utilizamos).

Para evitar esto les recomiendo utilizar sitios como Google fonts: http://fonts.google.com/

Primero hacen click en "Select this style" Y eligen las variables a la derecha En el tag "Embed" nos da el código de la fuente para linkearlo en HTML y debajo el de CSS.

Estas son fuentes de uso libre. Las pueden descargar previamente para diseñar y luego utilizar el link directamente en el código.

Otro sitio con fuentes de licencia gratuita es: https://www.fontsquirrel.com/ Acá pueden encontrar también webkits, pero deben descargar la tipografía y subir la fuente luego en su FTP.

Font Squirrel tiene también un webfont generator, donde suben las fuentes y pueden descargar la tipografía para utilizar en su sitio o webapp. https://www.fontsquirrel.com/tools/webfont-generator

Optimizar la visualización

Este código CSS en "body" va a ayudar a que las fuentes se vean mejor en tu sitio o webapp:

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

NO JUSTIFIQUEN PÁRRAFOS

Un día le escribí un mail a la gente de kindle (vean el nivel de intensidad que manejo) porque no existe la opción de corte de palabras por idioma en el ámbito digital, y eso hace que el color del párrafo genere espacios terribles dentro de las líneas de texto. Se les llama Ríos tipográficos y dificultan el ritmo de lectura (si no me creen, googleen "justificar texto digital" y aparecen miles de artículos). El justificado no solo es difícil de leer para todos, se les hace mas difícil aún para personas con dislexia.

La interlínea necesaria

Amíguense con el line-height. Hasta las opciones que nos da instagram en las stories tienen muy poca interlínea (a ver si me lee algún dev de instagram 🙏🏻). Tener las líneas de texto muy pegadas o demasiado separadas dificulta la lectura y seguir la próxima línea en la lectura. No hay una regla exacta para saber cual es la mejor interlínea ya que depende de la tipografía que usemos, pero la mas común es darle entre un 20% y 25% mas de interlínea que el tamaño de fuente font-size:1rem; line-height:1.25rem Este artículo, por ejemplo, tiene un 20% mas (inspeccioné el código, si). Algo que ayuda a notar esto es ver que los ascendentes y descendentes de una fuente no solo no se toquen, sino que tengan un espacio entre ellos. Acá vemos que instagram tiene poco espacio en su nueva opción de texto.

Otra guia que podemos tener es que siempre la interletra debe ser menor a la interpalabra, y la interpalabra menor a la interlínea.

Espacio entre líneas > Espacio entre palabras > Estacio entre letras

O hagan lo que quieran, como instagram que no leyó este artículo y tampoco te deja editarla 😄

No utilizar italica ni fuentes condensadas en textos largos (mas de 5 líneas, mas o menos) Al tener muy chicas las formas internas de las letras se difuculta mucho mas el reconocimiento de las letras y la lectura rápida.

Veo muchos sitios donde usan ese tipo de letra para que entren mas palabras por línea, POR FAVOR NO LO HAGAN, es super ilegible. Las tipografías condensadas son para utilizar a modo de título o display... y los legales: algo que nadie quiere que lea el usuario.

Bordes en tipografías Esto va más para quienes diseñan, pero los bordes modifican el diseño de la Fuente y, por lo tanto, su peso visual. Los bordes siempre deben ir por fuera de la Fuente para no modificarla. Y, de paso, tampoco la deformen por esta misma razón. Si quieren una condensada deben buscar la variable correcta.

Eso es todo. Si les interesa mas el tema, con la cátedra Cosgaya habíamos armado un wiki con algunos artículos al respecto: http://www.oert.org/

Espero los haya ayudado y hayan aprendido algunas cosas sobre tipografía y mi intensidad con este tema.