Obnovení typografie

(nahoře) Stará typografie na OSX
(dole) Obnovená typografie na OSX

(nahoře) Stará a (dole) Obnovená typografie v Ubuntu/Firefoxu

Tento dokument popisuje aktualizaci typografie pro výchozí vzhled „'Vector' pro projekty Wikimedie a softwarový balíček MediaWiki z roku 2014.

Souhrn změn

K této aktualizaci výchozí typografie Wikimediae jsme přistoupili s ohledem na následující požadavky:

1. Čitelnost: Písma musí být čitelná a krásná ve všech velikostech. Písmo jako prvek musí pomáhat odlišit rozhraní (například navigaci na webu) od obsahu článku.
2. Konzistence: Konzistentní vizuální zážitek napříč stolními počítači i mobilními zařízeními.
3. Dostupnost: Všechna písma, která používáme, musí být již použitelná (nebo dostupná) na všech platformách, kde se nacházejí projekty Wikimedie. Jakýkoli výběr se musí elegantně zobrazovat napříč zařízeními a platformami (Mac OS X, Windows, Linux a mobilní operační systémy).
4. Přístupnost: Obsah Wikimedie musí být snadno přístupný všem, včetně osob s postižením.

V této souvislosti jsme provedli následující změny:

Nové specifikace písma

Nastavili jsme následující rodiny písma: Styly nadpisů byly nastaveny na "Linux Libertine, Georgia, Times, serif". Text písma (hlavní text stránek) byl původně nastaven na "Helvetica Neue, Helvetica, Arial, sans-serif", ale kvůli problémům na wiki, které nepoužívají latinku, byl vrácen na "sans-serif", dokud nebude nalezeno lepší řešení.

Upozorňujeme, že tyto seznamy neznamenají, že uvidíte všechna nebo některá z těchto písem. Váš prohlížeč a operační systém spíše vyhledá první písmo v seznamu, které máte nainstalované (nebo pro které má pravidlo "shoda“"), a zobrazí ho.

Nové rozteče a velikosti pro nadpisy, text textu a proklad

Při současné šířce textu musí být nadpisy jasně zřetelné a proklad (mezery mezi řádky) musí být dostatečný, aby umožňoval čitelnost bez únavy očí. Nadpisy budou nyní nastaveny na následující velikost: H1 (názvy stránek) budou 1,3/1,8 em, H2 (hlavní nadpisy sekcí) budou 1,3/1,4 em. H3 bude 1,6/1,17 em, H4 1,6/1 em, H5 1,6/1 em. Text textu byl zvětšen na 0,875 em (z 0,8 em). V závislosti na vašem prohlížeči a operačním systému se to projeví mírně odlišnými hodnotami pixelů, ale celkově to vede k mírně větší velikosti písma. Výška řádků horního (sup) a dolního (sub) indexu je nyní nastavena na 1, aby se vyřešil dlouhodobý problém s referenčními čísly ovlivňujícími proklad.

Nová barva písma v těle textu

V hex triplets je barva textu v těle textu nyní nastavena na #252525 na #FFFFFF, z #000000 na #FFFFFF. Méně technicky to znamená, že se barva změnila z čistě černého textu na čistě bílém pozadí na velmi tmavě šedý text na čistě bílém pozadí. (Barvy odkazů, nadpisů a dalších prvků se nezměnily.)

Časté dotazy

Následují odpovědi na některé klíčové otázky týkající se této změny.

Kdo uvidí tuto změnu?

Všichni uživatelé webů MediaWiki 1.23, kteří používají výchozí vzhled Vector, včetně čtenářů a editorů. Tento vzhled byl navržen primárně s ohledem na čtenáře Wikimedie, ale stylisticky je extrémně minimalistický. Uživatelé, kteří použijí své preference nebo jinou metodu k použití alternativního skinu, jako je Monobook nebo Cologne Blue, neuvidí žádné změny.

