Как-то мы нашли интересный инструмент визуализации sizecalc.com, который показывает предполагаемый размер объекта, вычисленный на основе расстояния просмотра пользователя.
Это заставило задуматься… у нас есть эмпирические правила о том, как большой текст должен отображаться на сайте для легкого чтения:
Но является ли это правило действительно верным?
Правило основано на науке о человеческом видении и анатомии?
А что можно сказать относительно экранов для ноутбуков разных размеров, настольных компьютеров и телефонов?
Итак, каков наилучший размер шрифта?
Выбор размера шрифта для сайта оказывается очень простым. 16 размер текста (или 16pt) — и все готово. Вы можете быть уверены, что ваш контент будет удобочитаемым на ПК или Mac, Netscape или IE. Благодаря гибкому дизайну ваша веб страница может быть прочитана на 4-дюймовом экране в руке или на 60-дюймовом экране в пяти метрах от дивана.
Вы не можете рассчитывать на то, что этот экран будет оставаться таким же статичным.
Он может быть расположен вертикально, как книжная страница, в один момент, а затем перевернуться в горизонтальное положение, увеличивая ваш текст, не спрашивая.
Удобно, что зрительное человеческое восприятие является предметом интенсивного научного интереса. Несколько лет назад психологи и исследователи СМИ объединились, чтобы проанализировать выводы науки о видении и типографии. Это сделано для того, чтобы узнать — как размер текста влияет на скорость чтения и понимание информации.
Высота текста на страницах сайта
Ученные обнаружили, что скорость чтения у человека является самой быстрой, когда высота текста составляет 0,3 градуса визуальной дуги.
Критический размер текста на сайте
Критический размер «x-height» текста, другими словами, минимальный размер — около 4,5 точки на 16 дюймов или около 0,2 визуальной дуги для читателей с 20/20 видением.
Для более пожилых читателей этот размер увеличивается до 0,3 (~ 6 пунктов); для людей с гораздо менее гибкими глазами он поднимается до 1,0 (~ 20 пунктов). Собственно, чтобы выяснить, как применить «x-height — 0,3 градуса» к размеру вашего веб-шрифта, есть несколько методов.
Метод 1. Визуальная дуга
Хотя мы указываем размер текста в точках — мы измеряем остроту зрения: насколько полезна ваша область зрения. Это поле зрения или визуальная дуга является фактором расстояния от объекта (и высоты объекта). Чем меньше дуга, тем труднее видеть детали.
Чтобы оценить минимальный читаемый размер шрифта, нам нужно знать: насколько далеко расположен объект и насколько велики буквы шрифта. Примените тригонометрию, и у вас будут данные для измерения.
Метод 2. Размер зависит от дизайна и типа шрифта
В зависимости от дизайна и типа шрифта, он может иметь высокие строчные буквы или низкие и короткие. Расстояние от базовой линии до верхней части нижнего регистра Х называется x-height и может сильно варьироваться от шрифта к шрифту.Что вам действительно нужно, так это — большие x-высоты, потому что они более читаемы.
Вот почему вы заметите, что большинство новых типов шрифтовых конструкций, таких как Helvetica и Segoe, имеют тенденцию к более высоким x-высотам по сравнению со старыми типами, такими как Caslon, Garamond и Goudy Old Style.
Метод 3. Точки — не пиксели
Когда вы указываете размер шрифта, вы используете точки. Точки являются физической единицей измерения. Всегда есть 72 точки на дюйм. Никогда больше или меньше. Но размер пикселя — наименьшая единица изображения, которую может создать экран — зависит от физического размера экрана и его разрешения.
Поскольку ваш типичный ПК не имеет представления о том, насколько велик его дисплей, он просто предполагает, что экран имеет 96 ppi (значение было выбрано когда-то в 90-х годах). Чтобы получить от точек к пикселям, он умножается на 11⁄3. И все же это предположение почти никогда не бывает правильным.
Метод 4. Экраны действительно не все одинаковы
Экраны, используемые нашими компьютерами, планшетами, телефонами и телевизорами, имеют не только разные размеры диаметра, но и разные размеры текстов при отображении. Тексты, которые вы видите на экранах, также пропорциональны, потому что у них разные пиксели.
100 пикселей на ноутбуке сильно отличаются от 100 пикселей на большом 60-дюймовом HDTV. Даже внутри одного класса устройств будет много изменений. При подборе шрифтов методом визуальной проекции на конкретное устройство, учитывайте разные размеры и типы экранов.
Метод 5. Экраны помогают восприятию
С большой вероятностью. Исследование с визуальной дугой, к которому мы обращались ранее, больше предназначено для изображений на бумаге, а не на экране. Шрифт на бумаге воспринимается более остро и обеспечивает хороший, но не ослепительный контраст и не излучает свет прямо в глаза.
Большинство экранов не так резки, и они являются источниками бликов в глазах.Тем не менее экран с высоким разрешением DPI или «Retina» будет предлагать гораздо лучшее изображение для глаз, чем традиционные экраны. Мы можем предположить, что результаты исследований являются точными для таких устройств, как MacBook Pro, Surface Book, Chromebook Pixel и «Retina» iPads, телефоны и планшеты.
Это может быть не так для экранов с более низким разрешением. Догадка FX Digital заключается в том, что традиционные дисплеи Mac / PC с большими пикселями требуют немного большего текста, чтобы компенсировать менее точно сформированные буквы. Мы не нашли исследований в этой конкретной области, поэтому не можем научно объяснить этот феномен при помощи точных расчетов.
Как теперь применить полученные знания?
Теперь давайте объединим все изученные факторы, чтобы определить минимальный размер шрифта для удобства чтения на вашем веб сайте:
Х-высота выбранного шрифта
Степени визуальной дуги
Виртуальные пиксели к физическим точкам
Плотность экрана в ppi.
Пример 1: Предположим, мы используем Times New Roman 16 размера. Он имеет высоту Х в 45%; Windows предполагает экран 96 ppi. Экран просматривается с 16 дюймов (типичное расстояние) на ThinkPad Carbon от Kevin. Воспринимаемая высота Х составляет 0,26. Это удобный размер.При помощи инструмента X-height от Jukka Korpela, вы можете быстро и легко воссоздать некоторые сценарии, попробовав несколько x-высот.
Пример 2: Что произойдет, если мы установим Times New Roman на 12 шрифте? Вы получаете x-высоту в 3,96 pts, которая на расстоянии 16 дюймов составляет 0,20. И это только на краю читаемости для тех, у кого зрение 20/20. Такой размер будет слишком мал для многих. Или вы можете отказаться от Times New Roman в пользу Tahoma, чьи строчные буквы более высокие и имеют большую разницу в 0,32.
Веб-дизайн прагматичен
Мы не всегда знаем, в каком окружении находятся наши посетители и какие технологии они используют. Поэтому специалисты FX Digital Agency собрали некоторые данные и поработали с некоторыми средними значениями.
Наш эксперимент
Мы бегали по нашему офису с линейкой, измеряя расстояние от экрана до нашей команды, работая на своих столах, ноутбуках и телефонах. И нашли следующие значения:
Наши глаза в среднем в 23 от экрана на наших столах, и около 14 при использовании ноутбука.
Средний рабочий стол FX Digital составляет 104 ppi, а средний ноутбук — 121 ppi.
Большинство из нас держат телефон в 15 сантиметрах от наших глаз, читая текстовые сообщения, хотя это сильно варьируется.
Вычисляем размеры шрифтов
Давайте вычислим минимальный, средний и больший размер шрифта для Times New Roman и Arial на этих различных устройствах. Наша цель — обеспечить отсутствие типа с x-высотой менее 0,2, предпочтительно 0,25 (в среднем) до 0,30 (в большей степени).
Настольные компьютеры ПК
Ноутбуки
Телефоны
Рекомендации.
Мы можем быть достаточно уверенны в том, что даже шрифт с низкой высотой Х, такой, как Times New Roman, будет доступен для чтения на большинстве устройств, если вы установите его как минимум на 14 пунктов. Но 18pt — лучший выбор, если ваш дизайн его поддерживает. Если вы используете более популярные шрифты, такие как Arial, то 12pt — это хороший минимум, а 15pt — почти идеальный.
Правило большого пальца
Хорошей новостью является то, что старое правило большого пальца в 16pt — все еще довольно хорошо работает, по крайней мере для пользователей ноутбуков, настольных компьютеров и телефонов.
Но если вы разрабатываете текст для зала заседаний, то он не должен быть меньше, чем 26pt Arial. В данном случае стандартный текст должен быть по крайней мере в 33pt.
Мы предоставили вам методы и инструменты для расчета идеального размера шрифта, который подойдет для любого пользователя на любом устройстве. В любом случае, читайте аналитику сайта, анализируйте устройства своих пользователей и подбирайте оптимальные шрифты. А если затрудняетесь — обращайтесь в Fenix Digital Technology.