Типографика для постов в соцсетях: практическое руководство

Используйте один чистый гротеск, заголовок от 72 до 110 px на холсте 1080 px, вспомогательный текст 40 до 48 px и ничего мельче примерно 32 px. Эти числа: наша рекомендация, построенная на минимуме Apple в 11 pt для текста в iOS и на том, как изображение 1080 px масштабируется под экран телефона.

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

Насколько велик 1080 px на телефоне?

У iPhone 16 дисплей 2556 на 1179 пикселей. Пост шириной 1080 px, занимающий всю ширину экрана, показывается примерно с тем же числом пикселей, что и ширина экрана, так что один пиксель холста можно считать примерно одним пикселем устройства. Однако рекомендации Apple написаны в пунктах, а не в пикселях. Разделив ширину 1179 px на 3 (наше рабочее допущение для дисплея 3x), получаем экран шириной около 393 pt. Коротко: 1 pt = 3 px устройства, поэтому 1 px холста примерно равен 1 px устройства, а 2,75 px холста примерно равны 1 pt.

Пересчёт, который мы используем: 1080 / 393 = около 2,75 px холста на пункт. Это работает, когда пост занимает экран от края до края. Ленты добавляют отступы, а некоторые поверхности показывают изображение меньше, поэтому считайте 2,75 лучшим случаем и добавляйте запас.

Значение Apple iOS	Пункты	Px холста при ширине 1080 (x 2,75)
Минимальный размер текста	11	около 30
Caption 1	12	около 33
Footnote	13	около 36
Default body	17	около 47
Title 2	22	около 61
Large Title	34	около 94

Все значения в пунктах взяты из текстовых стилей iOS от Apple; колонка с пикселями: наша собственная арифметика. Собственные советы по дизайну Apple тоже называют 11 pt наименьшим читаемым размером текста.

Какие размеры шрифта работают в посте 1080 px?

Вот шкала, которую мы рекомендуем для холстов шириной 1080 px. Это наша рекомендация, а не правило платформы. Ни одна социальная сеть не публикует минимальный размер шрифта для изображений.

Роль	Размер при 1080 px	Примерно на телефоне	Начертание	Интерлиньяж
Заголовок	72 до 110 px (минимум 72)	26 до 40 pt	700 до 800	1.0 до 1.15
Подзаголовок	48 до 60 px	17 до 22 pt	600	1.2
Вспомогательный текст	40 до 48 px	15 до 17,5 pt	400 до 500	1.3 до 1.5
Надзаголовок или ярлык (капс)	32 до 36 px	12 до 13 pt	600, с разрядкой	1.2
Мелкий текст (никогда не существенный)	минимум 32 px	12 pt	500	1.3

За таблицей стоят три правила. Всё, что читатель должен понять, остаётся на 40 px и выше. Всё ниже 32 px: украшение, юридический текст или ник. Держите заголовок минимум в 1,5 раза крупнее вспомогательного текста: 72 px против 48 px: самая тесная пара в нашей таблице, а при 110 px против 40 px разрыв достигает примерно 2,75 раза, так что иерархия выдерживает беглый взгляд. О компоновке вокруг этих размеров читайте в нашем материале о принципах вёрстки. Арифметика за порогами 40 и 32 px и то, как они меняются на холстах 1200 и 1500 px, разобрана в нашем гиде по минимальному размеру шрифта для графики в соцсетях.

Какие шрифты легче всего читаются в мелком размере?

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

Наши рекомендации:

• Один рабочий гротеск с щедрой высотой строчных (высотой строчных букв) и открытыми формами знаков. Подходят Inter, Roboto и системные гротески.
• Не больше трёх начертаний: обычное для текста, полужирное для ярлыков, жирное для заголовков.
• Избегайте светлых начертаний. Рекомендации Apple говорят, что Ultralight, Thin и Light трудно читать в мелком размере.
• Приберегите антикву или акцидентный шрифт для цитат и редакционных заголовков и проверьте его на ширине 390 px, прежде чем утверждать.
• Держите трекинг плотным в крупном тексте и свободным в мелком капсе. Заголовкам от 90 px обычно нужен слегка отрицательный межбуквенный интервал, а надзаголовку 32 px: немного положительный.