Upozorňujeme, že uživatelé, kteří si upravili svůj vlastní CSS nebo se nacházejí na webu, kde místní administrátoři změnili CSS celého webu, si mohou všimnout nesrovnalostí s novými výchozími nastaveními. Projděte si prosím toto shrnutí a Často kladené otázky, abyste zjistili, zda by se k této změně měl vztahovat konkrétní designový prvek.

Jaký byl vlastně problém s naší typografií?

Text je naším klíčovým vizuálním prvkem v projektech Wikimedie, ať už se jedná o encyklopedii (jako Wikipedie) nebo menší projekty jako Wikisource a Wikibooks. Chceme, aby naši uživatelé z našeho designu cítili přesnost, spolehlivost a srozumitelnost, stejně jako ze skutečného obsahu, který čtou. Před touto aktualizací typografie jsme měli jen na počítačích více než 20 libovolně definovaných velikostí písma, což se našim uživatelům zdálo nekonzistentní. Velikost písma byla pro mnoho čtenářů příliš malá a výška řádku mohla ztěžovat čtení dlouhého obsahu. Nadpisy by měly sloužit jako vstupní body na dlouhých stránkách textu a byly odpovídajícím způsobem stylizovány, aby se usnadnila čitelnost. Snažili jsme se dosáhnout lepší vyváženosti a soudržnosti, aby uživatelé mohli stránku efektivně procházet nebo se zapojit do čtení dlouhých textů.

Funkční problémy s našimi staršími styly byly nejprve řešeny vylepšením mobilní typografie. To nám dalo možnost otestovat větší velikost písma, větší proklad a patkové nadpisy. Nyní je čas řešit čitelnost a přístupnost ve všech jazycích/projektech a také vytvořit konzistenci designového jazyka napříč desktopy, mobilním webem a aplikacemi.

Existuje dokonalé písmo, které splňuje naše požadavky na čitelnost ve všech typech písma? Myslíme si, že je to ono?

Ne, neexistuje žádné dokonalé písmo, které by to ztělesňovalo…

1. Všudypřítomnost: Tj. dostupnost na všech populárních operačních systémech pro stolní počítače a mobilní zařízení.
2. Správné vykreslování glyfů a diakritiky: Pro stovky písma jiných než latinka, a také dobré vyrovnání párů znaků, takže uživatelé nemusí mhouřit oči, aby znaky přečetli.
3. Přijatelná výška x: Aby byl text čitelný i v malých velikostech pro věci, jako je levá navigace, popisky, podmínky služby nebo sekundární informace.
4. Tip: vyhněte se rozmazání znaků u malých velikostí, zejména ve Windows.

Musíme učinit praktické rozhodnutí na základě toho, co se v rámci našich omezení blíží splnění všech těchto požadavků. Miliony uživatelů čtou Wikipedii denně na různých zařízeních. Současný výběr písem přinese lepší čitelnost a konzistenci napříč platformami, i když nebude dokonalý.

Proč je zvětšená velikost písma a proklad?

Jedná se o malou, konzervativní změnu. Předchozí velikost písma byla pro mnoho uživatelů nečitelná. Z uživatelské zpětné vazby jsme zjistili, že zoomování textu bylo hojně používáno, aby byl text čitelnější i pro osoby se základními zrakovými problémy nebo postiženími. Protože se snažíme zpřístupnit informace všem uživatelům, tato změna se jevila jako základní požadavek pro jakékoli zlepšení v této oblasti. Spolu s velikostí písma byl zvětšen i proklad na 21 pixelů, což odpovídá typografickým standardům pro proklad, tj. 120 % velikosti písma. To pomáhá čtenářům, kteří přečtou dlouhé odstavce a přečtou si je za úvod.

Hlavní text je středem zájmu stránek na projektech Wikimedie. U většiny jazykových projektů je velikost textu podle našich současných rozměrů malá a hustá. Nedostatek vzdušnosti sice zvyšuje efektivitu, ale při delším čtení způsobuje únavu očí. Velikost pod 14 pixelů se také nedoporučuje pro písma, která nepoužívají latinku. Slova obsahují horní indexy a piktogramy, které mají tendenci se mačkat a nelze je rozluštit bez mhouření očí.

