Cómo mejorar las experiencias de lectura en dispositivos digitales

Si tuviese que elegir un invento que cambió la humanidad para siempre, sería la comunicación escrita. Y es que ha permitido plasmar el conocimiento, transmitir la historia y es una herramienta poderosísima para el avance y el progreso.

Incluso ahora, es el principal medio para comunicarnos y ayudarnos a entender el mundo. Ya sea a través de un paper científico, un mensaje de texto en un programa de mensajería o una publicación en la web.

Quizás os hayáis acercado a este artículo para ver algunos trucos con CSS y recomendaciones de diseño fáciles de implementar. No es el objetivo, sino dar una visión más amplia a la hora de favorecer la experiencia de lectura y el aprendizaje en contextos digitales. Habrá múltiples soluciones, y serán las personas las que decidan qué funciona y qué no. Nosotros y nosotras como diseñadores somos simplemente «el medio» para que ello suceda.

Sí que me gustaría, al menos, daros posibilidades y, sobre todo, ayudar a cambiar la manera de pensar a la hora de acercarnos a este problema. Ya no sirve copiar y pegar un texto y usar la fuente habitual, en un contexto competitivo, necesitamos reducir el esfuerzo y hacer que merezca la pena el tiempo invertido en leer un contenido.

Qué tener en cuenta

Lo primero que debemos tener en cuenta es la carga cognitiva. Estamos expuestos a miles de impactos, decisiones, etc., a lo largo del día y a la fatiga visual que provoca nuestra continua exposición a pantallas. No solo el monitor del trabajo, sino el móvil en nuestro tiempo libre, las televisiones, proyecciones en lugares públicos, etc.

Es por ello por lo que estoy muy de acuerdo con el concepto de tecnología invisible. Ya lo decía G. Krishna en su libro The Best Interface is No Interface, primero, plantearnos si merece la pena y que lo que hagamos sea lo menos invasivo posible. De hecho, cuando trabajamos bien con tipografía, el contenido es lo que centra la atención, todo lo demás se dispone en función de este.

Por ello, es tan importante lo que escribimos. No escribimos para el SEO (o al menos no deberíamos), sino para las personas. Si podéis contarlo en un párrafo, mejor que en dos… Es una cuestión de respeto. Pensad siempre en la persona que va a leerlo y tratadlo, al menos tan bien como lo haríais con vosotros mismos.

Al final, lo que buscamos al componer un texto es crear un momento de disfrute y reflexión, como cuando leemos un haiku. Lo más valioso hoy en día es la atención, por lo que hacer que disfruten tanto de lo que estamos contando como de la manera en la que lo presentamos, es una de las formas más efectivas para conseguirlo.

Pensad en el contexto de uso. No diseñamos igual para una lectura reposada que para alguien que va sobre la marcha. Medium.com está pensado para favorecer el tiempo de lectura, su modelo de negocio se basa en el tiempo que las personas pasan en su plataforma y que estén dispuestas a pagar por ello. En cambio, Citymapper.com busca la efectividad, que te llegue la información necesaria, nada más, en el momento adecuado. Por eso, nos muestra solo la información de la parada y el andén en el que debemos subir, y no mucha más información, ya que o bien ya no es necesaria o lo será más adelante.

Un error que hemos cometido en el diseño digital ha sido replicar demasiado el mundo físico. Primero, con los iconos que eran metáforas como la papelera o el disquete; después, organizando la información en páginas como si fuese algo impreso; y, actualmente, homogeneizando todos los diseños en busca de la facilidad de uso siguiendo los patrones del material impreso. En mi opinión, eso nos resta oportunidades que la tecnología es capaz de proporcionarnos.

En todo caso, en los inicios, era la mejor manera de acercar un nuevo mundo, el digital, a las personas.

Uno de los problemas de lo digital, y del que debemos ser conscientes, es que tenemos la distracción demasiado cerca, un icono, un movimiento en pantalla, y estamos en una aplicación nueva. Por ello, es muy importante diseñar los contextos de lectura y aprendizaje como espacios completos, insertar toda la información relevante y, si hay enlaces externos, que estén en el momento adecuado. Por ejemplo, con una sección de recursos y bibliografía al final.

