Все элементы публикации рассчитываются на основе формата издания. Выбор формата - отдельная задача, которую я опишу позднее, пока же решим ее просто. Допустим, нам нужно напечатать на офисном принтере раздаточный материал к презентации. Тогда есть смысл использовать «офисную» бумагу формата А4 с полями, по умолчанию создаваемыми программой Майкрософт Верд*.

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

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

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

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

Как вы, наверное, уже догадались, не может быть слишком мелкого или слишком крупного кегля. Он слишком мелкий или слишком крупный для данной полосы набора . Что не годится для страницы А4 вполне подойдет для брошюрки формата А6.

1. Оптимальная длина строки равна 1,5–2 строкам, содержащим все строчные знаки алфавита.
2. Строка оптимальной длины должна вмещать 9–10 слов, в среднем состоящих из 5 букв каждое.
3. Минимальная длина строки равна 27 знакам, оптимальная - 40 знакам, а максимальная - 70.
4. Длина колонки в пиках должна быть максимум в три раза больше величины шрифта в пунктах.

Последний способ может показаться сложным, однако, по словам Феличи, именно этот метод расчета он предпочитает всем остальным. На практике это выглядит так. Если величина основного шрифта 10 пунктов, то максимальная длина колонки - 30 пик. Идеальное же соотношение составляет 2:1 или 2,5:1, т.е. идеальная колонка - 2–2,5 пики для набора в 10 пунктов.

Основной вывод: чем длиннее строки, тем крупнее должен быть шрифт.

Формальные правила, приведенные выше, проверены временем и отлично работают. Однако, следуя им, больше доверяйте своим глазам. Сделайте несколько распечаток с разным текстом и внимательно посмотрите на результат.

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

*Есть правила и для расчета полей, но об этом я напишу специальную заметку.

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

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

1. Выбор семейства шрифта

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

• Arial ;
• Verdana ;
• Times New Roman ;
• Georgia ;
• Trebuchet MS ;

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

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

Во-первых, появляется зависимость от других сайтов (в данном случае от Google). Например, Google по каким-то причинам может медленно работать, то в этом случае Ваш сайт также затормозится. За примерами далеко ходить не надо. Я лично подгружал скрипт для работы с библиотекой AJAX (jquery) с сайта Google, но периодически он вообще не грузился и это приводило к некорректной работе всего сайта.

Решение проблемы было простым: просто скопировал весь.js файл к себе на хостинг и подгружать его с моего же сайта. Лучше всего, когда весь сайт грузится с Вашего же хостинга. Однако перенести шрифты к себе на сайт не получится, придется всегда грузить их с сайта Google.

Во-вторых, в таких браузерах, как Opera в глазах пользователя все будет выглядеть следующим образом: он заходит к Вам на сайт, контент уже появился и примерно через полсекунды - бам и шрифт поменялся. Это произойдет, как только браузер подгрузит его с Google и обработает. Для серьезных ресурсов это "мерцание" стилей у текста неприемлемо. Конечно, такая ситуация не на всех браузерах, но лично мне и одной оперы хватает, чтобы отказаться от идеи использования мало популярных шрифтов.

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

2. Выбор размера шрифта

Выбор размера шрифта является сложной задачей, поскольку некоторым нравится более мелкий шрифт, а кому более крупный. Лично я для себя сделал предпочтение размеру 14 пикселей . Этот размер является стандартом во многих областях (например, такой размер используется при написании дипломов, курсовых по ГОСТУ). На данном сайте размер шрифта 14 и больше его делать нет необходимости и меньше тоже. Помните, что самое главное то, чтобы пользователям было удобно читать контент.

Примечание

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

3. Выбор цвета шрифта и фона под него

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

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

• Синий на белом;
  Пример - Синий на белом
• Черный на желтом;
  Пример - Черный на желтом
• Зеленый на белом;
  Пример - Зеленый на белом
• Черный на белом;
  Пример - Черный на белом
• Красный на желтом;
  Пример - Красный на желтом
• Красный на белом;
  Пример - Красный на белом
• Зеленый на красном;
  Пример - Зеленый на красном
• Оранжевый на черном;
  Пример - Оранжевый на черном
• Черный на пурпурном;
  Пример - Черный на пурпурном
• Оранжевый на белом;
  Пример - Оранжевый на белом
• Красный на зеленом;
  Пример - Красный на зеленом

