Actualización tipográfica

Visualizaciones de la tipografía en OSX: arriba la anterior, abajo la actual

Visualizaciones de la tipografía en Ubuntu/Firefox: arriba la anterior, abajo la actual

Este documento describe la actualización de 2014 de la tipografía para la apariencia predeterminada «Vector» de los proyectos de Wikimedia y para el paquete del software Mediawiki.

Resumen de los cambios

Abordamos esta actualización para la tipografía predeterminada de Wikimedia con lo seguiente en mente:

1. Legibilidad: Los tipos de letra deben ser legibles y bonitos a cualquier tamaño. La tipografía es un elemento que debe ayudar a diferenciar claramente los elementos de interfaz del contenido del artículo.
2. Coherencia: Una experiencia visual coherente tanto en dispositivos de escritorio como en dispositivos móviles.
3. Disponibilidad: Todos los tipos de letra que utilizamos ya han de estar disponibles para todos los proyectos en la plataforma de Wikimedia. Cualquier opción debe aparecer con gracia y estilo en cualquier dispotivo o plataforma (Mac OS X, Windows, Linux y sistemas operativos de móviles).
4. Accesibilidad: El contenido de Wikimedia ha de ser de muy fácil acceso para cualquiera, incluidas aquellas personas que tienen alguna discapacidad.

Por lo anterior; hicimos los siguientes cambios:

Nuevas especificaciones de tipos de letra

Hemos seleccionado las siguientes familias de tipos de letra: Linux Libertine, Georgia y Times New Roman, todas ellas con remates (serif). El corpus (la totalidad de una página con texto) fue fijado inicialmente para: Helvetica Neue, Helvetica y Arial, todas ellas sin remates (sans serif). No obstante, debido a problemas con las wikis no basadas en caracteres latinos, se ha revertido a sin remates hasta que sea posible una solución a este inconveniente.

Nota que estas listas no significan que verás todas o algunas de estas fuentes. Más bien, tu navegador y sistema operativo buscarán la primera fuente en la lista que tengas instalado (o para los que tienen una regla de "coincidencia"), y la presentarán.

Nuevo espaciado y dimensionamiento de los encabezados, corpus e interlineaciones

Con el ancho de texto actual, los encabezados deben ser perfectamente visibles y las interlineaciones (el espacio blanco entre líneas) han de ser suficientes como para permitir la lectura sin causar fatiga ocular. Los encabezados han sido ajustados como sigue: H1 (título de página) pasó de 1,3 a 1,8 em, H2 (encabezado principal de sección) pasó de 1,31 a 1,4 em, H3 pasó de 1,6 a 1,17 em y H4 pasó de 1,6 a 1 em. El corpus ha sido aumentado de 0,8 em a 0,875 em. Según el navegador y el sistema operativo que usted utilice, esto será interpretado como una pequeñísima diferencia en el valor de píxeles; pero el resultado total será un tamaño de letra un poco más grande. La altura de alineación, tanto del superíndice (sup) como del subíndice (sub), se ha fijado en 1, para solucionar un problema de vieja data con los números de las referencias que afectaban el interlineado.

Nuevo color de letra en el corpus

En los tríos hexadecimales, el color del corpus ha cambiado de #000000 sobre #FFFFFF a a #252525 sobre #FFFFFF. En palabras más simples, esto quiere decir que el color del texto ha cambiado de negro puro sobre fondo blanco a texto gris oscurísimo sobre fondo blanco. Los colores de los enlaces, encabezados y otros elementos se han mantenido sin cambios.

Preguntas frecuentes

A continuación, presentamos las respuestas a algunas preguntas muy relevantes sobre este cambio.

¿Quienes verán este cambio?

Todos los usarios de MediaWiki 1.23 que usan la apariencia predeterminada Vector, incluso los lectores y editores. Esto fue diseñado teniendo en mente principalmente a los lectores Wikimedia; no obstante estos cambios, estilísticamente hablando, son mínimos. Los usuarios que hayan ajustado la apariencia desde la sección «Preferencias» o que hayan utilizado otro método para ver un tema alternativo, como Monobook o Cologne Blue, no verán cambios.

Téngase en cuenta que es probable que, aquellos usuarios que hayan personalizado su hoja de estilos en cascada (CSS) o aquellos que están registrados en un sitio en el cual los administradores locales hayan modificado por completo la hojas de estilo en casacada; noten diferencias con los nuevos valores predeterminados. Por favor, revise este resumen y la sección de preguntas frecuentes para ver si esto se debe a un particular elemento de diseño.

