Обновлённая типографика

(сверху) Старая типографика на OSX
(снизу) Обновлённая типографика на OSX

(сверху) Старая и (снизу) обновлённая типографика на Ubuntu/Firefox

Этот документ описывает произведённое в 2014 году обновление типографской разметки для скина по умолчанию, Vector, для проектов Викимедиа и программного обеспечения MediaWiki.

Общие сведения об изменениях

Мы приближали это обновление типографической разметки Викимедиа по умолчанию, учитывая следующие требования:

1. Читаемость: Шрифты должны быть читабельными и красивыми при любых размерах. Кроме того, они должны помогать отделять содержимое статьи от элементов интерфейса (таких, как навигация по сайту).
2. Согласованность: Единство стиля для мобильной и полной версий.
3. Доступность шрифтов: Все шрифты, которые мы используем, должны быть доступны (или сделаны доступными) на всех платформах, на которых присутствуют проекты Викимедиа. Любой выбранный шрифт должен иметь возможность беспроблемного перехода на резервный вариант на всех платформах и устройствах (Mac OS X, Windows, Linux и мобильные операционные системы).
4. Доступность данных: Содержимое сайтов Викимедиа должно быть легко доступно для всех, включая людей с ограниченными возможностями.

С учётом этого контекста мы внесли следующие изменения:

Новые спецификации шрифтов

Мы задали следующие семейства шрифтов: стили заголовков заданы на "Linux Libertine, Georgia, Times, serif". Основной текст страниц был изначально задан как "Helvetica Neue, Helvetica, Arial, sans-serif", но ввиду проблем на вики с нелатинскими символами проведён откат до "sans-serif", пока не найдётся решение лучше.

Обратите внимание, что эти списки не означают, что вы увидите все или какие-либо из этих шрифтов. Ваши браузер и ОС произведут поиск первого установленного (или имеющего «совпадающее» правило) шрифта и станут использовать его.

Новые значения размеров для заголовков, текста и межстрочных интервалов

С текущей шириной текста заголовкам нужно выделяться, а межстрочные интервалы должны быть достаточными, чтобы обеспечивать читаемость с минимальным напряжением глаз. Заголовки будут заданы на следующие значения: H1 (названия страниц) будут 1.3/1.8em, H2 (заголовки основных разделов) будут 1.3/1.4em, H3 будут 1.6/1.17em H4 — 1.6/1em, H5 — 1.6/1em. Размер шрифта основного текста увеличен до 0.875em (ранее 0.8em) В зависимости от вашего браузера и операционной системы, пиксельные значения могут стать немного различны, но размер шрифта основного текста будет в общем случае увеличен. Высоты строк надстрочного и подстрочного текста теперь заданы как 1, чтобы исправить давно существующую проблему с тем, что номера примечаний влияют на межстрочные интервалы.

Новый цвет шрифта основного текста

В шестнадцатеричных значениях цвет текста теперь #252525 на #FFFFFF, ранее #000000 на #FFFFFF. Если говорить менее техническими терминами, это означает, что цвет изменился с чисто чёрного и чисто белого фона на очень тёмный серый и чистый белый фон. (Цвета ссылок, заголовков и других элементов не изменились.)

ЧЗВ

Ниже приведены ответы на некоторые ключевые вопросы об этих изменениях.

Кто увидит эти изменения?

Все пользователи сайтов на MediaWiki 1.23, использующие скин по умолчанию Vector, включая читателей и редакторов. Разработка велась с учётом в основном читателей проектов Викимедиа, но стилистические отличия минимальны. Участники, использующие другой скин, например Monobook или Cologne Blue, через настройки или другой способ, не увидят никаких изменений.

Обратите внимание, что участники, которые или используют изменённый личный CSS, или используют сайт, на котором местными администраторами изменён CSS всего сайта, могут заметить несоответствия с новыми значениями по умолчанию. Просмотрите это описание и список часто задаваемых вопросов, чтобы посмотреть, относится ли данный элемент дизайна к этому изменению.