Proč používáme pro nadpisy patkové fonty?

Kombinování patkových a bezpatkových písma není neobvyklý ani originální nápad. V tomto případě to děláme proto, abychom zajistili lepší kontrast a rozlišení mezi textem a nadpisy. Nadpisy fungují jako vstupní body, když uživatelé procházejí stránku a hledají informace. Nadpisy i obrázky hrají důležitou roli při narušování vizuální monotónnosti stránky, což je zásadní vzhledem k tomu, že velká část obsahu Wikimedie (stránky s obsahem, diskusní stránky, text nápovědy, zásady atd.) je poměrně dlouhá a má mnoho sekcí.

Proč jste jako patkové fonty zvolili Linux Libertine, Georgia a Times?

Názvy sekcí jsou vstupními body do článku. Patkové písmo poskytuje vizuální odlišení a charakter ve srovnání s textem textu, což uživateli pomáhá procházet stránku. Patkové písmo je také dobře známé tím, že vyjadřuje tradiční chování, které je v souladu s našimi designovými cíli.

Linux Libertine není široce dostupné, ale je to dobře navržené a bezplatné/otevřené patkové písmo, které se používá také v logo Wikipedie. Díky tomu je všudypřítomnou součástí designového jazyka Wikimedie a je vhodné pro použití v nadpisech. Georgia je písmo optimalizované pro prohlížeče a obrazovky. Je také široce dostupné na našich nejoblíbenějších platformách, včetně uživatelů Windows, Mac OSX a iOS. Linux Libertine a Georgia fungují jako dobrá doplňková písma a dobře se kombinují s Helvetica a Arial. Times je nastaven speciálně tak, aby se zajistilo, že uživatelé na systémech Linux mají ve výchozím nastavení dobré patkové písmo – systémy Linux ve výchozím nastavení neobsahují Linux Libertine ani Georgia. Nastavením Times většina uživatelů Linuxu uvidí Nimbus Roman No9 L.

Mezi jazyky a písma, u kterých byly hlášeny problémy s Georgií nebo Times, patří ruština/cyrilice, hebrejština, arabština, polština, čínština, japonština a korejština.

Proč jsme specifikovali nová bezpatková písma?

Předchozí stav obsahu našeho těla byl takový, že byl zadán pouze text "sans-serif", takže prohlížeč musel použít svůj výchozí sans-serif. S výjimkou Helvetica, Arial a Nimbus Sans L fonty, které většina prohlížečů v tomto případě používá, nezohledňují správné vykreslování glyfů, párů a diakritických znamének v malých velikostech. Neexistuje žádný bezplatný/otevřený font, který by tuto potřebu splňoval a byl by všudypřítomný (viz tabulka).

Pro uživatele Macu uvádíme Neue Helvetica, protože se jedná o mírně vyvinutější verzi Helvetici, kde byla vylepšena interpunkce, výška x je mírně konzistentnější a v některých případech má zaoblenější misky a pulty. Celkově se jedná o optimalizaci Helvetici, i když nemusí být ve všech písmech tak ideální.

Fonty specifikujeme jednak proto, abychom dosáhli konzistence napříč zařízeními a platformami a jednak abychom zaručili vhodnou čitelnost a vykreslování v malých velikostech pro latinské i nelatinské písmo. Po zavedení specifikací si uživatelé, kteří mají zájem, mohou stáhnout testovaná bezplatná/otevřená písma nebo nám nahlásit problémy v záložních případech, což nám umožní řešit problémy systematičtěji.

V minulosti jsme experimentovali s několika alternativními fonty, které byly volně licencovány, včetně: Arimo, Liberation Sans a dalších. Tyto fonty si uživatelé buď běžně neinstalují (nevytvářejí žádný efekt), nebo se špatně vykreslují na starších systémech nebo na systémech bez vyhlazování fontů/hintování.

Proč jsme do zásobníku písem zahrnuli i nesvobodné fonty?