¿Cuál era el problema más urgente a resolver con nuestra tipografía?

El texto es el elemento en el que se fundamentan los proyectos de Wikimedia, ya sea una enciclopedia (como Wikipedia) o proyectos más pequeños como Wikisource y Wikilibros. Queremos que nuestros lectores perciban el cuidado, la legibilidad y claridad de nuestro estilo, así como también el contenido de lo que están leyendo. Antes de esta actualización tipográfica y sólo para los dispositivos de escritorio, tuvimos más de 20 tamaños definidos de manera aleatoria, los cuales resultaban incoherentes para nuestros usuarios. Los tamaños de las letras y de las interlineaciones eran muy reducidos para muchos de nuestros lectores lo que les dificultaba una lectura prolongada. Los títulos son el punto de partida de una larga página de texto, en consecuencia se estilizó para así permitir su fácil lectura. Quisimos lograr un mayor equilibro y orden para permitir a nuestros lectores tanto vistas rápidas como lecturas prolongadas.

Los problemas de funcionabilidad de nuestros estilos más antiguos, fueron abordados, en primera instancia, en mira a una mejora tipográfica para los dispositivos móviles. Lo que nos brindó la opurtunidad de probar un tamaño de letra mayor, interlineado más amplio, títulos más grandes y con remates. Seguidamente nos dedicamos a hacer frente a los problemas de legibilidad y facilidad de acceso para personas con limitaciones, en todos nuestros proyectos en cualquier idioma, también unificamos el diseño para los dipositivos de escritorio, web móvil y aplicativos.

¿Será posible que algún tipo de letra solucione todos nuestros problemas de legibilidad para cualquier alfabeto?

No, no existe tal que se ajuste perfectamente a nuestras siguientes necesidades:

1. Universalidad: esto es, la disponibilidad para sistemas operativos, dispositivos de escritorio y móviles más populares.
2. Presentación correcta de glifos y diacríticos: Para los centenares de escrituras que no utilizan caracteres latinos y para un ajustado espaciado entre caracter y caracter; con lo que nuestros usuarios no tendran que entrecerrar los ojos para poder leerlos.
3. Una altura de la x apropiada: a fin de que el tipo sea legible tanto para la barra de navegación izquierda como para elementos más pequeños como leyendas, términos de servicio o información secundaria.
4. Optimización de graficado: para evitar el efecto borroso de los caracteres más pequeños, especialmente en Windows.

Tuvimos que tomar una decisión pragmática pensando en todo lo está por venir, para así poder seguir nuestros requerimientos sin límitación alguna. Millones de usuarios leen la Wikipedia desde diferentes y variados dispositivos cada día. La actual selección de tipos de letra permitirá una lectura fácil y mejorará la consistencia entre plataformas, aunque esto no sea del todo perfecto.

¿Por qué se ha aumentado el tamaño de la letra y de la interlineación?

Este es un cambio pequeño y preventivo. El anterior tamaño de letra era ilegible para muchos usuarios. Gracias a los comentarios de estos, descubrimos que aquellos con serios impedimentos visuales se veían obligados a aumentar muchas veces el factor del zum (zoom) para lograr así que el texto fuese más legible, y que incluso esto lo hacían aquellos con problemas leves de visión. Ya que nos esforzamos para que la información esté disponible para todo tipo de usuario, creemos que este cambio era un requisito importante para desarrollar las mejoras en cuanto a la visibilidad. El tamaño de la letra y del interlineado fue aumentado a 21px, lo que cumple con las especificaciones tipográficas para el espaciado que debe ser del 120% del tamaño de la letra. Esto ayudará a los lectores que profundizan en la lectura más allá de la introducción.

El cuerpo de texto es el cimiento de las páginas en los proyectos de Wikimedia. Con los tamaños actuales el texto es de graficación pequeña y muy compacta para la mayoría los proyectos en los distintos lenguajes. La densidad permite cierta eficiencia pero causa fatiga visual en lecturas prolongadas. Además un tamaño inferior a 14px no es recomendable para alfabetos no basados en carecteres romanos. Las palabras tienden a quedar voladas y los glifos quedan chatos, y para leerlos es necesario entrecerrar los ojos.