Какие вообще проблемы были у нашей типографической разметки?

Текст — наш главный зрительный элемент во всех проектах Викимедиа, будь то энциклопедия (как Википедия) или проект поменьше, как Викитека или Викиучебник. Мы хотим, чтобы при восприятии нашего дизайна, как и самого содержимого, пользователи чувствовали точность, надёжность и ясности. До обновления типографических параметров у нас только на десктопах было более 20 произвольным образом определённых размеров шрифтов, что наши пользователи воспринимали как несогласованность. Размер также был слишком маленьким для большинства читателей, а высота строки могла сделать чтение длинных фрагментов содержимого сложным. Заголовки должны служить точками входа в длинных страницах, и им для улучшения читаемости был присвоен новый стиль. Мы направили свои усилия на улучшения баланса и слаженности, чтобы пользователи могли эффективно пройтись глазами по странице или читать большие куски текста.

Функциональные проблемы с нашими предыдущими стилями впервые были решены через совершенствование нашей мобильной типографии. Это дало нам шанс испытать больший размер шрифта, межстрочные интервалы и заголовки с засечками. Теперь настало время рассмотреть читаемость и доступность для всех языков/проектов, а также добиться согласованности в языке дизайна среди десктопов, мобильных веб-программ и приложений.

Существует ли идеальный шрифт, который соответствует нашим потребностям в читаемости для всех систем письменности? Думаем ли мы, что это он?

Нет, не существует ни одного совершенного шрифта, объединяющего...

1. Повсеместность: то есть доступность на всех популярных настольных и мобильных операционных системах.
2. Правильное отображение глифов и диакритических знаков: для сотен нелатинских алфавитов, а также хороший кернинг пар символов, чтобы пользователям не приходилось щуриться, чтобы читать символы.
3. Улучшенное значение x-height: чтобы текст был чёток при небольших размерах, то есть задействованы такие вещи, как навигация слева, подписи изображений, условия использования или вторичная информация.
4. Хинтинг: избегание размытости символов при небольших размерах, особенно на Windows.

Мы должны принять практическое решение, основанное на том, что близко к выполнению всех этих требований, в рамках наших ограничений. Миллионы пользователей читают Википедию на разных устройствах каждый день. Нынешние выборы шрифтов улучшат читаемость и единообразие платформ, даже если эти характеристики не совершенны.

Почему размер шрифта и межстрочные интервалы предлагается увеличить?

Это небольшое, консервативное изменение. Прежний размер шрифта был нечитаем для многих пользователей. Мы нашли через обратную связь с пользователями, что масштабирование текста широко используется, чтобы сделать текст более удобочитаемым для тех, кто страдает даже от небольших проблем со зрением. Так как мы прилагаем все усилия, чтобы сделать информацию доступной для всех пользователей, это изменение было сочтено основным требованием для улучшения ситуации в этой области. Вместе с размером шрифта межстрочные интервалы были также увеличены до 21px, в соответствии с типографскими стандартами для межстрочных интервалов: 120% от размера шрифта. Это помогает читателям, которые переходят ниже вступления и читают длинные абзацы.

Текст является основным типом данных страниц на проектах Викимедиа. Для большинства языковых проектов размер шрифта маленький и плотный по нашим нынешним меркам. Отсутствие воздушности придает некоторую эффективность, но создаёт усталость глаз при продолжительном чтении. Кроме того, шрифт менее 14px не рекомендуется для нелатинских алфавитов. Слова несут надстрочные знаки и глифы, которые часто сжимаются и не могут быть расшифрованы без прищуривания.

Почему мы используем шрифты с засечками для заголовков?

