Современные методы CSS для улучшения удобочитаемости

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

Какие аспекты мы должны учитывать при проектировании и разработке для чтения? Как мы можем создать доступный, удобный, инклюзивный опыт для всех читателей, в том числе для самых сложных и страдающих дислексией?

Пробелы, слова, предложения и абзацы

Единицы

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

По этой причине наиболее подходящими вариантами обычно являются em и rem, которые являются единицами измерения шрифта. Например, установка полей между абзацами с помощью em помогает сохранить вертикальный ритм при изменении размера текста. Однако это может стать проблемой, если внутри раздела шрифт с засечками чередуется со шрифтом без засечек. На самом деле, при одном и том же размере шрифты могут визуально сильно различаться. Традиционно высота символа «x» в нижнем регистре (высота x) используется для определения видимого размера символа.

Таким образом, используя правило font-size-adjust, мы можем оптически визуализировать шрифты одинакового размера, потому что это свойство будет соответствовать высоте строчных букв. К сожалению, в настоящее время это свойство доступно только в Firefox, а также в Chrome и Edge с пометкой, но его можно использовать в качестве прогрессивного улучшения с помощью проверки @support:

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

Это также помогает при замене резервного шрифта на загруженный удаленно (например, с помощью Google Fonts).

Оптимальная высота линии

Мы думаем, что типографика черно-белая. Типографика действительно белая [...] Это пространство между черными, что действительно делает ее.

- Массимо Виньелли, Helvetica, 2007 г.

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

Установка размера шрифта в зависимости от высоты x помогает оптимизировать высоту строки. Высота строки по умолчанию в браузерах равна 1,2 (безразмерное значение зависит от размера шрифта), что является оптимальным значением для Times New Roman, но не для других шрифтов. Мы также должны учитывать, что межстрочный интервал не увеличивается линейно с размером шрифта и зависит от различных факторов, таких как тип текста. Протестировав некоторые распространенные шрифты для чтения длинных форм в сочетании с размерами от 8 до 14 пунктов, мы смогли сделать вывод, что на бумаге соотношение между высотой x и оптимальным межстрочным интервалом составляет 37,6.

По сравнению с чтением на бумаге, чтение с экрана обычно требует большего расстояния между строками. Следовательно, мы должны настроить соотношение на 32 для цифровых сред. В CSS это эмпирическое значение можно перевести в следующее правило:

 p { line-height: calc(1ex / 0.32); }

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

Определить масштаб

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

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

Расстояние между буквами и словами

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

Например, в исследовании, за которым следила моя компания («Тестирование читабельности текста шрифтов, дружественных к дислексии»), были явные доказательства того, что формы глифов в шрифтах с высокой читаемостью на самом деле не помогают чтению, но более широкие интервалы между символами (отслеживание). делает. Этот вывод был подтвержден другим исследованием эффективности увеличения интервалов («Как визуальные аспекты могут иметь решающее значение в обучении чтению: интригующий случай скученности и дислексии развития»).

Эти исследования показывают, что мы должны использовать динамизм и отзывчивость веб-страниц, предлагая более эффективные инструменты, такие как элементы управления для управления интервалами. Обычный метод увеличения размера символов заключается в настройке интервала между буквами и словами с помощью свойств CSS, таких как letter-spacing и интервал между word-spacing .

Проблема в том, что letter-spacing действует безоговорочно и нарушает отслеживание шрифта, что приводит к тому, что страница отображает неоптимальные пробелы.

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

В статье Web.dev «Введение в вариативные шрифты в Интернете» более подробно рассказывается о том, что такое вариативные шрифты и как их использовать. И проверьте инструмент Variable Fonts, чтобы увидеть, как они работают.

Ширина и выравнивание

Чтобы оптимизировать поток чтения, мы также должны работать над шириной абзаца, которая представляет собой количество символов и пробелов в строке. Во время чтения наш глаз фокусируется примерно на восьми буквах в foveatio (т. е. на операции, которая активируется, когда мы смотрим на объект), и он способен обрабатывать только несколько последовательных повторений . Поэтому разрывы строк имеют решающее значение: момент перемещения внимания с конца строки на начало следующей является одной из самых сложных операций при чтении и должен быть облегчен за счет сохранения правильного количества символов для каждого типа текста. Для базового абзаца общая длина составляет от 60 до 70 символов в строке. Это значение можно легко установить с помощью модуля ch, назначив ширину абзацу:

 p { width: 60ch; max-width: 100%; }

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

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

Расстановку переносов вручную можно использовать для языков, которые не имеют встроенной поддержки. Существует несколько алгоритмов (как на стороне сервера, так и на стороне клиента), которые могут вставлять ‐ сущность внутри слов, чтобы указать браузерам, где токен может быть взломан. Этот символ был бы невидимым, если бы он не находился в конце строки, после чего он отображался бы как дефис. Чтобы активировать это поведение, нам нужно установить правило hyphens: manual CSS .

Контраст переднего плана

Контраст символов и слов с фоном имеет основополагающее значение для удобочитаемости. WCAG определила рекомендации и ограничения для различных стандартов (A, AA, AAA), регулирующих контраст между текстом и фоном. Контраст можно рассчитать с помощью различных инструментов, как для среды проектирования, так и для среды разработки. Имейте в виду, что автоматические валидаторы являются вспомогательными инструментами и не гарантируют того же качества, что и настоящий тест.

Используя переменные CSS и оператор calc , мы можем динамически вычислять цвет, обеспечивающий наилучший контраст с фоном. Таким образом, мы можем предложить пользователю различные типы контраста (сепия, светло-серый, ночной режим и т. д.), преобразуя всю тему в соответствии с цветом фона.

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } 

Кроме того, с введением и кросс-браузерной поддержкой медиа-запроса prefer-color-scheme Scheme становится еще проще управлять переключением со светлой на темную тему в соответствии с предпочтениями пользователя.

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

Идти вперед

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

Для дизайнеров

• Считайте семантическую структуру частью проекта, а не технической деталью;
• Документируйте макет и метрики шрифта, особенно почему и как ваш выбор. Они помогут разработчикам правильно реализовать дизайн;
• Максимально сократите типографские переменные (меньше семейств, стилей и вариантов).

Для разработчиков

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

Для команд

• Прочитать и понять принципы WCAG;
• Рассматривайте включение и доступность как часть проекта (а не как отдельные вопросы).

Чтение – сложный вид деятельности. Несмотря на множество ресурсов по веб-типографике и научных работ, в которых определяются области для улучшения, не существует волшебного рецепта для достижения хорошей читабельности. Количество переменных, которые необходимо учитывать, может показаться огромным, но многие из них поддаются управлению.

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

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

Связанные ресурсы

• «Проверка читаемости текста шрифтов, совместимых с дислексией», Галлиусси, Перонди, Чиа, Гербино, Бернардис (2020 г.)
• «Как визуальные аспекты могут иметь решающее значение в обучении чтению: интригующий случай скученности и дислексии развития», Гори, Факоэтти (2015)