Typography refresh/es

Este documento describe una actualización reciente de la tipografía para el tema predeterminado «Vector» de los proyectos de Wikimedia y para el paquete de programas.

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

Por lo anterior; hicimos los siguientes cambios:
 * 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.


 * 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.


 * Tenga en cuenta que esto no implica que usted podrá ver los tipos de letra anteriormente mencionados. Es muy probable que tanto su sistema operativo como su navegador busque el primer tipo listado que usted tenga instalado y ese será el que usted verá.


 * Nuevo espaciado y dimensionamiento de los encabezados, corpus e interlineaciones: Con el ancho de texto acutal, 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) será de 1,3/1,8em, H2 (encabezado principal de sección) será de 1,31/1,4em, H3 será de 1,6/1,17em, H4 1,6/1em. El corpus ha sido aumentado de 0,8em á 0,875em. 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  a   y de   a  . En palabras más simples, esto quiere decir que el color del texto a cambiado de negro puro sobre fondo blanco a texto gris oscurísimo sobre fondo blanco. Los colores de los enlaces, encabezados y otros elementos están 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. Quicimos 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: 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.
 * 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.
 * Optimización de graficado: para evitar el efecto borroso de los caracteres más pequeños, especialmente en Windows.

¿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?
The new values ( on  ) have a contrast ratio of 15.3:1, which is an AAA rating according to WCAG 2.0 1.4.6. Pure black for both body copy and captions is not recommended against white for several reasons. Dyslexic users are sensitive to the juxtaposition of pure black text on a pure white background due to its high contrast. This can cause the words to swirl or blur together. To avoid this, use a slightly off-white color for your background, like a light gray, or decrease the contrast between foreground (text) and background. For users without accessibility issues, the harsh contrast of pure black on pure white can increase eye strain as well.

¿Cómo es que todo esto ocurrió?
This typography update was first tested for four months, and then released on mobile web for all Wikimedia projects in October 2012. These included font stack declarations for serif headings and sans serif body copy, as well as increased type size and leading for body copy and captions.

These changes were later brought into desktop as a beta feature, starting in November 2013. This beta feature then went through three major iterations based on community feedback.

How did we get feedback?
Many of the typography changes were first tested on mobile in October 2012, much of the learning was integrated into the typography beta feature for desktop which was launched October 2013 and went through three major releases. During that time the beta feature was used by over 14,000 users across the top 10 Wikipedias, and more than 100 discussion threads were created on the feature's Talk page.

Can I opt out of changes to the default fonts?
Yes. It is possible for logged-in users of Wikimedia sites to customize their personal CSS (i.e. Special:MyPage/vector.css on each wiki) to override some or all of the changes. You can copy User:Cathfolant/typographyrefreshoverride.css into your personal CSS if you don't want to learn CSS in order to opt out of the changes. You may also of course choose to switch to another skin entirely, in your Preferences under the Appearance tab. Last but not least, you can define the default font your browser uses to display “serif” and “sans-serif” fonts, if your system does not have any of these specified fonts this browser preference will be used instead.

¿Lo probamos en una variedad de navegadores y sistemas operativos?
Sí. Se probó el nuevo «font stack» en los siguentes sistemas operativos: Windows XP, Windows 7, y Windows 8, Ubuntu Linux, Mac OSX 10.8, iOS 6 y 7, Android, y Chrome OS. Se prureban el tamaño, el primer ringlón, los glifos, el «hinting», y las representaciones de fuentes en Windows, Ubuntu Linux, Mac OS 10.8, Android, y ChromeOS.

¿Cómo se adaptarán los proyectos en otras lenguas a estos cambios?
Por defecto, la actualización de la tipografía pondrá en accion a todos proyectos (como parte del «skin» Vector). Puede ser idiomas que necesiten omitir algunos de estos estilos para acomodar escrituras particulares. Por ejemplo, algunas escrituras necesitan una altura más alta o un tamaño de fuente más grande. Cada wiki pueden omitir estes estilos particulares por editar su página MediaWiki:Vector.css. Animamos los otros proyectos a auditar los cambios introducidos por la actualización, y a omitir el CSS solamente donde está necesario a partir de sus escrituras.

También, vea los problemas de que ya nos hemos dado cuenta sobre nuestros otros proyectos de lenguaje.

¿Y las escrituras no latinas?
The old type size in non-Latin scripts was 0.8em (12.8px). This squashes glyphs and superscripts significantly along with the type being too small to read. Scripts examined were Urdu, Marathi, Bahasa Melayu, Chinese, Korean, and Navajo. The body copy type size increase will improve readability for most scripts. Specifically for Navajo, an override will be provided because character pairs render strangely in Helvetica.

Inline CSS guidance can be provided to ensure that languages make overrides on a case-by-case basis as needed. Please comment on the Talk page if you primarily use a non-Latin script and encounter significant problems.

Did you run any controlled experiments e.g. A/B or split tests to measure impact of the new typography?
No.

We often first launch new features in controlled experiments, to objectively measure their performance and test hypotheses about positive impact they might have. In the most common version (an A/B or split test) we randomly select a sample of readers or editors, give half the new version, and give half no new experience. In this case, Foundation research scientists advised against running any A/B tests or other controlled experiments. It is unlikely that minor typography changes alone would make a large impact on reading-related metrics like time on site, number of page views per visitor etc., which could be measured with confidence.

Related goals, like enhanced trust in Wikimedia sites or comprehension in reading, are not the kind of data we can best learn about on a quantitative basis, or which are also largely impacted by unrelated factors like the page content and subject, what type of page is being read (Talk versus articles, for example), and more.

Can using these new fonts cause Wikipedia to be slower for me?
No. We typically measure the site performance impact of a new feature, meaning whether it makes pages take longer to load. In this case, we are not adding to the list of resources that a user must download to view a page, so any change in performance will be negligible.

Enlaces al código

 * Variables de estilo de Vector en LESS:
 * También archivos locales de wiki como en:MediaWiki:Vector.css y en:MediaWiki:Common.css
 * También archivos locales de wiki como en:MediaWiki:Vector.css y en:MediaWiki:Common.css
 * También archivos locales de wiki como en:MediaWiki:Vector.css y en:MediaWiki:Common.css

Véase también

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