7 reglas simples para la tipografía móvil
Probablemente hayas escuchado que la buena tipografía es invisible, pero es más exacto decir que una buena tipografía hace que el acto de leer sea sencillo.
Cuando el ojo viaja a lo largo de una línea de texto, lo hace en saltos, llamados movimientos sacádicos; no lee letras, ni siquiera palabras, lee instantáneas de partes de palabras y su cerebro llena lo que espera encontrar. Si el cerebro se sorprende, envía los ojos hacia atrás para verificar si su suposición era correcta. Una buena tipografía minimiza el trabajo que deben hacer tus ojos al crear un flujo suave a lo largo de la línea.
Los dispositivos móviles tienen desafíos inherentes para cualquier tipógrafo: el espacio es limitado y la luz ambiental a menudo es deficiente. Pero al hacer ajustes simples a las técnicas que ya usamos para la Web, podemos mejorar la legibilidad en los dispositivos móviles.
1. Date espacio
Contrario a la creencia popular, la tipografía no se trata de la disposición de pequeñas líneas onduladas en una pantalla; tipografía es en gran medida sobre el espacio dentro y alrededor de ellos.
La tipografía le debe mucho menos a las letras, que al espacio que enmarcan
Para entender esto, ayuda a entender de dónde provienen las fuentes: el agujero en el medio de una 'o' (y una 'b', 'c', 'p', etc.) se llama "contador". Cuando las fuentes estaban siendo talladas en metal para su uso en las prensas de impresión originales, esos contadores fueron creados por un punzón de metal que fue tallado y luego conducido a un plato. Los primeros diseñadores de tipo estaban trabajando con las formas que no se imprimirían. La tipografía debe mucho menos a las letras mismas que al espacio que enmarcan.
Cuando hablamos de jerarquía, solemos decir
a través de
, y posiblemente a
. Pero hay una jerarquía adicional que afecta el flujo de una línea, o párrafo, y esa es la jerarquía espacial: el espacio entre letras es menor que el espacio entre palabras, el espacio entre palabras es menor que el espacio entre líneas, y adelante.
Para una legibilidad óptima en el móvil, preste especial atención a la jerarquía espacial, la agrupación de caracteres gestalt en palabras, líneas y párrafos es aún más esencial en la luz natural.
2. Obtenga la medida
La medida es la longitud de una línea de texto. O, más exactamente, es la longitud ideal para una línea de texto, ya que es raro que cada línea encaje exactamente.
La medida ideal generalmente aceptada para una lectura cómoda es de alrededor de 65 caracteres. La longitud física de la medida dependerá del diseño de la tipografía, el seguimiento (ver a continuación) y el texto exacto que está utilizando. Los primeros 65 caracteres de este artículo, establecidos en PT Serif son 26.875em de ancho, en Open Sans, 28.4375em, en Ubuntu, 27.3125em; si añadiera cursivas, letras mayúsculas o una docena de otros detalles tipográficos, variaría aún más.
Es raro que 65 caracteres se extiendan hasta el borde de un navegador de escritorio, pero en la mayoría de los dispositivos móviles, 65 caracteres (si se muestran lo suficientemente grandes para ser legibles) se extienden más allá de los límites del navegador. En consecuencia, para dispositivos móviles, se ve obligado a reducir su medida.
No existe un estándar comúnmente aceptado para medir en una pantalla móvil, sin embargo, tradicionalmente, las columnas estrechas de texto en periódicos o revistas aspiran a 39 caracteres. Como esta medida ideal ha sido probada durante siglos, nos sirve para la tipografía móvil.
3. Afloje y luego apriete
Liderar es el espacio entre líneas, y cuando se establece demasiado apretado, hace que el sacádico salte desde el final de una línea hasta el comienzo del siguiente difícil de seguir. Cuando se establece demasiado libremente, los huecos entre las palabras comenzarán a alinearse, creando lo que normalmente se conoce como ríos, interrumpiendo el flujo suave de la línea.
l-r: líder ideal, demasiado apretado, demasiado flojo.
El estándar habitual para liderar es alrededor de 1.4em, sin embargo, en mi experiencia, es demasiado ajustado para pantallas: una de las características clave de un tipo de letra que funciona bien en la pantalla son los contadores grandes, y los contadores grandes requieren un poco más para mantener la jerarquía espacial .
Invertir esa regla, una medida más corta requiere menos liderazgo. Por lo tanto, aunque es probable que establezca que su estilo sea un poco más flexible para los estilos de escritorio, recuerde ajustarlo para pantallas móviles.
4. Encuentra el punto dulce
Todas las fuentes tienen al menos un punto óptimo; una combinación del tamaño al que se reproducen mejor en la pantalla, y el punto en el cual el anti-aliasing aplicado en el navegador distorsiona el diseño del tipo de letra lo menos posible.
El punto óptimo suele ser el punto en el que la mayoría de los trazos se alinean con la cuadrícula de píxeles: las fuentes de píxeles, si las recuerda, solo funcionaron cuando se las clasificó según su punto óptimo.
Establecer una fuente en su punto óptimo produce un mayor contraste. El contraste es particularmente importante cuando se diseña para dispositivos móviles debido a la posibilidad de deslumbrar la vista fuera del laboratorio de dispositivos sutilmente iluminado.
Descubrirá que los ajustes menores en el avance empujarán y desconectarán líneas de píxeles enteros. En mi opinión, el contraste supera a las pantallas móviles, por lo que si tienes que comprometerte para mantener las líneas en píxeles completos, hazlo.
El enfoque estándar para los diseñadores es el de tender tipos usando una grilla de referencia, pero para móviles necesitamos usar la altura x en su lugar (la altura x es literalmente la altura de la minúscula 'x'). Sabemos por los estudios de legibilidad que el cerebro reconoce la parte superior de las palabras, no la parte inferior, por lo que para lograr un mayor flujo de sacádico, debemos asegurarnos de que la parte superior de nuestros caracteres esté más cerca de los píxeles.
5. No pierdas tu trapo
Un trapo, es el borde de un bloque de texto. La mayoría de lo que lees está alineado a la izquierda (al menos para los idiomas basados en el latín) lo que da como resultado un borde derecho irregular .
Cuando tus ojos saltan de un extremo a otro de una línea, el cerebro puede juzgar mejor el ángulo y la distancia del siguiente salto, si todos los saltos son consistentes, piensa que se trata de correr por los escalones, es mucho más rápido si están espaciados consistentemente. Por esta razón, el borde izquierdo de su texto debe ser plano, con cada línea comenzando en el mismo lugar (exactamente lo contrario es cierto para los idiomas que se leen de derecha a izquierda).
Como resultado, nunca debe centrar en el centro más de dos o tres líneas de texto.
A menudo, el texto está justificado, lo que significa que las palabras en la línea están espaciadas por igual para que no haya trapo en ninguno de los lados. (Sospecho que el texto justificado está de moda porque el diseño receptivo les ha enseñado a los diseñadores a pensar en bloques). El texto justificado da como resultado espacios en blanco inconsistentes y, en el peor de los casos, genera un par de palabras en una línea, lo cual es muy discordante. El problema con el texto justificado se ve agravado por una medida más corta, por lo que el texto justificado puede ser ilegible en el móvil.
l-r: alineado a la izquierda, alineado en el centro, justificado.
Si la limpieza es realmente importante para usted, entonces pegue con un guión el texto para suavizar el trapo, pero nunca justifique el texto en el móvil.
El texto a la derecha desigual tiene un beneficio adicional en los dispositivos móviles: el texto se lee con frecuencia en situaciones de distracción y los lectores suelen apartar la vista del texto para consultar el nombre de una estación o responder una llamada. Un trapo crea una forma aleatoria en la columna de la derecha que ayuda al ojo a reubicarse en su última posición, con una relectura mínima.
6. Reducir el contraste
Si bien queremos fomentar el contraste entre texto y fondo, queremos reducirlo entre diferentes niveles de tipo.
En dispositivos móviles, se ve sustancialmente menos texto y, por lo tanto, el contraste se vuelve exagerado
La razón de esto es que nuestros cerebros juzgan la importancia según el contexto. Sus encabezados pueden ser dos o incluso tres veces el tamaño del texto de su cuerpo en el escritorio, y eso funciona porque hay más texto en la pantalla. En el dispositivo móvil, se ve sustancialmente menos texto y, por lo tanto, el contraste se exagera.
La mayoría de los diseñadores usan una secuencia de Fibonacci de algún tipo para texto de tamaño. Para dispositivos móviles, ajuste las proporciones para reducir el contraste de tamaños de letra. Por ejemplo, si usa la proporción áurea para aumentar el tamaño, se multiplica por 1.618. Para dispositivos móviles, tome la proporción más pequeña y multiplique por 1.382 en su lugar.
Las pantallas de escritorio toleran escalas tipográficas más extremas que las pantallas móviles.
7. Ajuste el seguimiento a escala
Cuando ajustamos nuestros tamaños de fuente para dispositivos móviles, debemos ser conscientes de los cambios necesarios en el seguimiento.
(Permítanme prólogo al decir que no debe ajustar el kerning. Kerning es el espaciado de dos pares de letras para que el espacio entre ellos sea ópticamente consistente con el espacio entre los otros caracteres. Se agregó Kerning a la fuente cuando se construyó , y probablemente demoró meses. Si seleccionó una fuente construida profesionalmente, entonces se hizo correctamente, y si cree que no se ha hecho correctamente, busque una fuente diferente).
El seguimiento no es kerning. El seguimiento es el espacio entre letras aplicado a todos los caracteres de la fuente. Por lo general, no debes ajustar el seguimiento tampoco.
Las excepciones a esa regla son para texto grande, como encabezados y texto pequeño, como notas a pie de página. El texto más grande requiere menos seguimiento, y el texto más pequeño requiere más seguimiento. El primero se debe a la agrupación, y el último es para beneficiar el contraste. Si ha realizado cambios en los títulos, o si usa un tipo de letra de pantalla que generalmente tiene un seguimiento más ajustado, es posible que necesite aflojar un poco el seguimiento a medida que lo escala.
Resumen
La tipografía es una artesanía que los diseñadores dedican toda la vida a perfeccionar, precisamente porque cada texto, cada tipo de letra y cada tecnología presenta nuevos desafíos. No hay reglas duras y rápidas que siempre funcionen en cada situación dada.
Cuando aspira a la legibilidad, hay tres principios que debe tener en cuenta: un flujo suave a lo largo de las líneas, una clara jerarquía espacial y un contraste adecuado. Esto es especialmente cierto para la web móvil.
No existe una regla que no pueda anularse con la evidencia de sus propios ojos, pero las pautas aquí serán un punto de partida ideal para textos bellamente diseñados en dispositivos móviles.