ПРИНЦИПЫ ОПТИМИЗАЦИИ ТИПОГРАФИКИ В ВЕБ-ДИЗАЙНЕ

OPTIMIZATION PRINCIPLES OF TYPOGRAPHY IN WEB DESIGN

Darya Romanchuk

student, Department of Management, Belarusian State University of Informatics and Radioelectronics,

Belarus, Minsk

АННОТАЦИЯ

Рассматривается принципы оптимизации типографики, способные повысить восприятие пользователем контекста веб-страниц.

ABSTRACT

The article talks about the principles of typography optimization that can increase the user's perception of the context of web pages.

Ключевые слова: типографика; веб-дизайн; психология восприятия.

Keywords: typography; web design; psychology of perception.

Около 95% встречаемой в пространстве интернет информации представлено в текстовом формате. Так использование основных принципов типографики позволяет сделать чтение легким для пользователей, а плохая наоборот отпугивает их. Поэтому, в случае оптимизации пользовательского интерфейса, необходимо начинать именно с типографики[1, с. 14].

В качестве её первого принципа можно назвать минимальное количество используемых шрифтов.

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

В случае, если необходимо использовать более одного шрифта, следует обратить внимание на соседние семейства шрифтов, то есть те, которые будут дополнять друг друга в зависимости от ширины символа[2, с. 34-46].

В качестве второго хорошего правила следует постараться использовать стандартные встроенные шрифты.

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

Однако у такого подхода существует проблема в том, что нестандартные шрифты могут отвлекать пользователей от самого главного: восприятия информации. Так как на подсознательном уровне им необходимо затрачивать дополнительное время на размышление о шрифтах, которые использовали дизайнеры, а не на восприятие самого текста. Поэтому, если нет настоятельной потребности в использовании дизайнерских шрифтов, лучше придерживаться системных. [3, с. 45-49].

Также одним из самых важных принципов влияющих на восприятие пользователем контента является символьное ограничение читаемой зоны. Это означает, что правильно подобранное количество символов в каждой строке повышает удобочитаемость текста. Поэтому ширина строки должна определяться не дизайном, а удобностью пользователя. [4, с. 98].

Если текстовая строка короткая(меньше 60 символов), то глазу приходится постоянно возвращаться назад. В случае, когда строка текста наоборот слишком длинная(около 90 символов), возникает трудность концентрации на самом тексте. Для мобильных устройств существуют несколько другие рамки правильной текстовой длинны строки: 30–40 символов[5, с. 198-204].

К хорошей практике также относиться использование шрифтов с явно отличающимися символами. Это касается схожих символов, например «i» и «l». Поэтому выбранных шрифт необходимо протестировать на нескольких вариациях текста, чтобы убедиться, не вызовет ли он проблем с пониманием у ваших пользователей[6, с. 141-142].

Однако стоит избегать использования символов исключительно в верхнем регистре, а также мигающего текста из-за значительного замедления  скорости восприятия и усвоения информации[7, с. 82-85].

Кроме того важно обратить внимание на межстрочный интервал(интерлиньяж). Так при его увеличении, как правило, происходит улучшение восприятия информации. Наилучшим соотношением считается 130% от высоты используемых символов[8, с. 643].

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

Так, согласно исследованию W3C, наилучшим соотношением между контрастностью  основного текста и текста изображения является:

для небольшого текста - контраст не менее 4,5: 1 по сравнению с фоном.

для крупного текста (14 пт полужирным 18 пт и больше) -коэффициент контрастности не менее 3:1 по отношению к его фону[9, с. 131].

Стоит избегать использования окрашивания текста зеленый и красный цвета, так как дальтонизм является достаточно часто встречающимся заболеванием(8% населения страдают им), поэтому, кроме использования цвета для выделения важной информации, стоит обратить внимание и на использование других, выделяющих знаков(к примеру «*») [10, с. 156-157].

Использование основных принципов типографики способно помочь пользователю сконцентрироваться именного на предоставляемом контексте.

Список литературы:

1. Latin M.. Better Web Typography for a Better Web // Ref. Libr. 2020. P.14.
2. I. Typography Essentials Revised and Updated: 100 Design Principles for Working with Type // Ref. Libr. 2019. P.34-46.
3. Rutter R. Web Typography  // Ref. Libr. 2017. P.45-49.
4. Jason S.M. On Web Typography// Ref. Libr. 2014. P.98.
5. Coles S., Spiekermann E. The Anatomy of Type: A Graphic Guide to 100 Typefaces  // Ref. Libr. 2012. P.198-204.
6. Bringhurst R. The Elements of Typographic Style// Ref. Libr. 2013. P.141-142.
7. S. Why Fonts Matter // Ref. Libr. 2016. P.82-85.
8. Cees W.de Jong, Alston W.P. Type. A Visual History of Typefaces & Graphic Styles // Ref. Libr. 2017. P.643.
9. Lupton E. Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students // Ref. Libr. 2014. P.131.
10. Craig J., Scala I.K. Designing with Type // Ref. Libr. 2006. P.156-157.