4. Другие мелочи

К этим мелочам я бы хотел отнести следующее:

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

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

16 px – это оптимальный размер шрифта для веб-страниц.

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

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

Более того, 16 px – это минимальный размер шрифта для современного сайта, и если вы не поддерживаете этот формат, то лишь напрасно тратите деньги ваших клиентов. Ниже приведены аргументы в пользу актуальности именно такого размера для шрифта.

Доход сайта и привлечение читателей

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

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

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

Итак, все ваши действия должны быть направлены на то, чтобы повысить легкость чтения контента для ваших читателей.

4 факта о чтении, которые должен знать веб-дизайнер

1) После двадцати лет качество зрения у людей снижается , в сорок лет к сетчатке глаза проходит только 50% света, а к шестидесяти годам – всего 20%.

2) У 9% американцев есть проблемы со зрением , а в России эти показатели еще ниже. Многим россиянам зрение не могут полностью исправить даже контактные линзы.

3) Скорость чтения зависит от расстояния до источника: чем выше расстояние, тем разборчивее воспринимаются символы и выше понимание прочитанного. Главный фактор, определяющий оптимальное расстояние, – это именно размер шрифта. Крупные шрифты на билбордах различают практически все люди, чего не скажешь о 12-пиксельном шрифте большинства веб-сайтов.

4) Учитывайте, что большинство пользователей компьютера находятся на расстоянии 50-60 сантиметров от устройства , это позволяет не напрягать глаза слишком сильно. Но печатные источники мы воспринимаем на более близком расстоянии, ведь журнал, который мы читаем, находится на расстоянии меньшем, чем расстояние вытянутой руки, всего несколько десятков сантиметров. Основываясь на этих расчетах, видно, что шрифт в 16 пикселей на экране воспринимается как 10-пиксельный шрифт в книге.

16px текст на 24" мониторе и 12pt текст в книге

16px текст на 15,4" мониторе и 12pt текст в книге

Плохие шрифты снижают посещаемость сайта

Плохой шрифт на веб-сайте является самой распространенной проблемой пользователей (по результатам опроса за 2005 год этот пункт набрал большинство голосов). На данный момент ситуация не улучшилась – показывает выборка дизайнов SiteInspire. Средний размер шрифта для основного текста у них составляет те самые 12 пикселей, которые стали стандартом среди веб-дизайнеров, вопреки требованиям пользователей, большинство из которых жалуется на маленький размер шрифта. Из всех этих дизайнов нет ни одного (!) со шрифтом больше 14 пикселей, а у некоторых размер шрифта еще меньше – 10 px.

Популярные источники готовых дизайнов для сайта ElegantThemes и ThemeForest предлагают веб-разработчикам шаблоны, с размером шрифта не превышающим 12-13 пикселей.

Какое количество ваших читателей имеют 100% качество зрения и не страдают от чрезмерного напряжения глаз во время работы с компьютером? Неужели все ваши читатели моложе 20 и не испытывают проблем с различением миниатюрных шрифтов?

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

Не напрягайте читателя лишний раз, иначе до него не дойдет смысл прочитанного (если он даже прочитает ваш текст, а не покинет сайт сразу).

Не отпугивайте посетителей неудобными шрифтами, ведь чем больше у вас посетителей – тем выше доход принесет сайт в конечном итоге.

Не заставляйте пользователя думать!

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

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

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

16 px – это удобно

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

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

5 января 2012 в 19:05

Мнение: основной текст в 16px

• Веб-дизайн

Не так давно во всеми любимом SmashingMagazine была опубликована статья, в которой автор приводит свою теорию о 16 пикселях как размер для основного текста, и приводит доводы в её защиту. Статья вызвала довольно горячее обсуждение, и сегодня мы выкладываем её перевод.

Перевод предоставлен блогом о веб-дизайне Naikom

Для основного текста все, что меньше 16 - ужасная ошибка

Я знаю, о чем вы сейчас думаете: «Он только что сказал 16 пикселей? Для основного текста? Ужасно много! 12 пикселей идеально подходит для большинства веб-сайтов».
Я бы хотел убедить вас в обратном.

Юзабилити-эксперт Оливер Рейхенштейн (Oliver Reichenstein) в статье «The 100% Easy-2-Read Standard » сказал:
«16 пикселей - не много. Это размер текста в браузере по умолчанию. Браузеры были предназначены показывать этот размер… На первый взгляд кажется многовато, но как только вы попробуете, вы сразу поймете, почему все разработчики браузеров выбрали этот размер текста по умолчанию.»

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

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