Выбор шрифтов: ещё и решение о бренде, поэтому запишите пару один раз. Как это сделать, описано в нашем гиде по брендбуку для небольших команд.

Что происходит, когда заголовок слишком длинный?

Вот где фиксированный холст кусается. Перед вами один шаблон, отрендеренный из нашего демо-бренда AURORA, с заголовком 92 px в блоке 888 на 440 px. Сначала заголовок из двух слов.

Теперь тот же шаблон с заголовком из 99 символов.

Движок уменьшил шрифт на ступень (по нашему измерению: с 92 px примерно до 80 px), чтобы вместить текст, вместо того чтобы дать ему вылезти. В Chikaboom дизайнер задаёт идеальный размер и нижний предел (этот заголовок начинается с 92 px при пределе 56 px и допускает 5 строк); если текст не помещается даже на пределе, он заканчивается многоточием. Никто в команде не может вытолкнуть текст за блок или ниже предела. Это практический аргумент в пользу закреплённых шаблонов: решения о типографике принимает один раз тот, кто в них разбирается.

Читается ли длинный заголовок в размере телефона?

Ниже тот же шаблон и тот же текст, отрендеренные нативно в 393 на 393 px, близко к ширине экрана телефона. Это свежий рендер, а не уменьшенная копия изображения 1080, поэтому переносы строк отличаются.

Наше наблюдение: заголовок остаётся читаемым. Учтите, что предел 56 px в этом демо-шаблоне ниже нашей собственной рекомендации 72 px для заголовков: это около 20 pt на телефоне во всю ширину (56 / 2,75), нормально для длинного заголовка, но контрпример для короткого. В собственных шаблонах задавайте предел для заголовков от 72 px. Мелкие ярлыки: самые слабые элементы: в этом шаблоне они стоят около рекомендуемого нами порога 32 px, а при 393 px едва читаются, поэтому считайте их украшением. Проводите эту проверку для каждого шаблона, который выпускаете: отрендерите его в 393 px и прочитайте на расстоянии вытянутой руки. Попробовать можно самим в живом демо.

Как правила WCAG применяются к тексту в изображениях?

По нашему мнению, контраст важнее любого правила о размере. WCAG написан для веб-контента, и его критерий контраста распространяется на изображения с текстом; применять его соотношения к картинкам для соцсетей: наша рекомендация, а не требование платформы. Он требует 4.5:1 для обычного текста и 3:1 для крупного, где крупный означает от 18 pt или от 14 pt жирным (около 24 px и 19 px в терминах CSS). Обратите внимание, что WCAG не задаёт минимальный размер шрифта, только пороги контраста, зависящие от размера, и предупреждает, что изображения с текстом масштабируются хуже живого текста. Подробнее о цветовых парах читайте в нашем гиде по цветовому контрасту.

С интервалами другая история. Критерий 1.4.12 называет интерлиньяж в 1,5 размера шрифта, отступ между абзацами в 2 размера, межбуквенный интервал 0.12 em и межсловный 0.16 em, но требует, чтобы контент выдерживал применение этих значений пользователями, а не чтобы дизайн их использовал. К плоскому PNG он неприменим, поэтому используйте эти числа только как ориентир. Наши рекомендации по интерлиньяжу в таблице намеренно плотнее для заголовков.

Поскольку пользователи не могут изменить размер текста в изображении, продублируйте главное сообщение в подписи и в alt-тексте.

Типографический чек-лист перед публикацией

• Заголовок от 72 px, всё существенное от 40 px, ничего мельче 32 px.
• Один гротеск, не больше трёх начертаний, без тонких и светлых.
• Заголовок минимум в 1,5 раза крупнее вспомогательного текста (72 px против 48 px в самом тесном случае).
• Контраст 4.5:1 для мелкого текста, 3:1 для текста от 24 px (18 pt) в терминах WCAG. Помните, что холст 1080 px уменьшается, поэтому проверяйте реальный размер.
• Заголовок проверен на максимально допустимой длине и при ширине 393 px.
• Для каждого текстового слота задан нижний предел размера, чтобы длинный текст уменьшался и обрезался многоточием, а не вылезал.
• Межбуквенный интервал уплотнён для крупных размеров и расширен для мелкого капса.
• Текст внутри безопасных зон платформ. См. полный справочник размеров и гид по безопасным зонам Stories и Reels.