Aggiornamento dello stile tipografico

(sopra) Stile tipografico precedente su OSX
(sotto)Stile tipografico aggiornato su OSX

Stile tipografico precedente (sopra) e nuovo (sotto), su Ubuntu/Firefox

Questa pagina descrive un 2014 aggiornamento tipografico riguardante la skin predefinita 'Vector' per i progetti Wikimedia e per il pacchetto software MediaWiki.

Riassunto delle modifiche

Abbiamo pensato questo aggiornamento della grafica predefinita di Wikipedia con in mente le seguenti esigenze:

1. Leggibilità: i caratteri tipografici devono essere leggibili e gradevoli in tutte le dimensioni. Il carattere, come elemento, deve aiutare a differenziare l'interfaccia (come la navigazione nel sito) dal contenuto dell'articolo.
2. Coerenza: una esperienza visiva coerente su desktop e device mobili.
3. Disponibilità: tutti i caratteri tipografici che usiamo devono essere già disponibili (o resi disponibili) su tutte le piattaforme in cui sono presenti progetti Wikimedia. Ogni selezione deve ridursi in modo omogeneo su qualsiasi piattaforma (Mac OS X, Windows, Linux, sistemi operativi per apparecchi mobili).
4. Accessibilità: i contenuti di Wikimedia devono essere altamente accessibili da tutti, compresi coloro con disabilità.

In questo contesto, abbiamo apportato le seguenti modifiche:

Nuove specificazioni di caratteri

abbiamo impostato le seguenti famiglie di caratteri: gli stili dei titoli sono stati specificati in "Linux Libertine, Georgia, Times, serif". Il corpo del testo (il testo principale delle pagine) è stato inizialmente impostato in "Helvetica Neue, Helvetica, Arial, sans-serif", ma a causa di problemi con le wiki che usano caratteri non latini, è stato riportato a "sans-serif" finché non verrà trovata una soluzione migliore.

Nota che queste indicazioni non implicano che tu riceva tutti questi caratteri. Invece, il tuo browser e il tuo sistema operativo cercheranno il primo carattere della lista fra quelli che hai installati, e mostreranno quello.

Nuova spaziatura e nuove dimensioni per i titoli, il corpo del testo e l'interlinea

Con l'attuale larghezza del testo, i titoli devono risaltare con chiarezza, e l'interlinea (spazio fra le righe) deve essere sufficiente a garantire leggibilità senza creare affaticamento degli occhi. I titoli saranno ora impostati come segue: H1 (titoli di pagina) a 2em/1.8em, H2 (titoli principali di sezione) a 1.6/1.4em. H3 a 1.4/1.2em, H4 a 1.2/1em, H5 a 1/1em. Il corpo del testo aumenta a 0.875em (da 0.8em) con interlinea di 1.6em (era 1.5em) per una maggiore ariosità. A seconda del browser e del sistema operativo, ciò si tradurrà in valori in pixel di pochissimo differenti, ma l'insieme produrrà una leggermente maggiore dimensione dei caratteri del corpo del testo. L'altezza riga del superscript (sup) è stata portata a 0 (zero), per risolvere un annoso problema di interlinea con i numeri di rinvio a nota.

Nuovo colore dei caratteri del corpo del testo

Espresso in triplette esadecimali, il colore del corpo del testo è ora #252525 su #FFFFFF, da #000000 su #FFFFFF che era. In termini meno tecnici, il colore è cambiato dal nero puro su bianco puro, a un grigio scurissimo su bianco puro (i colori dei link e di altri elementi non sono cambiati).

FAQ

Seguono risposte ad alcune domande chiave su questo cambiamento.

Chi percepirà questo cambiamento?

Tutti gli utenti dei siti Wikimedia che usano la skin di default Vector, inclusi lettori e contributori. Gli utenti che scelgono loro preferenze o un altro metodo per utilizzare un'altra skin, come Modern, Monobook o Cologne Blue, non vedranno cambiamenti.