Читатели это доход

Если вы создаете сайт для кого-то - даже для себя - скорее всего, вашей целью является заработать деньги.

Может быть, продать товар напрямую, или предложить услугу, или просто для получения кликов. В любом случае, это бизнес-актив, и в конечном итоге он должен окупить ваши инвестиции. Он должен приносить доход.
Таким образом, каждый элемент должен быть рассчитан на достижение этой цели. В том числе и текст. Особенно текст - потому что текст убеждает посетителей сделать то, что вы хотите.
Подумайте об этом. Если вы не объясните, что люди должны делать, и почему они должны это делать, то они, конечно, и не станут этого делать. И единственный способ, чтобы сказать им это - текст. А текст подразумевает прочтение.

Важные факты о чтении

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

Факт: Большинство пользователей ненавидят «обычный» размер шрифта

Позвольте мне спросить: какой процент ваших читателей составляют люди за 40? Чтобы прочитать текст, их глаза должны работать в два раза больше , чем глаза 20-летнего. Если их возраст приближается к 60, глаза должны работать в четыре раза больше.
Почти 1 из 10 ваших читателей имеют проблемы с глазами. И даже тем, у кого проблем нет, все равно придется напрягаться, чтобы прочитать текст размером меньше чем 16 пикселей , даже если они не замечают, что они делают это. (Как часто вы замечаете, что прижались к экрану?) И если им придется наклоняться, то, скорее всего, им будет неловко и неудобно. Естественная поза перед компьютером - по крайней мере, на расстоянии вытянутой руки от экрана!
Короче говоря, среднестатистического пользователя чтение напрягает.
Чем сложнее прочитать ваш текст, тем меньше смысла будет понято. 10 пикселей будут бесполезны. 12 пикселей - все равно слишком мало для большинства читателей. Даже 14 пикселей могут отпугнуть посетителей, которые бы в противном случае остались.
Таким образом, можно сделать вывод, что если вы хотите добиться максимального числа читателей, то вам необходимо установить его минимальный размер 16 пикселей.

«Но пользователи могут увеличить текст»

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

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

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

16 пикселей - это не много

Наши дизайнерские вкусы и эстетические предпочтения более гибкие, чем мы думаем. Что нам нравится - в значительной степени результат того, что мы уже видели у других дизайнеров и того, что мы ожидаем.
К сожалению, на большинстве веб-сайтов тексты крошечные, потому что когда-то экраны были крошечными, и дизайнеры еще не оставили эту привычку.
Оригинал этой статьи написан шрифтом размером 19px. Этот размер был выбран, поскольку даже 16-18 пикселей показались слишком мелкими: если устроиться поудобнее в кресле, на расстоянии 70 см от экрана, можно обнаружить, что приходится щуриться, чтобы рассмотреть текст. Если бы я использовал шрифт Georgia или Verdana, 16 пикселей, может быть, и подошли бы: эти шрифты были разработаны с большой высотой букв, и поэтому на экране выглядят больше.

Теперь взгляните на футер и проверьте, не приходится ли вам наклоняться вперед к экрану, щуриться или морщиться, чтобы рассмотреть текст. Ведь его размер 11 пикселей. Если после всего этого я вас все еще не убедил, объясните мне причины в комментариях.

Теги:

• размер шрифта
• типографика

Добавить метки

В закладки

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

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

Особенности типографики iOS и Android

До запуска iOS 9 системным шрифтом iOS был Helvetica Neue, однако после выхода новой версии его заменили на San Francisco. Шрифт предлагается в двух начертаниях: Display (для использования в UI-элементах интерфейса и для текстов с большим кеглем) и Text (для объёмного текста меньшего размера).

В подсемействе Text расстояние между буквами больше, чем в Display. Апертуры этих текстовых шрифтов тоже шире, чтобы маленький кегль был более разборчивым. Одна из особенностей San Francisco заключается в том, что это динамический шрифт: он меняет начертание в зависимости от кегля. Система автоматически переключает шрифт на Display после того, как его размер превысит 20pt.

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

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

В iOS с этой целью, как правило, используют не размер шрифта, а его насыщенность. Если у Roboto только шесть её вариаций, то у San Francisco их 15: шесть для подсемейства Text и девять - для Display.