Mejorar la experiencia de lectura, un aspecto crucial

A medida que el consumo de medios digitales (web, aplicaciones, instalaciones, señalética, etc.) sigue creciendo, la forma en la que los usuarios interactúan con el texto en pantalla tiene un impacto significativo en la comprensión, retención de la información y en la comodidad general del usuario.

Es algo que no podemos dejar pasar en ningún caso.

Si somos una empresa, necesitamos que entiendan el valor de nuestros servicios y la calidad y características de nuestros productos.

Como individuos, debemos comunicarnos de manera efectiva. Nuestro futuro puede depender de ello.

Las organizaciones (gobiernos, ayuntamientos, asociaciones, ONG, etc.) necesitan transmitir decisiones e información de manera eficiente. Sin dejar a nadie fuera, adaptando el contenido para que todo el mundo tenga acceso a ello. Afortunadamente, la accesibilidad ya no es negociable y está garantizada por ley en muchos casos.

No solo tipografía

Algunos de los principales factores que influyen en una experiencia efectiva de lectura son la tipografía y todas las técnicas que, a lo largo de los siglos, hemos aprendido a utilizar. Solo un buen uso de estas no es suficiente. Es muy importante también tener en cuenta el contexto de uso, las circunstancias en las que las personas necesitan descifrar esa información y crear unas condiciones adecuadas para que el acto de comunicar sea posible. Debemos pensar de manera global: fuente, composición, formato, interacción, etc.

Rompiendo mitos

Me gustaría empezar con algo fundamental, como es el pensamiento crítico. Y es que en muchas ocasiones algo que se ha repetido siempre acaba siendo aceptado y deberíamos siempre preguntarnos el porqué de las cosas y, siempre que sea posible, validarlo. Si algo nos ayuda a entender el mundo es el pensamiento científico y este plantea una hipótesis, y mediante experimentos, trata de que sea replicable, que siempre que pasa A ocurra B. Hasta que después alguien venga con una nueva hipótesis, que probablemente tire por el suelo los conocimientos anteriores. Así es como avanza la humanidad.

Por eso, seguramente las ideas que expongo a continuación os rompan algunas ideas preconcebidas con respecto a la lectura.

No existe «la tipografía más legible»

Evidentemente hay fuentes que están diseñadas para funcionar mejor en pantalla: ojo grande, altura de la «x» generosa, elementos reconocibles, etc. Y podemos tirar de oficio, investigación e intentar diseñar la tipografía perfecta, pero eso no significará que sea siempre la mejor opción. Y es que uno de los mitos que quiero romper es ese. La realidad, que es lo que importa, es que leemos mejor aquello a lo que estamos acostumbrados. Y pongo un par de ejemplos, el primero el de un buen amigo y una de las personas que conozco que más hambre por aprender tiene. Está habituado a leer papers científicos y estos se componen en columnas bastante estrechas. Si descargáis uno en formato PDF es bastante probable que os sorprenda y os resulte incómodo. Es normal, no es el formato más adecuado para pantalla, pero es una convención. Hasta tal punto llega que cuando tiene que leer un texto que no está en este formato, lo adapta, porque necesita esa «familiaridad» que le abstrae del continente para poder centrarse en el contenido.

Lo mismo os pasará a cualquiera de vosotros. Si los comunicados del ayuntamiento están escritos en Comic Sans y es a lo que estáis acostumbrados, os resultará más cómodo y efectivo que un formato, probablemente, más profesional pero menos habitual.

Pongo otro ejemplo, se cita La Biblia de Gutenberg como el primer libro impreso y el que inició una nueva era de conocimiento. Aquí hay varios mitos: que los coreanos ya habían impreso con tipos móviles bastante antes; y otro que el bueno de Johannes lo que buscaba era un buen rendimiento económico, por lo que no buscaba la máxima eficiencia, sino «imitar» los manuscritos que los monjes copiaban uno a uno. Si hacéis una búsqueda rápida de páginas de ejemplo de esta Biblia os reto a leerla a la misma velocidad que lo hacéis con los correos electrónicos del trabajo. Complicado. Es un formato con muy pocas variaciones, muy rítmico y con poco espacio, pero, sorpresa, eso era lo más legible en la época.

