Типографика экрана чтения в приложении: шрифт, поля и прогресс

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

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

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

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

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

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

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

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

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

Проверяйте узкое окно и крупный кегль: он меняет переносы и увеличивает высоту главы. Не уменьшайте текст, если заголовок перекрыл строку — позвольте блокам расти, а тексту переливаться. Для веб-версии полезно свериться с критерием Reflow в пояснении W3C; в нативном приложении проверьте системное увеличение текста.

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

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

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

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

Прогресс чтения отвечает на два разных вопроса: где я нахожусь и сколько осталось. Для первого подходит номер главы или раздела; для второго — оставшееся время, доля главы либо положение ползунка. Показывать всё сразу необязательно. Выберите один основной сигнал и один резервный: например, «Глава 4» рядом с тонкой полосой, а точную позицию открывать в оглавлении.

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

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

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

Пользователь может изменить размер текста в настройках устройства, и приложение должно учитывать его предпочтение. Apple описывает Dynamic Type как системную функцию настройки видимого текста и отдельно рекомендует проверять поведение пользовательских шрифтов и макета на крупных размерах. В Android единица `sp` учитывает пользовательский масштаб текста. Эти возможности не следует заменять собственным фиксированным кеглем без причины: иначе человек выбирает крупный шрифт в системе, но не получает ожидаемого результата в книге.

Используя собственную гарнитуру, сохраните возможность увеличения текста и проверьте, как при этом меняются заголовки, подписи и элементы чтения. Убедитесь, что контейнеры растут вместе со строками, а ограничения по высоте не обрезают последнюю строку или диакритические знаки. Если приложение предоставляет внутреннюю настройку, не создавайте конкурирующие ползунки без ясной логики. Можно показывать «как в системе» и дополнительную настройку чтения, однако приложение должно явно сообщать, какое значение сейчас действует.

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

Для проверки включите максимальный системный размер и пройдите весь сценарий: открыть главу, изменить масштаб, перейти к сноске, вернуться назад, свернуть приложение и продолжить чтение. Apple предлагает тестировать большие настройки доступности и адаптацию макета; Android описывает font size и locale среди конфигураций, которые могут меняться при работающем приложении. Поэтому проверьте изменение масштаба без принудительного перезапуска, если ваша архитектура это поддерживает.

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

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

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

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

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

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

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

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

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

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

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

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

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