В своем приложении можно использовать любой шрифт формата True Type (.TTF), при этом следует уделить особое внимание приобретению лицензии. Даже если шрифт бесплатный, необходимо уточнить, требуется ли плата за его коммерческое использование. Лицензия также должна соответствовать изначальному запросу: шрифт, который был куплен для веб-интерфейса, нельзя использовать в мобильном приложении или в логотипе.

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

Разборчивость

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

Source Sans Pro (слева) и Helvetica (справа)

В Helvetica почти невозможно разобрать первые три буквы, тогда как Source Sans Pro читать легко. Helvetica не подходит для работы с интерфейсами: шрифт создавался ещё в 1957 году и изначально не был предусмотрен для использования на небольших экранах. Именно поэтому Apple разработала San Francisco.

Размер шрифта и иерархия контента

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

Однако слишком крупный шрифт также неудобен. Из-за чересчур короткой строки мы вынуждаем читателя бегать глазами и тем самым сбиваем его ритм чтения. В таких условиях информацию воспринимать сложнее. Лучше использовать базовые параметры устройства, для которого создаётся дизайн. Для iOS это 17pt, для Android - 13sp.

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

Величину заголовков и подзаголовков поможет определить типографическая шкала. Классическая шкала по терминологии Роберта Брингхёрста прогрессирует следующим образом: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 и так далее. Однако можно использовать другую градацию (золотое сечение или гармонические интервалы). Расчеты удобно вести с помощью специального калькулятора на сайте modularscale.com .

Необходимо заранее определиться с иерархией контента, чтобы в соответствии с ней подбирать размеры шрифта. Если базовый шрифт - это 1 , то заголовок уровня H1 - 3em. Надписи и маленький текст будут на размер меньше базового кегля.

Пример иерархии контента в приложении «Фотострана»

Длина строки

Оптимальная для комфортного чтения длина строки - 50-60 знаков с пробелами. Такой размер подходит для десктопных приложений, однако экраны мобильных устройств меньше, поэтому для них лучше использовать строки длиной в 30-40 знаков.

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

«Воздух» в тексте

• Чем меньше размер экрана, тем больше внимания стоит уделить межбуквенному расстоянию.
• Лучше добавить в текст «воздуха» и увеличить высоту строки так, чтобы она была пропорциональна базовому размеру шрифта (обычно она соответствует 120-150% от кегля основного текста) - так можно облегчить чтение. Для этого также пригодится система интервалов, которая нужна для определения размера разных элементов текста. Если в кегле используется золотое сечение, то оно должно быть и в интервалах. Так дизайн будет выглядеть аккуратно и гармонично.
• Следует обращать внимание на пробелы между абзацами: это дополнительное пространство служит опорной точкой для глаза и создаёт ощущение, что текст не слишком плотный и его легко читать.

Расстояние между элементами в приложении «Фотостраны»

• При организации композиции экрана нужно помнить о «законе близости»: расположенные рядом объекты воспринимаются как единая группа. И наоборот: однородные элементы, между которыми есть интервал, не будут считаться одним целым.

Цветовой контраст

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

1. ​Чем сильнее контраст, тем сложнее глазам. Поэтому серый оттенок текста лучше. В итоге получается серый текст на сером или белом фоне. Однако если цвет текста и фона похожи, то восприятие затрудняется.
2. Чем сильнее контраст, тем лучше . Текст, который сильно контрастирует с фоном, также сложен для восприятия. Чтение белого текста на черном фоне быстро утомляет глаза. Даже пользователи с хорошим зрением будут испытывать дискомфорт.

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

Минимальный коэффициент контраста для шрифтовых блоков - 4,5:1, рекомендуемый - 7:1. Но из этого правила есть исключения:

• Крупный текст (18 кегль и выше или 14 кегль в полужирном начертании) - 3:1.
• Текст, который выступает частью неактивного элемента интерфейса, не требует контрастности.

Обеспечить достаточную контрастность текста поможет сервис .

Тестирование

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

Если используется два шрифта, лучше обратиться к сайту discover.typography.com : он поможет подобрать пару шрифтов, которые будут хорошо сочетаться друг с другом. Можно также создать матрицу, которая покажет, как смотрятся различные комбинации. Чтобы узнать, как шрифт влияет на конверсию, нужно применять A/В-тестирование.

Написать