Así que grabémonos que lo más legible es aquello a lo que la gente está acostumbrada, no seamos elitistas y adaptemos nuestros formatos a las necesidades y costumbres de las personas. Esto va de solucionar problemas, no de generarlos.

Mi bandera favorita se justifica a la izquierda

Otro mito que me gustaría romper es que el hecho de que siempre se haya hecho así no significa que sea la mejor manera. Saliendo un poco del tema, una de las mejores maneras de solucionar un problema es traer a la mesa de discusión a personas que no estén «contaminadas» por intereses, especializaciones o falta de visión. Es por ello por lo que es tan importante trabajar con equipos diversos. Los perfiles júniores en las empresas hacen que veamos los problemas con otra perspectiva, muy valiosa, incluso aunque validemos nuestras decisiones, nos harán ver el mundo de otro modo.

Hilando con esto, ¿por qué el 99,9 % de los libros impresos tiene los textos justificados? Con igual alineamiento a izquierda y derecha.

Pues por el «siempre se ha hecho así» (uno de los mayores enemigos de la innovación).

En cierto modo tiene sentido, por lo que comentábamos antes, leemos mejor aquello a lo que estamos acostumbrados. Pero profundicemos un poco.

¿Por qué se hace esto así?

Por un tema técnico. Las páginas se componían con tipos de plomo y se montaban sobre un marco metálico «rama» que después se ataba para colocarlo en la prensa y poder hacer las copias. Era imprescindible que todo encajase, porque, si no, los tipos se caerían y era un proceso lento y laborioso, así que se colocaban pequeñas piezas entre letras y palabras para ajustar las distancias y así poder ajustar a ambos lados las piezas y que todo el conjunto formase un bloque. Así que nos acostumbramos a ello por un tema técnico. Es cierto que estéticamente nos gusta el orden, la geometría y las cosas armoniosas, pero si buscamos realmente la legibilidad, nos encontramos con un problema.

Espaciar palabras hace que el ritmo no sea consistente.

Me explico. Un día te tocará ponerte gafas, aunque no tengas miopía y es que hay una edad en que nuestro ojo pierde flexibilidad, es lo que se conoce como «vista cansada» y es que no leemos carácter por carácter, sino que, en realidad, escaneamos el texto y vamos dando saltos, que a medida que pasa el tiempo, nos cuesta más y somos menos precisos. Así que las variaciones en las distancias, aunque puedan parecer mínimas, influyen en nuestra capacidad de comprensión y en la experiencia de lectura.

Resumiendo, no os dejéis convencer porque algo siempre se haya hecho así. No significa que siempre sea la mejor manera de hacerlo. Adaptaos al contexto y las circunstancias de las personas que tienen que descifrar esa información.

Veamos algunas recomendaciones.

Leer rápido tiene un coste

Veréis cursos y recomendaciones para leer más libros en menos tiempo. No podemos jaquear nuestro cerebro. Si realmente queréis ayudar a las personas a aprender más, adaptad el contenido y la duración a las necesidades reales. ¿Cuántos libros habéis leído que en realidad eran dos ideas con un montón de ejemplos? El problema es que adaptamos el contenido a lo que pide el mercado: pasa con la música, el cine y por supuesto con las ideas, que deben tomar la forma de un libro, cuando podrían ser un artículo.

De todos modos, si queréis realmente ayudar a que una persona pueda leer más rápido, tenéis varias opciones que podéis implementar en vuestros diseños:

Dadle una guía visual. Lo primero que debéis hacer si queréis leer más rápido es usar el dedo o un lápiz para seguir la línea. Un ejemplo muy habitual son las tablas, donde una suave trama o una línea («filete») pueden ayudar a no saltar accidentalmente a la siguiente.

