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 nuestro elemento visual essensial de los proyectos de Wikimedia, aunque sea una encyclopedia (como Wikipedia) o un proyecto más pequeño como Wikisource y Wikibooks. Queremos que nuestros usarios sientan precisión, reliabilidad, y claridad en nuestro diseño, como el contenido que leen. Antes de esta actualización de la tipografía, tuvimos más que 20 tamaños de letra arbitrariamente decidios solamente en ordenadoras sobremesa, que aparecen inconsistentemente para nuestros usarios. El tamaño de letra fue demasiado pequeño para muchos lectores, y la altura de linea dificultó la lectura de contenido largo. Para títulos, deben actuar como puntos de entrada en páginas largas de texto y se estializan para ayudar la legibilidad. Buscamos lograr un balance mejor y cohesión para usarios que ojean la página o leen articulos largos.

Se abordó los problemas operativos de nuestros estilos vijeos por mejoras de nuestro tipografía móvil. Esto nos dio la oportunidad de probar un tamaño de letra más grande, de aumentar el primer renglón, y títulos de fuentes serif. Ahora, es el momento de abordar la legibilidad y la accesibilidad de todos idiomas/proyectos, y también de crear consistencia del lenguaje de diseño incluso en los sobremesas, moviles y apps.

¿Hay una fuente perfecta que caje todas nuestras necesidades de legibilidad de todas las escritura? ¿Pensamos que es este?
No, no hay una sola fuente perfecta que represente... Tenemos que tomar una decisión práctica a partir de lo que encaja bien con estes requisitos, dentro de nuestras limitaciones. Mil millones de usarios leen Wikipedia en aparatos diferentes cada día. Las selecciones correntes de fuentes mejorarán la legibilidad y consistancia entre platformas, aunque no sean perfectos.
 * 1) Ubiquidad: esto es availabilidad en todos sistemas operativos de sobremesas y móviles.
 * 2) Representación correcta de glifos y diacríticos: para cientos de escrituras no latinas, además para buen «kerning» de parejas de letras, para que usarios no tengan que bizquear para leer la letra.
 * 3) Tamaño-x respectable: para que el texto es legible a los tamaños pequeños para cosas como navigación de la izquierda, leyendas, terminos de servicio o información secundaria.
 * 4) «Hinting»: para evitar la letra borrosa en tamaños pequeños, particularmente en Windows.

¿Por qué se ha aumentado el tamaño del texto y del primer renglón?
Esto es un cambio pequeño y conservativo. El tamaño del texto previo era ilegible por muchos usarios. Encontramos por comentario de usarios que se usa «zooming» del texto extensivamente para mejorar la legibilidad aún para los que tienen problemas o discapacidades básicos de visión, puesto que eforzamos en hacer la información accesible a todos los usarios, este cambio nos parece un requisito basico para cualquier mejora. Junto con el tamaño de letra, se ha aumentado el primer renglón a 21px de primer renglón, según estandares tipográficos de primer renglón esto es 120% del tamaño de letra. Esto ayuda a los lectores que pasan la introducción y leen párafos largos.

El cuerpo del texto es el enfoque de las páginas en proyectos Wikimedia. Para la mayoría de proyectos de lenguaje el tamaño de letra es pequeño y denso con nuestro metodo corriente. La falta de lo amplio ayuda con la eficacia pero crea fatigo de los ojos con lectura extendida. Además, no se recomienda menos de 14px para escrituras no latinas. Palabras llevan superíndeces y glifos que se tende aplastar y no se puede descifrarlas sin bizquear.

¿Por qué se están utilizando tipos con remates (serif) en los encabezados?
Combining serif and sans-serif is not an unusual or original idea. We do so in this case to provide better contrast and distinction between body and headings. Headings act as entry points when users are scanning a page, looking for information. Both headings and images play an important role in breaking up the visual monotony of the page, which is of critical importance considering that much of Wikimedia content (content pages, discussion pages, help text, policies, etc.) are quite lengthy and have many sections.

Why did we specify Linux Libertine, Georgia, and Times as the serif fonts?
Section titles are entry points into the article. A serif font provides visual differentiation and character compared to the body copy, which helps a user scan the page. Serif are also well-known for conveying a traditional demeanor that is in keeping with our design goals.

Linux Libertine is not widely available, but is a well-designed and free/open serif font that is also used in the Wikipedia logo. This makes it a ubiquitous part of the Wikimedia design language, as well as being appropriate for use in headings. Georgia is a font optimized for browsers and screens. It is also widely available on our most popular platforms, including for users of Windows, Mac OSX, and iOS. Linux Libertine and Georgia act as good complementary fonts, and pair well with Helvetica and Arial. Times is set specifically to ensure that users on Linux systems have a good serif by default – Linux systems do not by default include Linux Libertine, nor Georgia. By setting Times, most Linux users will see Nimbus Roman No9 L.

Languages and scripts for which problems have been reported with Georgia or Times include Russian/Cyrillic, Hebrew, Arab, Polish, Chinese, Japanese and Korean.

Why did we specify new sans-serif fonts?
The previous state of our body content is that only "sans-serif" was specified, leaving it up to the browser to use its default sans-serif. With the exception of Helvetica, Arial and Nimbus Sans L, the fonts that most browsers use in this condition do not account for proper rendering of glyphs, pairs, and diacritical marks at small sizes. There is no free/open font that addresses this need and is ubiquitously available (see table).

We specify Neue Helvetica for Mac users, as it is a slightly more developed version of Helvetica where punctuation has been improved, the x-height is slightly more consistent, and in some cases it has more rounded bowls and counters. Overall it is an optimization of Helvetica, though it may not be as ideal in all scripts.

We specify fonts both to achieve consistency across devices and platforms and to guarantee appropriate readability and rendering at small sizes for Latin and non-Latin scripts alike. With the specifications in place, users who are interested can download the free/open fonts that have been tested or report issues to us for the fallback cases, which will allow us to address issues in a more systematic manner.

In the past, we experimented with several alternative fonts that were freely-licensed, including: Arimo, Liberation Sans, and others. Ultimately these fonts are either not commonly installed by users (creating no effect) or they render poorly on older systems or those without font smoothing/hinting.

Why did we include non-free fonts in the font stack?
The stack specified a range of fonts from Helvetica Neue to Arial that are available across all major platforms. Even though Arial is widely used as a default, we need to specify it so that the CSS degradation is predictable. To ensure a reliable experience to users across platforms as best as we can, we decided to include non-free fonts in the stack since many operating systems (such as Windows, MacOS, and iOS) do not have any FOSS fonts installed by default. Meanwhile many operating systems will use a FOSS font (such as Nimbus Sans L) in place of "Helvetica".

It is particularly important to note that, because of the way CSS font-family settings work, specifying a particular font does not create a hard dependency on that font, nor does it cause the user to download that font. This means that fonts we specify only appear if the user has them already, and Wikimedia text will continue to appear regardless of whether you have a particular font or not.

¿No se podían emplear tipos de letra web (web fonts)?
Webfonts is a system to deliver a font to users who do not have it installed. This involves having a user's browser download a font we provide, which causes additional resources to load and would have a negative impact on site performance (i.e. how fast pages load). This is particularly true for older browsers. In the future we may explore using webfonts, but for now this update provides greater readability and consistency while not degrading page load times.

¿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

 * Old/Current:
 * 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/