Сочетая шрифты с засечками и без засечек — это не необычная или оригинальная идея. Мы так делаем в этом случае, чтобы обеспечить лучшую контрастность и различие между телом и заголовками. Заголовки выполняют роль точек входа, когда пользователи читают страницы, выискивая информацию. Как заголовки, так и изображения играют важную роль в разрушении визуального однообразия страницы, что имеет исключительно важное значение, учитывая, что большая часть предоставляемой Викимедиа информации (статьи, обсуждения, страницы, текст справки, политика ресурса и т. д.) имеют большой объём и много разделов.

Почему мы указали шрифты с засечками как Linux Libertine, Georgia и Times?

Названия разделов являются точками входа в статью. Шрифт с засечками обеспечивает визуальную дифференциацию и характер по сравнению с текстом тела, что позволяет пользователю бегло просматривать страницу. Засечки, как известно, также передают традиционное поведение, что согласуется с нашими целями дизайна.

Linux Libertine не имеет широкого распространения, но является хорошо продуманным и свободным/открытым шрифтом с засечками, который используется также в логотипе Википедии. Это делает его универсальной частью языка дизайна Викимедиа, а также пригодным для использования в заголовках. Georgia — это шрифт, оптимизированный под браузеры и экраны. Он тоже широко представлен на наших самых популярных платформах, в том числе для пользователей Windows, Mac OSX и iOS. Linux Libertine и Georgia выступают в качестве взаимодополняющих шрифтов, а также хорошо подходят для комбинирования с Helvetica и Arial. Times устанавливается специально для того, чтобы пользователи систем Linux могли видеть хороший шрифт с засечками по умолчанию: системы Linux не содержат по умолчанию ни Linux Libertine, ни Georgia. Установив Times, большинство пользователей Linux будут видеть Nimbus Roman No9 L.

Языки и письменности, для которых были сообщения о проблемах с Georgia или Times включают русский/кириллицу, иврит, арабский, польский, китайский, японский и корейский.

Почему мы указали новые шрифты без засечек?

В предыдущем состоянии содержимого нашего тела было указано только "sans-serif", оставив браузерам задачу использования его шрифта по умолчанию без засечек. За исключением Helvetica, Arial и Nimbus Sans L, шрифты, что большинство браузеров используют при таких условиях, не решают проблему неправильного рендеринга глифов, пар и диакритических знаков при малых размерах. Нет бесплатных и открытых шрифтов, которые решают эту проблему и повсеместно доступны (см. таблицу).

Мы указываем Neue Helvetica для пользователей Mac, так как это чуть более развитая версия Гельветики, где знаки препинания улучшены, x-height чуть более постоянна, и в некоторых случаях она имеет более округлые углубления и просветы. В целом, этот шрифт — оптимизация Helvetica, хотя он не может быть идеальным во всех письменностях.

Мы указываем шрифты как для обеспечения согласованности между устройствами и платформами, так и для гарантии соответствующей читаемости и отображения символов при небольших размерах как для латинских, так и нелатинских систем письменности. С техническими условиями на месте, пользователи, которые заинтересованы, могут скачать бесплатные/открытые шрифты, которые были протестированы, или сообщить о проблемах с запасными вариантами, что позволит нам решать проблемы на более систематической основе.

В прошлом, мы поэкспериментировали с несколькими альтернативными шрифтами, которые распространялись под свободной лицензией, в том числе: Arimo, Liberation Sans и другие. Но эти шрифты нечасто установлены пользователями (эффекта нет) или они плохо отображаются на старых системах или системах без сглаживания шрифтов/хинтинга.

Почему мы включили несвободные шрифты в список шрифтов?

В списке (стеке) указаны несколько шрифтов от Helvetica Neue до Arial, которые доступны на всех основных платформах. Хотя Arial широко используется как значение по умолчанию, нужно указать это, чтобы переход на запасные варианты в CSS был предсказуемым. Для наилучшего возможного обеспечения стабильности опыта для пользователей на разных платформах мы решили включить несвободные шрифты в стек, так как во многих операционных системах (таких как Windows, MacOS и iOS) нет никаких FOSS-шрифтов по умолчанию. Между тем, многие операционные системы будет использовать FOSS-шрифт (например, Nimbus Sans L) вместо Helvetica.