Diseña para lectores con presbicia. Ayudarás a todos. La accesibilidad no es negociable, y todos y todas nos beneficiamos de ella. Así que para paliar el problema de los saltos («sacadas») podemos controlar la anchura de los párrafos (tamaños máximos y mínimos, y adaptar la experiencia en los distintos cortes por dispositivo). Existen recomendaciones del tipo 2,5 alfabetos como anchura de párrafo, pero no creo demasiado en las fórmulas y buenas prácticas. Depende de muchos factores: el propio dispositivo, el idioma (evidentemente, no es lo mismo el alemán que el inglés) e incluso el propio tema del que estemos tratando. Mi recomendación, como en cualquier proyecto digital, es hacer tests con usuarios, sobre todo, comprobando la capacidad de retención y entendimiento sobre lo que se ha leído. Por supuesto, en digital, siempre es recomendable componer justificando a la izquierda («bandera derecha») y controlando muy bien la forma de los dientes de sierra, que no sean demasiado pronunciados y controlando la forma en que se agruparán las palabras. No os asustéis, técnicamente tenemos recursos a nuestra disposición.

Componed como si fuese poesía. Esta quizás sea mi recomendación principal. Ya sea una marca, un eslogan o cualquier párrafo, hay que intentar que todo tenga sentido cuando se lea en voz alta. Es la mejor manera de controlar que el texto es entendible y la experiencia de lectura disfrutable. Ahí podemos detectar el ritmo, si la anchura del párrafo es demasiado corta o larga, si hay poco espacio entre líneas, etc. En determinados casos un simple espacio irrompible de HTML « » nos evitará que, por ejemplo, «Nueva York» o un nombre y su apellido estén en líneas diferentes.

La mejor escuela, desde mi punto de vista, para aprender sobre composición, arquitectura de la información o diseño visual para proyectos digitales es el diseño editorial, por tener siglos de aprendizajes, y porque se logró un equilibrio perfecto entre la belleza (algo no negociable) y la transmisión de contenidos. Todo lo que observemos en revistas clásicas de moda, arquitectura, etc., nos puede servir en nuestros proyectos digitales. Uno de los elementos que más hay que tener en cuenta como diseñadores de contenido es trabajar con distintos niveles de información. Pongo un ejemplo que parece que no tiene relación, pero que, en realidad, es común en todos los campos de la comunicación. Imaginad que vais al cine con vuestro hijo o hija a ver una película de Pixar. Los dos disfrutáis de la historia, pero es posible que la entendáis de manera diferente, o al menos os riáis en momentos diferentes. Se debe a que todos los contenidos culturales de calidad tienen niveles. Hay bromas para niños y guiños a los mayores, referencias obvias y otras que son solo para gente apasionada de un tema y que puede que no descubráis en el primer visionado. ¿No os ha pasado que probablemente vuestro disco favorito no fuera fácil en su primera escucha? Y que, a medida que pasaba el tiempo y lo escuchabais más, ibais descubriendo detalles y capas en él. Pues lo mismo con los contenidos. Un artículo de una revista debe tener distintos niveles para un visionado rápido, una lectura fugaz y, por supuesto, un entendimiento profundo de la materia. Para el primer nivel necesitamos titular de forma clara (nada de odioso clickbait), entradilla con la información principal (importante las 5 W) y algún destacado clave (declaración, cita, estadística, etc.); para el segundo nivel de lectura (un cuadro con una explicación sobre un área concreta), títulos intermedios («ladillos»), textos en negrita, etc.; y, para el nivel más profundo, texto bien organizado y referencias, pies de página, bibliografía… Que distintos tipos de lector puedan sacar rendimiento y aprendizajes a lo que escribimos. Da igual que sea un texto científico o la ficha de producto de nuestra tienda en línea.