Si noti che gli utenti che hanno personalizzato il loro CSS, o che operano su siti i cui amministratori locali hanno alterato i CSS originari, possono notare qualche discrepanza con i nuovi standard. Controllate questo sunto e le FAQ per verificare se un particolare design di qualche elemento debba attribuirsi a questo cambiamento.

Qual era il problema più urgente con il nostro stile tipografico?

Il testo è l'elemento visivo più critico nei progetti Wikimedia, sia che si tratti di una enciclopedia (come Wikipedia), sia che si tratti di un progetto più piccolo come WikiSource e WikiBooks. Desideriamo che il nostro lettore percepisca cura, attendibilità e chiarezza dal nostro stile, così come dai contenuti che sta leggendo. Prima di questo aggiornamento stilistico, già solo per il desktop avevamo più di 20 dimensioni di carattere diverse e definite arbitrariamente, il che risultava come un'incoerenza per i nostri utenti. La dimensione del carattere era troppo piccola per alcuni programmi e l'altezza riga poteva rendere la lettura del contenuto di un modulo difficoltosa. Per i titoli, la loro funzione è di punto di accesso a lunghe pagine di testo e sono stati conseguentemente definiti per aiutare la leggibilità. Abbiamo cercato di ottenere miglior equilibrio e organicità per consentire agli utenti di leggere la pagina efficacemente o accingersi alla lettura di moduli lunghi.

Ai problemi funzionali dei nostri vecchi stili abbiamo in primo luogo risposto con migliorie agli stili per il mobile. Questo ci ha dato modo di provare un carattere più grande, un leading aumentato e i titoli in serif. Ora è tempo di dedicarsi alla leggibilità e accessibilità in tutte le lingue/progetti, così come creare una coerenza stilistica fra desktop, web mobile e app.

C'è un carattere perfetto per le nostre esigenze di leggibilità in tutti gli script? Pensiamo sia questo?

No, non c'è un carattere perfetto che possa dare...

1. Ubiquità: ad es., disponibilità su tutti i principali sistemi operativi desktop e mobile.
2. Resa corretta di glifi e diacritici: per centinaia di schemi non latini, così come per una buona crenatura delle coppie di caratteri, così che i lettori non debbano sguerciarsi per leggere.
3. Ragionevole altezza della X: utile per la leggibilità del carattere a dimensioni minori per elementi come la navigazione a sinistra, didascalie, termini e condizioni d'uso o informazioni secondarie.
4. Hinting: evitare la sfocatura dei caratteri a dimensioni minori, specialmente in Windows.

Dovevamo prendere una decisione pratica basata su ciò che più si avvicina a soddisfare tutte queste esigenze, all'interno dei nostri limiti. Milioni di utenti ogni giorno leggono Wikipedia su apparecchi diversi. I caratteri attuali consentiranno migliore leggibilità e coerenza attraverso le piattaforme, anche se non sono perfetti.

Why is the type size and leading increased?

This is a small, conservative change. The previous type size was unreadable to many users. We found through user feedback that text zooming was used extensively to make the text more readable for those with even basic vision issues or impairments. Since we endeavor to make the information accessible to all users, this change felt like a basic requirement for any improvement in this area. Along with the type size the leading has also been increased to 21px leading, following typographic standards for leading i.e 120% of the type size. This helps readers who go past the introduction and read long paragraphs.

The body copy is the focus of pages on Wikimedia projects. For most language projects the text size is small and dense with our current measure. The lack of airiness lends some efficiency but creates eye fatigue with extended reading. Also, under 14px is not recommended for non-Latin scripts. Words carry superscripts and glyphs which tend to get squashed and cannot be deciphered without squinting.

Perché usare caratteri serif per i titoli?

Per un miglior contrasto e distacco fra il corpo e i titoli. I titoli sono il punto di accesso quando gli utenti stanno scandendo una pagina. I titoli aggiungono qualche diversità visuale al nostro set di caratteri. Sia i titoli che le immagini hanno l'importante ruolo di rompere la monotonia della pagina. La combinazione di serif e sans-serif non è infrequente e non è un'idea originale.