¿Por qué se están utilizando en los encabezados letras con remates (serif)?

Combinar letras con y sin remates no es algo inusual ni es una idea original nuestra. En este caso lo hicimos para lograr un mayor contraste y diferenciación entre el cuerpo del texto y los títulos. Los títulos son lo primero que ven los usuarios al realizar una exploración rápida cuando buscan información. Tanto estos como las imágenes, desempeñan un importante papel rompiendo la monotonía visual de una página, lo que es de alta importancia si se tiene en cuenta el basto contenido de Wikimedia: artículos, páginas de discusión, textos de ayuda, políticas, etc., que son muy extensos y tienen múltiples secciones.

¿Por qué escogimos específicamente a Linux Libertine, Georgia y Times como tipos de letra con remates?

Los títulos de las secciones son el punto de entrada al artículo. Un tipo de letra con remates proporciona una diferenciación visual entre estos y el cuerpo del texto, lo que permite a los usuarios realizar exploraciones rápidas a lo largo de la página. Se sabe muy bien que los remates son utilizados desde hace mucho y se han convertido en una tradición. Seguirla fue uno de nuestros objetivos de diseño.

Linux Libertine no está muy difundida; pero está bien diseñada y es un tipo de letra con remates de uso gratuito y libre que además es utilizado en el isologotipo de Wikipedia. Es por esto que es universalmente empleada en el lenguaje visual de Wikimedia, además de ser adecuada para su uso en los encabezamientos. Georgia es un tipo de letra optimizado para navegadores y pantallas. En añadidura está disponible en la mayoría de plataformas, las que incluyen usuarios de Windows, MAC OSX y iOS. Linux Libertine y Georgia son buenos tipos de letra complementarios y van bien con Helvetica y con Arial. Times fue escogida con el propósito de asegurarnos que los usuarios de sistemas Linux tuviesen un buen tipo de letra predeterminado con remates. Toda vez que los sistemas Linux no incluyen, predeterminadamente, ni la Linux Libertine, ni la Georgia. Al seleccionar Times, la gran mayoría de usuarios de Linux verán Nimbus Roman No9 L.

Han sido reportados problemas con el tipo Georgia o el Times para la escritura de los siguientes lenguajes: Cirílico ruso, hebreo, árabe, polaco, chino, japonés y coreano.

¿Por qué especificamos nuevos tipos de letra sin remates?

Anteriormente para nuestro corpus de contenido sólo habíamos especificado «sin remates» (sans-serif), lo que le permitía al programa de nevagación usar sus «sin remates» predeterminadas. Con la excepción de Helvetica, Arial y Nimbus Sans L., los tipos de letra que la mayoría de navegadores utilizan en estas circunstancias no graficaban con propiedad los glifos, pares y las marcas diacríticas en tamaños pequeños. No hay un tipo de letra que sea gratuita y de uso libre que llene esta necesidad y que esté universalmente disponible. (ver tabla).

Hemos seleccionado Neue Helvetica para los usuarios de Mac, pues esta versión está un tanto más desarrollada que la Helvetica pues la puntuación ha sido mejorada, la altura de la x es un poco más consistente y en algunos casos tiene curvas y terminales más redondeados. En general, es una optimización de la Helvetica, aunque puede que no funcione bien para todos los alfabetos.

Definimos estos dos tipos de letra para lograr coherencia en la apariencia en el graficado entre los diferentes dispositivos y plataformas, tanto en alfabetos romanos como en aquellos que no lo son. Estas especificaciones están definidas teniendo en cuenta los intereses del usuario que pueden descargar los tipos gratuitos y abiertos que han sido probados y pueden reportar los problemas, lo cual nos permitirá abordar estas cuestiones de una manera más sistemática.

Habíamos venido experimentado con varios tipos de letra, alternativas que tenían licencia de uso libre y eran gratuitas; incluyendo: Arimo, Liberation Sans y otras. Pero en definitiva, estos tipos, o no eran muy instalados por los usuarios (lo que eliminaba el efecto) o eran pobremente graficados en aquellos caducos sistemas o en aquellos que no tenían rasterización de tipos de letra u optimización de graficado.

¿Por qué no incluimos tipos de letra pagos en la pila de tipos de letra?