Ojo con las convenciones, el contexto manda. ¿Qué tamaño debe tener un texto? La recomendación habitual era 10-12 puntos para texto impreso y 16 píxeles, para pantalla. Pero en el mundo real no existen las recetas que sirven para todo. Luego viene una editorial que saca una colección a cuerpo 18 puntos y es todo un éxito, cuando la gente se da cuenta de lo cómodo que es leer en cuerpos más grandes y con márgenes generosos. Lo mismo en digital: ¿son lo mismo 16 píxeles en una pantalla de móvil leyendo en un vagón de metro abarrotado que en una tableta de 13 pulgadas en la tranquilidad de tu casa? Por supuesto que debemos dejar al usuario que personalice la experiencia, en ajustes o directamente con interacciones. Pero sí que hay decisiones que podemos tomar para mejorar la experiencia de lectura. Si es un contexto muy luminoso y el dispositivo tiene pantalla reflectante, quizás un fondo oscuro no sea la mejor decisión, si sabemos que nuestros usuarios separan la pantalla del móvil de su cara, entonces podemos ajustar el tamaño y la distancia al marco del dispositivo (es hilar muy fino, pero tenemos sensores y pruebas realizadas en las que el texto puede aumentar o reducirse en función de la luminosidad, el movimiento, etc.). Seguramente, habéis visto la función para no marearse mientras lees en un transporte que ha implementado Apple en sus dispositivos. No se trata de un sobreesfuerzo en el desarrollo, pero sí de cultivar esa mentalidad de dudar y buscar la mejor manera posible de solucionar los problemas. Mi opinión –en muchos casos distinta a la mayoría– es que deben ser experiencias diferentes en función del dispositivo, la persona, el contexto. Yo, al menos, no quiero leer la misma cantidad de información en un periódico digital, en mi casa con mi lector de tinta electrónica, que en un enlace que he pulsado desde una red social.

Diseñar de acuerdo con el contexto. Al hilo de lo anterior, una buena herramienta son las calculadoras de tamaño de fuente que nos permiten, definiendo distancia y tamaño percibido, saber qué tamaño de fuente es la adecuada para esa situación.

Por último, aunque es un tema en que podríamos profundizar muchísimo más, hay momentos en los que hay que obligar al usuario a ir despacio. Que tenga que leer a un ritmo más lento o incluso que le cueste. Un ejemplo es si quiere formatear un disco duro, que tenga que entender bien lo que va a ocurrir y las consecuencias. Podemos hacer que el texto aparezca poco a poco, destacar que no hay vuelta atrás, o una de mis favoritas que es hacer que lea una frase como «voy a formatear el disco duro y perderé la información que hay en él para siempre» y que tenga que teclearla tal cual, en vez de simplemente pulsar un botón.

Buenas prácticas para mejorar la experiencia de lectura

Como veis el tema da para mucho, siempre teniendo en cuenta las bases del diseño, las convenciones de nuestro sector, podemos inspirarnos en las publicaciones de calidad, pero vamos a recoger algunas recomendaciones que podemos poner en práctica inmediatamente.

Romper el contraste