Zásobník specifikoval řadu písem od Helvetica Neue po Arial, které jsou dostupné na všech hlavních platformách. Přestože se Arial široce používá jako výchozí, musíme ho specifikovat tak, aby degradace CSS byla předvídatelná. Abychom zajistili co nejlepší spolehlivý zážitek pro uživatele napříč platformami, rozhodli jsme se do zásobníku zahrnout i nesvobodná písma, protože mnoho operačních systémů (například Windows, MacOS a iOS) nemá ve výchozím nastavení nainstalována žádná písma FOSS. Mnoho operačních systémů zároveň používá písmo FOSS (například Nimbus Sans L) místo "Helvetica".

Je obzvláště důležité si uvědomit, že vzhledem k fungování nastavení rodin písem v CSS, zadání konkrétního písma nevytváří pevnou závislost na tomto písmu ani nezpůsobuje, aby si uživatel toto písmo stáhl. To znamená, že písma, která zadáme, se zobrazí pouze tehdy, pokud je uživatel již má, a text Wikimediae se bude zobrazovat i nadále bez ohledu na to, zda konkrétní písmo máte či nikoli.

A co používání webových fontů?

Webfonty je systém, který umožňuje uživatelům, kteří jej nemají nainstalovaný, stáhnout si námi poskytnuté písmo z prohlížeče uživatele. To způsobí načítání dalších zdrojů a bude mít negativní dopad na výkon webu (tj. rychlost načítání stránek). To platí zejména pro starší prohlížeče. V budoucnu se můžeme pokusit o použití webových fontů, ale prozatím tato aktualizace poskytuje lepší čitelnost a konzistenci, aniž by zkrátila dobu načítání stránek.

Proč jsme změnili barvu textu?