Особенно важно отметить, что из-за особенностей того, как работает CSS font-family, указание конкретного шрифта "не создаёт" жёсткую привязку к шрифту, и не заставляет пользователя загружать этот шрифт. Это означает, что шрифты, которые мы указываем, только тогда появляются, если пользователь уже установил их, и текст Викимедиа будет появляться независимо от того, есть у вас конкретный шрифт или нет.

А что по поводу веб-шрифтов?

Webfonts — это система для доставки шрифтов пользователям, которые не установили эти шрифты. Это предполагает то, что браузер пользователя скачает предлагаемый нами шрифт, что вызывает загрузку дополнительных ресурсов и окажет негативное влияние на производительность сайта (т. е. как быстро загружаются страницы). Это особенно актуально для старых браузеров. В будущем мы сможем исследовать сайты с помощью webfonts, но пока это обновление обеспечивает большую читаемость и единообразие, не увеличивая время загрузки страниц.

Почему мы изменили цвет текста тела?

Новые значения (#252525 на #FFFFFF) имеют коэффициент контрастности 15.3:1, что оценивается как ААА согласно WCAG 2.0 1.4.6. Чисто чёрный как для основного текста и подписей к изображениям не рекомендуется указывать на белом фоне по нескольким причинам. Пользователи, больные дислексией, чувствительны к противопоставлению чисто чёрного текста на чисто белом фоне ввиду высокой контрастности этой комбинации. Это может вызвать кручение или замыление слов. Чтобы избежать этого, используйте немного не совсем белого цвета для фона, например светло-серого, или уменьшите контраст между цветом переднего плана (текста) и фоном. Для пользователей без проблем доступности, сильный контраст чисто чёрного цвета с чисто белым может также увеличить нагрузку на глаза.

Как были введены эти изменения?

Это обновление типографических настроек было впервые протестировано в течение четырех месяцев, а затем выпустили на мобильных платформах для всех проектов Викимедиа в октябре 2012 года. Обновление затрагивало стек шрифтов для заголовков с засечками и основного текста без засечек, а также увеличение размера шрифта и межстрочных интервалов в основном тексте и подписях к изображениям.

Эти изменения впоследствии были перевезены на десктопы в качестве бета-функции, начиная с ноября 2013 года. Эта бета-функция прошла через три основных версии на основе отзывов со стороны сообщества. Затем эта бета-версия функции прошла три основных итерации на основе отзывов сообщества.

Как мы получали отзывы?

Многие изменения типографии впервые были испытаны в мобильном режиме в октябре 2012 года, значительная часть полученных данных была интегрирована в бета-функцию типографии для десктопов, которая была запущена в октябре 2013 года и прошла через три крупных релиза. За это время бета-функция была использована более 14 000 пользователей среди 10 самых крупных разделов Википедии, и более 100 тем обсуждения было создано на странице обсуждения бета-функции.

Могу ли я отказаться от изменений в шрифтах по умолчанию?

Да. Зарегистрированные пользователи сайтов Викимедиа могут настроить свой личный CSS (т. е. Special:MyPage/vector.css на каждой вики), чтобы отменить некоторые или все из этих изменений. Вы можете скопировать User:Ekips39/typographyrefreshoverride.css в свой персональный CSS, если вы не хотите изучать CSS, чтобы отказаться от изменений. Вы также можете, конечно, переключиться совсем на другой скин (в настройках на вкладке Внешний вид). И, наконец, вы можете определить шрифт по умолчанию, который ваш браузер будет использовать для отображения шрифтов “с засечками” и “без засечек”; если ваша система не имеет каких-либо из указанных глобально шрифтов, это предпочтение браузера будет использоваться вместо глобального.

Протестировали ли мы всё это на разных браузерах и операционных системах?

Да. Новый стек шрифтов был протестирован на следующих операционных системах: Windows ХР, Windows 7, Windows 8, Ubuntu Linux, Mac OS X 10.8-9, iOS 6 и 7, Android и Chrome OS. Размер, направляющие, глифы, хинтинг и рендеры шрифта был протестирован на Windows, Ubuntu Linux, Mac OS X 10.8, Android и Chrome OS.

Как неанглоязычным проектам приспособиться к этим изменениям?

По умолчанию обновление типографических настроек будут применено ко всем проектам (в рамках скина Vector). Могут быть языки, для которых нужно переопределить некоторые из этих стилей, чтобы приспособиться под конкретные системы письменности. Например, в некоторых письменностях может потребоваться увеличить высоту строки или размер шрифта. Каждая вики может переопределить эти конкретные стили, изменив свою страниц MediaWiki:Vector.css. Мы призываем другие проекты провести ревизию изменений, вносимых обновлением, и переопределить CSS только там, где необходимо, основываясь на своей письменности.

См. также уже известные нам проблемы с другими языковыми проектами.

А что про нелатинские алфавиты?

Раньше размер шрифта в нелатинских письменностях был 0.8em (12.8px). Это сильно расплющивало глифы и надстрочные индексы, и шрифт делался слишком малым и нечитаемым. Рассмотренные письменности были урду, хинди, малайская, китайская, корейская, и навахо. Кегль основного текста был увеличен для улучшения читаемости в большинстве случаев. Специально для навахо будет предоставлено переопределение, потому что пары символов отображаются странно со шрифтом Helvetica.

Руководство по встроенному CSS может быть предоставлено, чтобы гарантировать, что языки создают переопределения на индивидуальной основе по мере необходимости. Пожалуйста, оставьте комментарий на странице обсуждения, если вы в первую очередь используете нелатинский алфавит и сталкиваетесь со значительными проблемами.

А вы производили какие-либо эксперименты в контролируемых условиях, например, A/B или сплит-тесты, чтобы измерить влияние новых типографических установок?

Нет.

Мы часто запускаем новые особенности сначала в контролируемых экспериментах, чтобы объективно оценивать качество их работы и проверять гипотезы о положительном влиянии, которое они могли бы иметь. В наиболее распространенной версии (А/Б или сплит-тест) мы делаем случайную выборку читателей или редакторов, даём половине новую версию, а половине не даём никакого нового опыта. В этом случае учёные советовали не производить А/Б тесты или другие контролируемые эксперименты. Маловероятно, что одни только мелкие изменения типографики сильно повлияют на такие сопутствующие чтению показатели, как время пребывания на сайте, количество просмотров страниц на одного посетителя и т. д., которые могут быть измерены с уверенностью.

Связанные цели, например увеличение доверия к сайтам Викимедиа или понимания в чтении, не тот вид данных, о котором мы можем узнать больше всего на количественной основе, или который также в значительной степени подвержен влиянию разнородных факторов, таких как содержание и тема страницы, какого типа читаемая страница (обсуждение против статьи, например), и многие другие.

Будет ли Википедия дольше загружаться из-за использования новых шрифтов?

Нет. Мы обычно измеряем удар по производительности от новой функции, то есть увеличивает ли она время загрузки страницы. В данном случае мы не расширяем список ресурсов, которые пользователь должен скачать, чтобы просмотреть страницу, поэтому изменения в производительности если и будут, то незначительные.

Примечания

Ссылки на код

Переменные стиля Vector в LESS

• (mediawiki/core.git) / skins / vector / variables.less
• (mediawiki/core.git) / skins / vector / components / common.less
• А также местные файлы на вики, такие как en:MediaWiki:Vector.css и en:MediaWiki:Common.css

См. также

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