Размер шрифта в мобильных приложениях: почему основной текст не 12px и какие размеры использовать
Основной текст на телефоне это 17 pt в iOS и 16 sp в Android. Двенадцать это подпись, а 11 это нижний предел. Ставьте поля ввода на 16 px, чтобы Safari не зумил, и давайте тексту расти. Все 11 размеров iOS внутри.
Основной текст на телефоне это не 12 px. Размер Body по умолчанию у Apple равен 17 пунктам, а у Material 16. Двенадцать это подпись, а экран, набранный подписями, это экран, на который люди щурятся. Ниже четыре правила и полный набор размеров iOS, откуда их стоит брать.
Почему 12 px постоянно всплывает
Макеты рисуют на большом мониторе, с масштабом «вписать в экран». На таком расстоянии 12 выглядит аккуратно, а 17 кричаще. Размеры выбирают по тому, как опрятно они смотрятся в кадре, а кадр это не телефон.
Потом телефон держат на вытянутой руке, на солнце, на ходу. Те же 12 px теперь мелкие, бликующие и дрожащие. Аккуратно в файле, утомительно в руке.
Решение: перестать выбирать размеры на глаз. Обе платформы публикуют типографическую шкалу, и её размеры проверяли на реальных устройствах и при реальной дистанции чтения. Берите цифры оттуда.
Правило 1: основной текст 17
Текст 12 pt
17 pt, iOS Body
На iPhone стиль Body по умолчанию это 17 pt с межстрочным интервалом 22 pt. На Android Body Large в Material это 16 sp с интервалом 24 sp. В вебе браузер по умолчанию даёт 16 px. Три платформы, три разные единицы и один ответ: основной текст живёт между 16 и 17.
Больше всего это правило нужно длинным текстам. Короткая подпись может быть мелкой и выжить. Абзац, который нужно дочитать до конца, не может. Если на экране есть абзац, он должен быть набран размером Body, а лишняя строка это цена того, что текст прочитают.
Правило 2: ничего меньше 11
Двенадцать не под запретом. У него есть имя: Caption 1. Он предназначен для мелкого шрифта под фото или метки времени, для текста, который можно и пропустить. Основной текст не такой.
Одиннадцать это нижний предел. Caption 2 в iOS это 11 pt, самый маленький текстовый стиль у Apple. Самый маленький стиль Material, Label Small, тоже 11 sp. Когда обе платформы останавливаются на одной цифре, дизайн, который опускается ниже, пишет текст, которого не написала бы ни одна из систем.
Мелкие стили годятся только для второстепенной информации: меток времени, единиц измерения, юридических строк, крошечной подписи под иконкой таба. Если по информации человеку нужно действовать, это не подпись.
Правило 3: поля ввода по 16
Поле 15 px
Поле 16 px
Это веб-правило, и оно удивляет людей, потому что в поле нет ничего подозрительного. iOS Safari увеличивает масштаб при фокусе на текстовом поле, если его шрифт меньше 16 px. При 16 px и больше этого не происходит. Увеличение само не откатывается, поэтому человеку приходится щипком возвращать масштаб, чтобы увидеть остальную форму.
Решение это одна строка CSS, и это не должно быть «отключить зум» в теге viewport. Блокировка зума отнимает инструмент у тех, кому он нужен. Лучше задайте размер шрифта для поля.
Правило 4: пусть текст растёт
Фиксированная высота
Строки переносятся
Ваши 17 это отправная точка, а не обещание. Люди увеличивают размер текста в Настройках, и iOS позволяет уйти далеко за значение по умолчанию, в размеры доступности, где Body на первом шаге достигает 28 pt, а на самом большом 53 pt. Пользователи Android делают то же самое через масштаб шрифта.
Проверяйте экраны на самых больших размерах до релиза. Ищите три вещи: текст, обрезанный многоточием, текст, налезающий на соседа, и подпись кнопки, которая перестала помещаться. Лекарство каждый раз одно. Позвольте строке переноситься, позвольте строке списка расти и перестаньте фиксировать высоты.
В вебе та же идея означает задавать размер текста в rem, а не в px, чтобы он следовал собственной настройке размера текста в браузере. WCAG требует, чтобы текст можно было увеличить до 200 процентов без потери содержимого и функций.
Все 11 размеров текста iOS
| Стиль | Размер / межстрочный (pt) | Для чего |
|---|---|---|
| Large Title | 34 / 41 | Верх главного экрана |
| Title 1 | 28 / 34 | Экраны разделов |
| Title 2 | 22 / 28 | Подразделы |
| Title 3 | 20 / 25 | Заголовки карточек и групп |
| Headline | 17 / 22 | Заголовки строк, semibold |
| Body | 17 / 22 | Абзацы и читаемый текст |
| Callout | 16 / 21 | Вспомогательный текст |
| Subhead | 15 / 20 | Второстепенные строки под заголовком |
| Footnote | 13 / 18 | Примечания и метаданные |
| Caption 1 | 12 / 16 | Мелкий шрифт |
| Caption 2 | 11 / 13 | Нижний предел |
Это размеры при стандартной настройке Large в iOS. Их всего одиннадцать не случайно: короткую шкалу легко держать в голове и легко выдерживать единообразно на всех экранах.
Аналоги на Android в Material 3: Body Large 16 / 24 и Label Small 11 / 16.
Передайте это разработчику
:root {
--text-body: 1.0625rem; /* 17 px, iOS Body */
--text-callout: 1rem;
--text-footnote: 0.8125rem;
--text-floor: 0.6875rem; /* 11 px, never lower */
}
body { font-size: var(--text-body); line-height: 1.3; }
/* 16 px or more stops iPhone Safari zooming into the field */
input, select, textarea { font-size: 1rem; }
В iOS используйте системные текстовые стили (.body, .footnote), чтобы Dynamic Type работал бесплатно. На Android задавайте текст в sp, а не в dp, чтобы он следовал настройке масштаба шрифта.
FAQ
Какой минимальный размер шрифта в мобильном приложении?
11 на обеих платформах. Caption 2 в iOS это 11 pt, а Label Small в Material 3 это 11 sp. Всё, что людям нужно прочитать, чтобы действовать, должно быть заметно крупнее.
Какого размера должен быть основной текст на iPhone?
17 pt. Это значение по умолчанию у стиля iOS Body, с межстрочным интервалом 22 pt, и оно растёт, когда человек увеличивает размер текста.
Какого размера должен быть основной текст на Android?
16 sp. Это Body Large в Material 3 с межстрочным интервалом 24 sp.
12px слишком мало для основного текста?
Для основного текста да. Это стиль iOS Caption 1, предназначенный для мелкого шрифта. Читаемый текст должен быть 16 или 17.
Почему страница увеличивается, когда я тапаю по полю ввода на iPhone?
iOS Safari увеличивает масштаб при фокусе на текстовых полях с размером шрифта меньше 16 px. Поставьте 16 px или больше, и это прекратится.
Стоит ли позволять тексту масштабироваться по системной настройке?
Да. Люди увеличивают текст в Настройках по веским причинам, поэтому делайте строки и кнопки, которые переносятся и растут, а не обрезают текст.
Источники
- Apple Human Interface Guidelines, Typography: текстовые стили iOS при размере Large по умолчанию, в пунктах. Body 17/22, Callout 16/21, Subhead 15/20, Footnote 13/18, Caption 1 12/16, Caption 2 11/13, Large Title 34/41, Title 1 28/34, Title 2 22/28, Title 3 20/25, Headline 17/22. Body это 28/34 на первом размере доступности и 53/62 на самом большом.
- Material Design 3, Typography: Body Large 16/24 sp и Label Small 11/16 sp как самый маленький стиль.
- CSS-Tricks, 16px or Larger Text Prevents iOS Form Zoom (Chris Coyier, 2021): iOS Safari увеличивает масштаб на полях ввода с 15 px и меньше, но не с 16 px и больше.
- WCAG 2, 1.4.4 Resize Text: текст можно увеличить до 200 процентов без потери содержимого и функций.
- Образцы на этой странице набраны шрифтом Inter в размерах Apple, а не собственным SF Pro от Apple. Текст в примерах карточки и строки придуман для этой страницы.
- Впервые опубликовано как карусель в UX Brainy.
Want type that stays readable on every phone and every text size setting? Our team designs and builds mobile UI with the type scale decided once.
Get Started