La opción con más contraste es negro sobre blanco, la segunda la contraria: blanco sobre negro, pero engrosando un poco los textos, y, en tercer lugar, amarillo sobre negro. Pero no son las mejores soluciones para entornos digitales. Las pantallas han mejorado muchísimo, pero esos contrastes tan extremos son molestos a la vista, pueden «reventarse» (expandirse de manera no controlada) y en definitiva resultar en una experiencia no demasiado buena. Para resolverlo podemos «romper» esa relación. Que los fondos oscuros no sean negros al 100 % (por ejemplo #303030), que los fondos claros no sean tampoco blancos (algo como #E7E7E7 o un gris con la dominante del proyecto, tirando a azul, magenta, etc.) y que los textos no sean negros sobre fondo blanco, sino un gris profundo. Podéis encontrar ejemplos en los principales sistemas de diseño, pero es importante que creéis vuestras propias paletas de color adaptadas al branding del proyecto y que las validéis a nivel de accesibilidad a través de herramientas especializadas. Hay decenas de ellas, tanto en línea como integradas en vuestra herramienta de trabajo.

La luz es la clave

Si la fotografía es pintar con luz, es un elemento que debemos tener siempre en cuenta. Tanto la luz que proyecta la pantalla como el contexto del lugar en el que va a leerse esa información.

Por ejemplo, en una presentación es interesante que el fondo de esta no sea blanco puro, porque eso será luz en toda su intensidad y molestará a los asistentes. En cuanto a la luz que proyecta el dispositivo, una aplicación que debe ser leída de noche, debería adoptar un tema oscuro, para no deslumbrarnos y ajustar su contraste a opciones cálidas.

La importancia de los detalles

Y eso incluye la tipografía y la legibilidad, que son esenciales para garantizar que el texto sea claro y fácil de leer. La elección del tamaño de la fuente, el interlineado, el espaciado entre letras y el contraste de color son variables críticas que afectan la legibilidad. Además, es fundamental asegurar que el diseño sea responsive, es decir, que el contenido se adapte de manera adecuada a diferentes tamaños de pantalla para ofrecer una experiencia coherente en cualquier dispositivo. El texto debe poder ajustarse tanto a pantallas grandes como a dispositivos móviles sin perder claridad ni estructura. En mi opinión, no generalizada, los contenidos deben también adaptarse al dispositivo, al contexto, al historial, etc.

En los textos, se nota rápidamente cuando han sido compuestos de manera profesional. Y es que los aprendizajes a través de siglos de creación nos han dado la capacidad de crear composiciones atractivas a través de detalles como:

Puntuación colgante, es cuando, por ejemplo, en una cita, las comillas no se alinean con el texto para que este tenga una composición perfecta.

En cuerpos grandes se crean ajustes específicos. No es lo mismo un texto que ocupa todo el navegador que algo más pequeño, debemos juntar los caracteres, reducir el interlineado, incluso hasta el punto de ser negativo y, en consecuencia, tratar los estilos no como una ampliación, sino como una entidad en sí misma.

En los listados, con números o boliches, debemos trabajar como en la puntuación colgante y hacer una sangría francesa, en que la segunda línea tiene un margen mayor que la primera, para que el elemento que ayuda a diferenciar cada apartado ya sea un guion, un círculo o cualquier otro, no interrumpan la alineación del texto.

Y, por supuesto, para cualquier elemento que veamos que no encaja, que rompe la armonía, debemos crear una regla para que funcione visualmente de manera perfecta, ya sean números ordinales, alineación de elementos o los subrayados, algo tan importante en internet fue la manera de mostrar, en sus orígenes, que un elemento era interactivo. Medium, como plataforma especializada en contenidos para leer, tiene un buen artículo sobre cómo lo implementaron: «Crafting link underlines on Medium».

Conclusiones

Mi objetivo con este artículo no es daros docenas de recomendaciones y buenas prácticas. El tema es mucho más amplio de lo que parece, y si hay interés estaría encantado de continuar con algo que me apasiona. Esto es simplemente un replanteamiento en la manera en la que diseñamos las experiencias de lectura y cualquier otra área de nuestros productos digitales. Buscad no solo la funcionalidad sino también el disfrute de la experiencia, porque no se trata de si pueden leerlo, sino de si querrán hacerlo.

Referencias / Enlaces relacionados

El estudio Ashler es un buen ejemplo de trabajo de calidad. Uno de sus fundadores, Octavio Pardo, es investigador en el campo de la tipografía y la legibilidad. Disponible en: https://www.youtube.com/watch?v=EQL0hWlHHew~

ARILLA, Pedro (2024). Per què és bona aquesta Tipografia. Editorial Campgràfic.

BRINGHURST, Robert (2002). The Elements of Typographic Style. Hartley & Marks.

LUPTON, Ellen (2004). Thinking with Type. Nueva York: Princeton Architectural Press.

GARFIELD, Simon (2010). Just My Type: A Book About Fonts. Londres: Profile Books.

TIDWELL, Jennifer (2011). Designing Interfícies: Patterns for Effective Interaction Design. Sebastopol, California: O’Reilly.

KUNZ, Willi (2000). Typography: Macro and Microaesthetics. Suiza: Niggli.

WILLIAMS, Jim (2012). Type Matters!. Londres y Nueva York: Merrell Publishers.

STRIZVER, Ilene (2013). Type Rules. John Wiley & Sons Inc.

KANE, John (2002). A Type Primer. Londres: Laurence King Publishing.

Cita recomendada: RODRÍGUEZ, Diego. Cómo mejorar las experiencias de lectura en dispositivos digitales. Mosaic [en línea], enero 2025, no. 202. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n202.2409