La pila incluye un rango de tipos que van desde Helvetica Neue a Arial, las cuales están disponibles para la gran mayoría de plataformas. A pesar de que Arial es ampliamente usada como el tipo de letra predeterminado, necesitábamos incluirla en la pila a fin de tener un elemento predecible en esta pila tipos de letra en ausencia de los otros tipos. Para así garantizar, de la mejor manera posible, una experiencia confiable entre las diferentes plataformas. Decidimos, pues, incluir tipos de letra pagos en la pila ya que muchos sistemas operativos como Windows, MacOS e iOS, no tienen instalados predeterminadamente tipos de letra libres y gratuitos. Muchos sistemas operativos utilizan tipos como Nimbus Sans L en vez de Helvetica.

Es especialmente importante tener en cuenta que debido a la forma en la cual los parámetros de la función de hojas en cascada (CSS) que controlan la familia tipográfica, se especifique un tipo de letra en particular y que «no se cree» una fuerte dependencia del tipo de letra y que no implique la descarga este tipo. Esto significa que definimos que esto aparecen sólo si el usuario ya los tiene y así el texto de Wikimedia seguirá apareciendo, independientemente de sí es o no un tipo de letra determinado.

¿Por qué no se utilizaron los tipos de letra web (web fonts)?

Los tipos de letra web son un sistema para proporcionar un tipo de letra para los usuarios que no hayan instalado tipos. Esto significa que el navegador del usuario descarga un tipo de letra que ofrecemos, lo que resulta en la carga de recursos adicionales y tiene un efecto negativo en el rendimiento del sitio (es decir, la velocidad de carga de las páginas). Este es el caso particular de los navegadores más antiguos. En el futuro, podríamos tratar de usar tipos de letra web, pero por ahora esta actualización mejora la legibilidad y consistencia sin aumentar el tiempo de carga de las páginas.

¿Por qué se ha modificado el color del cuerpo de texto?

Los nuevos valores #252525 sobre #FFFFFF, tienen una relación de contraste de 15,3:1, la cual tiene una calificación AAA de acuerdo a la norma WCAG 2.0 1.4.6. De acuerdo a esta, no es rocomendable el contraste de negro puro para los títulos y el cuerpo del texto contra un fondo blanco puro por varias razones. Los usuarios disléxicos son sensibles a la yuxtaposición de texto negro puro en un fondo blanco puro debido a su alto contraste. Esto puede hacer que las palabras se arremolinen o se fundan. Para evitar esto, se utiliza un color casi blanco para el fondo, como un gris claro, o se disminuye el contraste entre el primer plano (texto) y el fondo. Para los usuarios sin problemas de accesibilidad, el fuerte contraste de negro puro en blanco puro también puede aumentar la tensión del ojo.

¿Cómo se llevó a cabo este cambio?

La actualización de la tipografía fue probada por primera vez durante cuatro meses y luego fue puesta en servicio para la web móvil y para todos los proyectos de Wikimedia en octubre de 2012, e incluyó las definiciones de tipos de letra con remates (serif) para titulares y sin remates (sans-serif) para el texto del cuerpo, y un aumento en el tamaño y el espacio entre líneas.

Después se añadieron estos cambios a la funcionalidad estándar como beta en noviembre de 2013. Esta característica beta luego pasó por tres iteraciones principales basadas en los comentarios de la comunidad.

¿Dónde puedo dejar mis comentarios?

Una gran parte de los cambios tipográficos fueron probados en octubre de 2012. La mayor parte del aprendizaje de esta etapa se ha incorporado en la función beta para dispositivos de escritorio, la cual fue lanzada en octubre de 2013 y ha sido objeto de tres revisiones mayores. Durante este período, la función beta ha sido utilizada por más de 14 000 usuarios en las 10 versiones más grandes de Wikipedia y más de 100 hilos de discusión se crearon sobre la funcionalidad en la página de discusión.

¿Puedo optar por cambiar a los tipos de letra predeterminados?

Sí. Es posible que los usuarios registrados en los sitios de Wikimedia personalicen su CSS individual (por ejemplo, Special:MyPage/vector.css en cada wiki) para anular algunos o todos los cambios. Usted puede copiar lo que hay en esta página User:Cathfolant/typographyrefreshoverride.css, en su CSS personal con el fin de optar por los cambios si no quiere aprender CSS. Por supuesto que también es posible, escoger cambiar por completo a otra apariencia, en sus «Preferencias» en la pestaña «Apariencia». Por último, pero no menos importante, puede definirse el tipo de letra predeterminado que su navegador utilizará para mostrar los tipos de letra con remates y sin remates, si acaso su sistema no tiene ninguno de los anteriores tipos de letra especificados, las preferencias del nevagador serán utilizadas en su lugar.