Nové hodnoty (#252525 z #FFFFFF) mají kontrastní poměr 15,.3:1, což je hodnocení AAA podle WCAG 2.0 1.4.6. Čistě černá barva pro text i popisky se nedoporučuje v porovnání s bílou z několika důvodů. Dyslektici jsou citliví na kontrast čistě černého textu na čistě bílém pozadí kvůli jeho vysokému kontrastu. To může způsobit, že se slova budou vířit nebo rozmazávat. Abyste tomu předešli, použijte pro pozadí mírně téměř bílou barvu, například světle šedou, nebo snižte kontrast mezi popředím (textem) a pozadím. U uživatelů bez problémů s přístupností může ostrý kontrast čistě černé na čistě bílé také zvýšit namáhání očí.

Jak k této změně došlo?

Tato aktualizace typografie byla nejprve testována čtyři měsíce a poté byla v říjnu 2012 vydána na mobilním webu pro všechny projekty Wikimedie. Patřily mezi ně deklarace fontů pro patkové nadpisy a bezpatkové texty, stejně jako zvětšení velikosti písma a prokladu pro text a popisky.

Tyto změny byly později, od listopadu 2013, zavedeny do desktopové verze jako beta verze. Tato beta funkce poté prošla třemi hlavními iteracemi na základě zpětné vazby od komunity.

Jak jsme získali zpětnou vazbu?

Mnoho změn typografie bylo poprvé testováno na mobilních zařízeních v říjnu 2012, velká část získaných poznatků byla integrována do beta verze funkce typografie pro počítače, která byla spuštěna v říjnu 2013 a prošla třemi hlavními vydáními. Během této doby beta verzi používalo přes 14 000 uživatelů napříč 10 nejčastějšími Wikipediemi a na diskusní stránce této funkce bylo vytvořeno více než 100 diskusních vláken.

Mohu se odhlásit ze změn výchozích písem?

Ano. Přihlášení uživatelé stránek Wikimedie si mohou přizpůsobit svůj osobní CSS (tj. Special:MyPage/vector.css na každé wiki) a přepsat tak některé nebo všechny změny. Pokud se nechcete učit CSS, abyste se odhlásili ze změn, můžete do svého osobního CSS zkopírovat User:Ekips39/typographyrefreshoverride.css. Samozřejmě se také můžete rozhodnout zcela přepnout na jiný vzhled v Nastavení na kartě Vzhled. V neposlední řadě si můžete definovat výchozí písmo, které váš prohlížeč používá k zobrazení písem "serif" a "sans-serif". Pokud váš systém žádné z těchto zadaných písem nemá, použije se místo toho tato předvolba prohlížeče.

Testovali jsme to v různých prohlížečích a operačních systémech?

Ano. Nový soubor písem byl testován na následujících operačních systémech: Windows XP, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 a 7, Android a Chrome OS. Velikost, proklad, glyfy, hinting a vykreslování písem byly testovány na systémech Windows, Ubuntu Linux, Mac OS X 10.8, Android a Chrome OS.

Jak se těmto změnám přizpůsobí projekty v jiných jazycích než v angličtině?

Ve výchozím nastavení bude aktualizace typografie aplikována na všechny projekty (jako součást vzhledu Vector). Mohou existovat jazyky, které budou muset některé z těchto stylů přepsat, aby vyhovovaly konkrétním skriptům. Například některé skripty mohou vyžadovat vyšší výšku řádku nebo větší velikost písma. Každá wiki může tyto konkrétní styly přepsat úpravou své stránky MediaWiki:Vector.css. Doporučujeme ostatním projektům, aby provedly audit změn zavedených aktualizací a přepsaly CSS pouze tam, kde je to nutné na základě jejich skriptu.

Viz také problémy, o kterých již víme ohledně jiných jazykových projektů.

A co písma, která nejsou latinkou?

Stará velikost písma v písmech jiných než latinka byla 0,8em (12,8px). To výrazně zmáčkne glyfy a horní indexy a písmo bude příliš malé na čtení. Mezi testovaná písma patřila urdština, maráthština, malajština, čínština, korejština a navažština. Zvětšení velikosti textu v těle písma zlepší čitelnost většiny písem. Konkrétně pro navažštinu bude použito přepsání, protože dvojice znaků se v Helvetice vykreslují podivně.

Pro zajištění toho, aby jazyky provedly přepsání dle potřeby případ od případu, lze poskytnout inline pokyny CSS. Pokud používáte primárně jiné písmo než latinku a narazíte na závažné problémy, napište prosím komentář na diskusní stránce.

Provedli jste nějaké kontrolované experimenty, např. A/B testy nebo split testy, abyste změřili dopad nové typografie?

Ne.

Nové funkce často nejprve spouštíme v kontrolovaných experimentech, abychom objektivně změřili jejich výkon a otestovali hypotézy o jejich možném pozitivním dopadu. V nejběžnější verzi (A/B nebo split test) náhodně vybereme vzorek čtenářů nebo editorů, polovině dáme novou verzi a druhé polovině žádnou novou verzi. V tomto případě vědci z Nadace doporučili neprovádět žádné A/B testy ani jiné kontrolované experimenty. Je nepravděpodobné, že by drobné změny typografie samy o sobě měly velký dopad na metriky související se čtením, jako je doba strávená na webu, počet zobrazení stránek na návštěvníka atd., které by mohly být měřeny s jistotou.

Související cíle, jako je zvýšená důvěra ve stránky Wikimedie nebo porozumění čtenému textu, nepatří mezi data, která můžeme nejlépe zjistit kvantitativně, ani na ně nemají velký vliv nesouvisející faktory, jako je obsah a předmět stránky, typ čtené stránky (například diskuse versus články) a další.

Může používání těchto nových písem způsobit pomalejší Wikipedii?

Ne. Obvykle měříme dopad nové funkce na výkon webu, tedy zda způsobuje delší dobu načítání stránek. V tomto případě nepřidáváme do seznamu zdrojů, které si uživatel musí stáhnout pro zobrazení stránky, takže jakákoli změna výkonu bude zanedbatelná.

Poznámky pod čarou

Odkazy na kód

Proměnné vektorového stylu v LESS

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• Plus místní wiki soubory jako w:MediaWiki:Vector.css a w:MediaWiki:Common.css

Související odkazy

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