Perché abbiamo specificato Linux Libertine, Georgia e Times come caratteri serif?

I titoli di sezione sono i punti di accesso alla voce. Un carattere serif fornisce differenziazione visiva e di carattere al confronto con il corpo del testo, che aiuta un utente a scandire la pagina. I serif sono inoltre ben noti per condurre a una linea tradizionale che è coerente con i nostri obiettivi di design.

Linux Libertine non è molto diffuso, ma è un serif ben disegnato e libero/aperto usato anche per il logo di Wikipedia. Ciò lo rende elemento ubiquo del linguaggio grafico di Wikimedia, oltre ad essere appropriato per i titoli. Georgia è un font ottimizzato per i browsers e gli schermi. E' anche ben disponibile sulla maggior parte delle piattaforme, comprese Windows, Mac OSX, and iOS. Linux Libertine e Georgia agiscono in buona complementarità, e ben si associano con Helvetica e Arial. Times è specificamente stato scelto per garantire che gli utenti Linux possano disporre di un buon serif predefinito – i sistemi Linux non includono nell'installazione predefinita né Linux Libertine, né Georgia. Indicando il Times, la maggior parte degli utenti Linux vedranno un Nimbus Roman No9 L.

Fra le lingue per le quali sono stati riportati problemi con i font Georgia o Times ci sono i seguenti: Cirillico russo, ebreo, arabo, polacco, cinese, giapponese e coreano.

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.

Perché abbiamo incluso tipi di carattere a pagamento nella lista dei font?

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.

Perché non utilizzare i tipi di carattere web (web fonts)?

I web fonts sono un sistema per fornire un font agli utenti che non lo abbiano installato. Questo significa che il browser dell'utente scarica un font che offriamo, che rientra nel caricamento di risorse aggiuntive e ha quindi un effetto negativo sul rendimento del browser (ossia, la velocità di carica delle pagine). Questo è ancora più impattante per i browser più datati. Nel futuro, potremmo tentare di usare tipi di lettera web, ma per ora questo aggiornamento migliora leggibilità e consistenza senza aumentare il tempo di caricamento delle pagine.

Perché abbiamo cambiato il colore del corpo di testo?

The new values (#252525 on #FFFFFF) 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.

How did this change happen?

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.

Posso rifiutare il cambiamento e tornare ai caratteri di prima?

Sì. Agli utenti che abbiano effettuato accesso è consentito modificare il loro CSS personale (ad es., $personal-common-css o Special:MyPage/vector.css su ogni wiki) per annullare alcuni o tutti i cambiamenti. Vi si può anche definire il carattere predefinito che il vostro browser deve usare per mostrare caratteri "serif" e "sans serif", altrimenti se il vostro sistema non ha a bordo i tipi di carattere che avete specificato verranno usate le preferenze del browser.

Did we test this on a variety of browsers and operating systems?

Yes. The new font stack was tested on the following operating systems: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 and 7, Android, and Chrome OS. Size, leading, glyphs, hinting and font renders were tested on Windows, Ubuntu Linux, Mac OS X 10.8, Android, and Chrome OS.

How will non-English language projects adapt to these changes?

By default, the typography update will be applied to all projects (as part of the Vector skin). There may be languages that need to override some of these styles to accommodate particular scripts. For example, some scripts may need a taller line height or larger font size. Each wiki can override these particular styles by editing their MediaWiki:Vector.css page. We encourage other projects to audit the changes introduced by the update, and override the CSS only where necessary based on their script.

Also see the issues that we are already aware of regarding other language projects.

What about non-Latin scripts?

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.

Riferimenti e note

Collegamenti tecnici

Vecchio/Nuovo

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• Oltre a file sui wiki locali come en:MediaWiki:Vector.css e en:MediaWiki:Common.css

Vedi anche

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