¿Lo probamos en una variedad de navegadores y sistemas operativos?

Sí. La nueva pila de tipos de letra fue probada en los siguientes sistemas operativos: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10,8-9, iOS 6 y 7, Android y Chrome OS. El tamaño, interlineado, glifos y la optimización de graficado, fueron probados en Windows, Ubuntu Linux, Mac OS X 10.8, Android y Chrome OS.

¿Cómo se adaptarán los proyectos en otras lenguas a estos cambios?

De manera predeterminada, la actualización tipográfica será aplicada a todos proyectos (como parte de la «apariencia» Vector). Puede ser que algunos idiomas necesiten omitir algunos de estos estilos para darcabida a alfabetos particulares. Por ejemplo, algunos alfabetos necesitan una altura mayor o un tamaño de tipo de letra más grande. Cada wiki pueden omitir estos estilos particulares al editar su página MediaWiki:Vector.css. Alentamos a los proyectos a auditar los cambios realizados por esta actualización y por la redefinición de la CSS sólo cuando sea necesario para el alfabeto que utilizan.

Véase también: problemas que ya hemos notado en otros alfabetos.

¿Y los alfabetos no latinos?

El anterior tamaño de letra en alfabetos no latinos estaba en 0.8em (12.8px). Esto aplasta a los glifos y a los superíndices considerablemente así como a la letra haciéndolos muy pequeños para su lectura. Los alfabetos examinados fueron: urdu, marathi, bahasa melayu, chino, coreano, y navajo. El tamaño aumentado de la letra en el corups mejorará la legibilidad para la mayoría de los alfabetos. Para el navajo, particularmente, se proporcionará una corrección ya que las parejas de caracteres no son bien graficadas con Helvetica.

El asesoramiento en el CSS puede ser proporcionado para asegurar que las versiones en diferentes idiomas redefinan los estilos de forma individual según sea necesario. Por favor, haga sus comentarios en la página de discusión si utiliza principalmente un alfabeto no latino y ha encontrado un problema importante.

¿Realizaron algunos experimentos controlados, por ejemplo: A/B o de control dividido, para medir el impacto de la la nueva tipografía?

No.

A menudo, primero publicamos las nuevas características en experimentos controlados, para medir objetivamente su desempeño y probar hipotéticamente el impacto positivo que pudieran tener. En la versión más común (una prueba A/B o una prueba dividida) seleccionamos al azar una muestra de lectores o editores, damos a una mitad la nueva versión, y a la otra mitad los dejamos sin la nueva experiencia. En este caso, los científicos de investigación de la Fundación no nos recomendaron realizar cualquier prueba A/B u otros tipos de pruebas controladas. Ya que es poco probable que los cambios menores de tipografía por sí solos, tuviesen un gran impacto en las métricas relacionadas con el tiempo promedio de lectura, el número de páginas observadas por visitante, etc.; como para que pudiesen ser medidos con precisión.

Los objetivos relacionados, como el reforzamiento de la confianza en los sitios de Wikimedia o la comprensión de la lectura; no son el tipo de datos que podemos conocer mejor de cuantitavamente hablando, pues se ven afectados en gran medida por factores cualitativos o subjetivos no relacionados como: el contenido de la página y el sujeto o qué tipo de página que está leyendo (páginas de discusión o artículos, por ejemplo), y muchos más.

¿Es posible que utilizar estos nuevos tipos de letra hagan que Wikipedia sea más lenta para mí?

No. Normalmente medimos el impacto de una nueva característica en el rendimiento del sitio, es decir, si hace que las páginas tarden más en cargarse. En este caso, no agregamos a la lista de recursos lo que un usuario tiene que descargar para ver una página, por lo que cualquier cambio en el rendimiento será insignificante.

Referencias

Enlaces técnicos

Variables de estilo de Vector en LESS

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• También archivos locales de wiki como
  • w:es:MediaWiki:Vector.css; y
  • w:es:MediaWiki:Common.css

Véase también

• https://blog.wikimedia.org/2014/03/27/typography-refresh/