Aggiurnamentu dô stili tipugràficu

(susu) Stili tipugràficu pricidenti nta OSX
(sutta)Stili tipugràficu aggiurnatu nta OSX

Stili tipugràficu pricidenti (susu) e novu (sutta), nta Ubuntu/Firefox

This document describes a 2014 update to the typography for the default 'Vector' skin for Wikimedia projects and the MediaWiki software package.

Riassuntu dê canciamenti

Pinzammu st'aggiurnamentu dâ gràfica pridifinuta di Wikipedia cu l'esiggenzi siguenti n menti:

1. Liggibbilità: li caràttiri tipugràfici hannu a èssiri liggìbbili e gradèvuli nta tutti li diminzioni. Lu caràttiri, comu elimentu, havi a aiutari a diffirinziari la ntirfaccia (comu la navigazzioni ntô situ) dô cuntinutu di l'artìculu.
2. Cuerenza: na spirienza visiva cuerenti nta desktop e device mobili.
3. Dispunibbilità: tutti li caràttiri tipugràfici c'usamu hannu a èssiri già dispunìbbili (o rinnuti dispunìbbili) nta tutti li piattaformi ntê quali sunnu prisenti pruggetti Wikimedia. Ogni silizzioni s'havi a arridùciri n manera omugènia nta qualegghiè piattaforma (Mac OS X, Windows, Linux, sistemi opirativi p'apparecchi mòbbili).
4. Accissibbilità: li cuntinuti di Wikimedia hannu a èssiri autamenti accissìbbili di tutti, cumprisi chiddi cu disabbilità.

Nta stu cuntestu, appurtammu li canciamenti siguenti:

Spicificazzioni novi di caràttiri

mpustammu li famigghi di caràttiri siguenti: li stili dê tìtuli foru spicificati nta "Linux Libertine, Georgia, Times, serif". Lu corpu dô testu (lu testu principali dê pàggini) fu nizzialmenti mpustatu n "Helvetica Neue, Helvetica, Arial, sans-serif", ma a càusa di prubblemi chê wiki c'ùsanu caràtteri nun latini, fu ripurtatu a "sans-serif" finchì nun veni attruvata na megghiu suluzzioni.

Note that these lists do not mean you will see all or any of these fonts. Rather, your browser and operating system will look for the first font in the list that you have installed (or for which they have a "matching" rule), and will present that.

Spazziatura nova e diminzioni novi pê tìtuli, lu corpu dô testu e la ntirlìnia

Cu l'attuali larghizza dô testu, li tìtuli hannu a risautari cu chiarizza, e la ntirlìnia (spazziu ntra li righi) havi a èssiri sufficienti a garantiri liggibbilità senza criari affaticamentu di l'occhi. Li tìtuli sunnu ora mpustati comu segui: H1 (tìtuli di pàggina) a 2em/1.8em, H2 (tìtuli principali di sizzioni) a 1.6/1.4em. H3 a 1.4/1.2em, H4 a 1.2/1em, H5 a 1/1em. Lu corpu dô testu aumenta a 0.875em (di 0.8em) cu ntirlìnia di 1.6em (era 1.5em) pi n'ariusità maiuri. A sicunna dô browser e dô sistema opirativu, chistu si traduci n valuri n pixel di picca diffirenti, ma lu nzemi pruduci na diminzioni liggermenti maiuri dê caràttiri dô corpu dô testu. L'autizza riga dô superscript (sup) fu purtata a 0 (zeru), p'arrisòrviri un prubblema di ntirlìnia chê nùmmiri di rinviu a nota.

Culuri novu dê caràttiri dô corpu dô testu

Esprimutu n tripletti esadicimali, lu culuri dô corpu dô testu è ora #252525 supra #FFFFFF, di #000000 supra #FFFFFF ch'era. N tèrmini menu tècnici, lu culuri è canciatu dô nìuru puru supra biancu puru, ôn griggiu scurìssimu supra biancu puru (li culura dê link e d'àutri elimenti nun sunnu canciati).

FAQ

Sèguinu arrispunnuti a arcuni addumannati chiavi supra stu canciamentu.

Chi pircipisci stu canciamentu?

Tutti l'utenti dê siti Wikimedia c'ùsanu la skin di default Vector, ncluduti littura e cuntribbutura. L'utenti ca scègghinu sò prifirenzi o n'àutru mètudu p'utilizzari n'àutra skin, comu Modern, Monobook o Cologne Blue, nun vìdinu canciamenti.

Si noti ca l'utenti ca pirsunalizzaru lu sò CSS, o c'òpiranu nta siti ca l'amministratura lucali altiraru li CSS origginari, ponnu nutari quarchi discripanza chê standard novi. Cuntrullati stu suntu e li FAQ pi virificari si un design particulari di quarchi elimentu s'havi a attribbuiri a stu canciamentu.

Quali era lu prubblema chiù urgenti cô nostru stili tipugràficu?

Lu testu è l'elimentu visivu chiù crìticu ntê pruggetti Wikimedia, sia ca si tratta di na nciclupidìa (comu Wikipedia), sia ca sa tratti dûn pruggettu chiù nicu comu WikiSource e WikiBooks. Addisìamu ca lu nostru litturi pircipisci cura, attindibbilità e chiarizza dô nostru stili, accussì comu dê cuntinuti ca sta liggennuo. Prima di st'aggiurnamentu stilìsticu, già sulu pô desktop avìamu chiù di 20 diminzioni di caràttiri diversi e difinuti arbitrariamenti, lu ca risurtava comu na ncuerenza pê nostri utenti. La diminzioni dô caràttiri era troppu nica p'arcuni prugrammi e l'autizza riga putìa rènniri la littura dô cuntinutu dûn mòdulu difficultusa. Pê tìtuli, la sò funzioni è di puntu d'accessu a pàggini di testu longhi e foru cunziguentimenti difinuti p'aiutari la liggibbilità. Circammu d'ottèniri megghiu equilibbriu e organicità pi cunzèntiri a l'utenti di lèggiri la pàggina efficacimenti o accingìrisi â littura di mòduli longhi.

Ê prubblemi funziunali dê nostri stili vecchi arrispunnemmu n primu locu cu migghiurìi ê stili pô mòbbili. Chistu ni desi manera di pruvari un caràttiri chiù granni, un leading aumintatu e li tìtuli n serif. Ora è tempu di didicàrisi â liggibbilità e accissibbilità nta tutti li lingui/pruggetti, accussì comu criari na cuerenza stilìstica ntra desktop, web mòbbili e app.

C'è un caràttiri pirfettu pê nostri esiggenzi di liggibbilità nta tutti li script? Pinzamu ch'è chistu?

No, nun c'è un caràttiri pirfettu ca pozza dari...

1. Ubbiquità: p'es., dispunibbilità nta tutti li sistemi opirativi desktop e mòbbili principali.
2. Rinnuta curretta di glifi e diacrìtici: pi cintinara di schemi nun latini, accussì comu pi na crinatura bona dê cucchi di caràttiri, accussì ca li littura nun s'hannu a sfurzari l'occhi pi lèggiri.
3. Raggiunèvuli autizza dâ X: ùtili pâ liggibbilità dô caràttiri a diminzioni minuri p'elimenti comu la navigazzioni a manu manca, didascalìi, tèrmini e cunnizzioni d'usu o nfurmazzioni sicunnari.
4. Hinting: evitari la sfucatura dê caràttiri a diminzioni minuri, spicialmenti nta Windows.

Avìamu a pigghiari na dicisioni pràttica basata nta zocchi chiù s'avvicina a sudisfari tutti st'esiggenzi, ô nternu dê nostri lìmiti. Miliuna d'utenti ogni jornu lèggini Wikipedia nta apparecchi diversi. Li caràttiri attuali cunzèntinu megghia liggibbilità e cuerenza attraversu li piattaformi, puru si nun sunnu pirfetti.

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.

Pirchì usari caràttiri serif pê tìtuli?

Pûn megghiu cuntrastu e distaccu ntra lu corpu e li tìtuli. Li tìtuli sunnu lu puntu d'accessu quannu l'utenti stannu scannennu na pàggina. Li tìtuli agghiùncinu quarchi divirsità visuali ô nostru set di caràttiri. Sia li tìtuli ca li mmàggini hannu lu rolu mpurtanti di rùmpiri la monutunìa dâ pàggina. La cumminazzioni di serif e sans-serif nun è nfriquenti e nun è n'idìa origginali.

Pirchì spicificammu Linux Libertine, Georgia e Times comu caràttiri serif?

Li tìtuli di sizzioni sunnu li punti d'accessu a l'artìculu. Un caràttiri serif furnisci diffirinziazzioni visiva e di caràttiri ô cunfruntu cô corpu dô testu, c'aiuta n'utenti a scanniri la pàggina. Li serif sunnu noltri noti boni pi cunnùciri a na lìnia tradizziunali ch'è cuerenti chê nostri obbiettivi di design.

Linux Libertine nun è assai diffusu, ma è un serif disignatu bonu e lìbbiru/apertu usatu macari pô logu di Wikipedia. Chistu lu renni elimentu ubbìquu dô linguaggiu gràficu di Wikimedia, oltri a èssiri apprupiatu pê tìtuli. Georgia è un font ottimizzatu pê browsers e li schermi. È puru dispunìbbili bonu ntâ maiuri parti dê piattaformi, cumprisi Windows, Mac OSX, e iOS. Linux Libertine e Georgia aggìscinu n bona cumplimintarità, e s'assòcianu boni cu Helvetica e Arial. Times fu spicificamenti scigghiutu pi garantiri ca l'utenti Linux pòzzanu dispòniri dûn bonu serif pridifinutu – li sistemi Linux nun nclùdinu ntâ nstallazzioni pridifinuta nè Linux Libertine, nè Georgia. Nnicannu lu Times, la maiuri parti di l'utenti Linux vìdinu un 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.

What about using webfonts?

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.

Why did we change the body text color?

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.

Pozzu rifiutari lu canciamentu e turnari ê caràttiri di prima?

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:Ekips39/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.

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.

Rifirimenti e noti

Culligamenti tècnici

Vecchiu/Novu

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• Oltri a file ntê wiki lucali comu en:MediaWiki:Vector.css e en:MediaWiki:Common.css

Talìa macari

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