1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>9 фев 2022</li>
2
<ul><li>9 фев 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Простые правила мобильной типографики</h2>
4
</ul><h2>Простые правила мобильной типографики</h2>
5
<p>Рассказываем, как правильно верстать текст так, чтобы он легко читался на всех мобильных устройствах.</p>
5
<p>Рассказываем, как правильно верстать текст так, чтобы он легко читался на всех мобильных устройствах.</p>
6
<p>Иллюстрация: Kanate / Rawpixel / Annie для Skillbox Media</p>
6
<p>Иллюстрация: Kanate / Rawpixel / Annie для Skillbox Media</p>
7
<p>Продуктовый дизайнер. Работает со стартапами. Много путешествует. Постоянно читает, на ходу и на лету.</p>
7
<p>Продуктовый дизайнер. Работает со стартапами. Много путешествует. Постоянно читает, на ходу и на лету.</p>
8
<p>Текст на сайте или в приложении должен хорошо выглядеть и быть понятным. Пользователь может смотреть в экран телефона под ярким солнцем на улице, в спешке или с приглушённым экраном из-за разряжающейся батареи - всё это сильно влияет на восприятие текста. Поэтому дизайнерам важно учитывать это при разработке интерфейсов для мобильных устройств.</p>
8
<p>Текст на сайте или в приложении должен хорошо выглядеть и быть понятным. Пользователь может смотреть в экран телефона под ярким солнцем на улице, в спешке или с приглушённым экраном из-за разряжающейся батареи - всё это сильно влияет на восприятие текста. Поэтому дизайнерам важно учитывать это при разработке интерфейсов для мобильных устройств.</p>
9
<p>Рассказываем об основных правилах, которые помогут вам правильно оформить текст в мобильной версии приложения и сайта.</p>
9
<p>Рассказываем об основных правилах, которые помогут вам правильно оформить текст в мобильной версии приложения и сайта.</p>
10
<p>Это главный инструмент коммуникации с пользователями. Поэтому к подбору основного шрифта и его настройкам нужно подойти с особой осторожностью.</p>
10
<p>Это главный инструмент коммуникации с пользователями. Поэтому к подбору основного шрифта и его настройкам нужно подойти с особой осторожностью.</p>
11
<p><strong>Не используйте причудливые шрифты.</strong>Начертания букв основного текста должны быть в первую очередь чёткими и узнаваемыми. Необычные шрифты лучше использовать в заголовках или в акцентных элементах.</p>
11
<p><strong>Не используйте причудливые шрифты.</strong>Начертания букв основного текста должны быть в первую очередь чёткими и узнаваемыми. Необычные шрифты лучше использовать в заголовках или в акцентных элементах.</p>
12
<p>Хорошие шрифты для основного текста из библиотеки Google Fonts:<a>Open Sans</a>,<a>Montserrat</a>,<a>Rubik</a>,<a>Source Sans Pro</a>,<a>Spectral</a>.</p>
12
<p>Хорошие шрифты для основного текста из библиотеки Google Fonts:<a>Open Sans</a>,<a>Montserrat</a>,<a>Rubik</a>,<a>Source Sans Pro</a>,<a>Spectral</a>.</p>
13
Шрифты Pacifico и Montserrat<em>Изображение: Skillbox Media</em><p><strong>Подумайте о масштабировании продукта.</strong>Планируется ли локализация вашего продукта для других стран? Проверьте, поддерживают ли выбранный вами шрифт нужные языки, чтобы потом не менять всю типографику приложения.</p>
13
Шрифты Pacifico и Montserrat<em>Изображение: Skillbox Media</em><p><strong>Подумайте о масштабировании продукта.</strong>Планируется ли локализация вашего продукта для других стран? Проверьте, поддерживают ли выбранный вами шрифт нужные языки, чтобы потом не менять всю типографику приложения.</p>
14
<p><strong>Размер основного шрифта установите в диапазоне от 16 px до 18 px.</strong>Распространённая ошибка - делать размер основного текста слишком мелким:</p>
14
<p><strong>Размер основного шрифта установите в диапазоне от 16 px до 18 px.</strong>Распространённая ошибка - делать размер основного текста слишком мелким:</p>
15
<em>Изображение: Skillbox Media</em><p><strong>WCAG</strong>(The Web Content Accessibility Guidelines) рекомендует 14 px как минимальный размер основного текста.</p>
15
<em>Изображение: Skillbox Media</em><p><strong>WCAG</strong>(The Web Content Accessibility Guidelines) рекомендует 14 px как минимальный размер основного текста.</p>
16
<p><strong>Apple</strong>в своём руководстве Human Interface Guidelines рекомендует 17 px как минимальный размер основного текста.</p>
16
<p><strong>Apple</strong>в своём руководстве Human Interface Guidelines рекомендует 17 px как минимальный размер основного текста.</p>
17
<p><strong>Google</strong>в руководстве Material Design рекомендует 16 px как минимальный размер основного текста.</p>
17
<p><strong>Google</strong>в руководстве Material Design рекомендует 16 px как минимальный размер основного текста.</p>
18
<p>Рекомендации Apple и Google относятся к конкретным шрифтам (San Francisco и New York для iOS и Roboto для Android). В каждом проекте выбранный шрифт нужно рассматривать отдельно. Например, если буквы шрифта тонкие, то его нужно сделать крупнее.</p>
18
<p>Рекомендации Apple и Google относятся к конкретным шрифтам (San Francisco и New York для iOS и Roboto для Android). В каждом проекте выбранный шрифт нужно рассматривать отдельно. Например, если буквы шрифта тонкие, то его нужно сделать крупнее.</p>
19
<em>Изображение: Skillbox Media</em><p><strong>Проверьте, как шрифт будет выглядеть на экране телефона.</strong>Если вы используете Figma для создания макетов, проверьте свою работу сразу на телефоне с помощью<a>Figma - prototype mirror share</a>. Для этого нужно залогиниться в приложении, перейти во вкладку Mirror и выделить нужный экран внутри Figma.</p>
19
<em>Изображение: Skillbox Media</em><p><strong>Проверьте, как шрифт будет выглядеть на экране телефона.</strong>Если вы используете Figma для создания макетов, проверьте свою работу сразу на телефоне с помощью<a>Figma - prototype mirror share</a>. Для этого нужно залогиниться в приложении, перейти во вкладку Mirror и выделить нужный экран внутри Figma.</p>
20
<p>Информацию важно организовать так, чтобы даже на ходу пользователь мог легко сориентироваться в приложении и найти необходимое. Для этого используют заголовки - они помогают пользователю быстро понять, что ему нужно.</p>
20
<p>Информацию важно организовать так, чтобы даже на ходу пользователь мог легко сориентироваться в приложении и найти необходимое. Для этого используют заголовки - они помогают пользователю быстро понять, что ему нужно.</p>
21
<p><strong>Заголовки должны отличаться от основного текста.</strong>Чтобы добиться визуального контраста, можно использовать другое начертание или другой шрифт, с достаточно выраженными отличиями.</p>
21
<p><strong>Заголовки должны отличаться от основного текста.</strong>Чтобы добиться визуального контраста, можно использовать другое начертание или другой шрифт, с достаточно выраженными отличиями.</p>
22
<em>Изображение: Skillbox Media</em><p><strong>Если вы хотите использовать для заголовков один шрифт, а для основного текста другой, осознанно подойдите к выбору.</strong>Вот несколько правил, которые помогут вам подобрать шрифтовую пару:</p>
22
<em>Изображение: Skillbox Media</em><p><strong>Если вы хотите использовать для заголовков один шрифт, а для основного текста другой, осознанно подойдите к выбору.</strong>Вот несколько правил, которые помогут вам подобрать шрифтовую пару:</p>
23
<ul><li><strong>Только у одного шрифта могут быть необычные начертания.</strong>Для заголовков вы можете использовать каллиграфию, экспериментальные шрифты, шрифты, сочетающие в себе очень тонкие горизонтальные и толстые вертикальные линии, шрифты с необычными выносными элементами. Но основной текст должен оставаться комфортным для продолжительного чтения.</li>
23
<ul><li><strong>Только у одного шрифта могут быть необычные начертания.</strong>Для заголовков вы можете использовать каллиграфию, экспериментальные шрифты, шрифты, сочетающие в себе очень тонкие горизонтальные и толстые вертикальные линии, шрифты с необычными выносными элементами. Но основной текст должен оставаться комфортным для продолжительного чтения.</li>
24
<li><strong>Шрифты должны дополнять друг друга.</strong>Хорошо, когда у шрифтов есть одновременно и общие черты, и заметные различия. Например, у них могут быть похожие пропорции, но один из них с засечками, а другой - без.</li>
24
<li><strong>Шрифты должны дополнять друг друга.</strong>Хорошо, когда у шрифтов есть одновременно и общие черты, и заметные различия. Например, у них могут быть похожие пропорции, но один из них с засечками, а другой - без.</li>
25
</ul><em>Изображение: Skillbox Media</em><p>Или оба шрифта могут быть без засечек, но с разными пропорциями: вытянутый и округлый.</p>
25
</ul><em>Изображение: Skillbox Media</em><p>Или оба шрифта могут быть без засечек, но с разными пропорциями: вытянутый и округлый.</p>
26
<em>Изображение: Skillbox Media</em><ul><li><strong>Подбирайте пару из одного суперсемейства шрифтов.</strong>Например: Roboto Slab для заголовков и Roboto для основного текста, Noto Serif и Noto Sans, PT Sans Narrow и PT Sans. Создатели этих шрифтов сразу делают их так, чтобы они хорошо сочетались друг с другом.</li>
26
<em>Изображение: Skillbox Media</em><ul><li><strong>Подбирайте пару из одного суперсемейства шрифтов.</strong>Например: Roboto Slab для заголовков и Roboto для основного текста, Noto Serif и Noto Sans, PT Sans Narrow и PT Sans. Создатели этих шрифтов сразу делают их так, чтобы они хорошо сочетались друг с другом.</li>
27
</ul><em>Изображение: Skillbox Media</em><ul><li><strong>Если у вас не получается самостоятельно подобрать шрифтовую пару, воспользуйтесь сервисами.</strong><a>Fontpair</a> - галерея вариантов разных шрифтовых пар.<a>Fontjoy</a> - генератор пар на основе Google Fonts.</li>
27
</ul><em>Изображение: Skillbox Media</em><ul><li><strong>Если у вас не получается самостоятельно подобрать шрифтовую пару, воспользуйтесь сервисами.</strong><a>Fontpair</a> - галерея вариантов разных шрифтовых пар.<a>Fontjoy</a> - генератор пар на основе Google Fonts.</li>
28
</ul><em>Изображение: Skillbox Media</em><p><strong>Убедитесь, что заголовки не занимают больше трёх строк.</strong>Если это произошло - сократите длину заголовков или измените размер шрифта. Иначе текст будет очень трудно прочитать.</p>
28
</ul><em>Изображение: Skillbox Media</em><p><strong>Убедитесь, что заголовки не занимают больше трёх строк.</strong>Если это произошло - сократите длину заголовков или измените размер шрифта. Иначе текст будет очень трудно прочитать.</p>
29
<em>Изображение: Skillbox Media</em><p>Кажется, что эти мелкие вещи никак не влияют на удобство использования сайта или приложения. На самом деле они формируют у читателя ощущения порядка и помогают быстрее вникнуть в структуру вашего продукта. Если все отступы и размеры шрифтов не будут структурированы, пользоваться приложением будет просто неприятно.</p>
29
<em>Изображение: Skillbox Media</em><p>Кажется, что эти мелкие вещи никак не влияют на удобство использования сайта или приложения. На самом деле они формируют у читателя ощущения порядка и помогают быстрее вникнуть в структуру вашего продукта. Если все отступы и размеры шрифтов не будут структурированы, пользоваться приложением будет просто неприятно.</p>
30
<p><strong>Определите расстояние внутри блоков и между ними.</strong>Согласно<a>теории близости</a>,<strong></strong>объекты, находящиеся близко друг к другу, воспринимаются связанно.</p>
30
<p><strong>Определите расстояние внутри блоков и между ними.</strong>Согласно<a>теории близости</a>,<strong></strong>объекты, находящиеся близко друг к другу, воспринимаются связанно.</p>
31
<p>Например, если заголовок будет находиться ровно между двумя абзацами, пользователь только по контексту сможет понять структуру страницы. Но наша задача - сделать так, чтобы вся структура была понятна сразу, поэтому заголовок всегда должен находиться ближе к своему тексту.</p>
31
<p>Например, если заголовок будет находиться ровно между двумя абзацами, пользователь только по контексту сможет понять структуру страницы. Но наша задача - сделать так, чтобы вся структура была понятна сразу, поэтому заголовок всегда должен находиться ближе к своему тексту.</p>
32
<em>Изображение: Skillbox Media</em><p><strong>Внутренние расстояния должны быть меньше внешних на каждом из уровней.</strong>Например, отступ от основного текста у заголовка должен быть больше, чем у подзаголовка.</p>
32
<em>Изображение: Skillbox Media</em><p><strong>Внутренние расстояния должны быть меньше внешних на каждом из уровней.</strong>Например, отступ от основного текста у заголовка должен быть больше, чем у подзаголовка.</p>
33
<em>Изображение: Skillbox Media</em><p>Чтобы не путаться, пользуйтесь<a>правилом внутреннего и внешнего</a>: внешние расстояния всегда должны быть больше или равны внутренним.</p>
33
<em>Изображение: Skillbox Media</em><p>Чтобы не путаться, пользуйтесь<a>правилом внутреннего и внешнего</a>: внешние расстояния всегда должны быть больше или равны внутренним.</p>
34
<p><strong>Чем меньше разных стилей, тем выразительнее будут акценты в тексте.</strong>Определите необходимые кегли и зафиксируйте их. Зачастую достаточно всего четырёх или пяти:</p>
34
<p><strong>Чем меньше разных стилей, тем выразительнее будут акценты в тексте.</strong>Определите необходимые кегли и зафиксируйте их. Зачастую достаточно всего четырёх или пяти:</p>
35
<ul><li>Основные заголовки. Самый важный контент, который должен считываться первым.</li>
35
<ul><li>Основные заголовки. Самый важный контент, который должен считываться первым.</li>
36
<li>Второстепенные заголовки или подзаголовки. Например, заголовки для навигации внутри страниц.</li>
36
<li>Второстепенные заголовки или подзаголовки. Например, заголовки для навигации внутри страниц.</li>
37
<li>Основной текст. Повествовательные блоки, которые должны читаться максимально легко.</li>
37
<li>Основной текст. Повествовательные блоки, которые должны читаться максимально легко.</li>
38
-
<li>Дополнения и сноски. Дополнительный текст, который может быть прим��рно на два размера меньше основного. Если человек не прочтёт эту информацию, он не упустит ничего важного.</li>
38
+
<li>Дополнения и сноски. Дополнительный текст, который может быть примерно на два размера меньше основного. Если человек не прочтёт эту информацию, он не упустит ничего важного.</li>
39
<li>Вы можете добавить ещё один стиль, но не переусердствуйте.</li>
39
<li>Вы можете добавить ещё один стиль, но не переусердствуйте.</li>
40
</ul><em>Изображение: Skillbox Media</em><p>Чтобы быстро подобрать кегли для разных типов текста, воспользуйтесь формулами:</p>
40
</ul><em>Изображение: Skillbox Media</em><p>Чтобы быстро подобрать кегли для разных типов текста, воспользуйтесь формулами:</p>
41
<ul><li>Основной текст, или базовый, - 16 px.</li>
41
<ul><li>Основной текст, или базовый, - 16 px.</li>
42
<li>Ключевые фразы и акценты - 16 px × 1,2 ≈ 19 px.</li>
42
<li>Ключевые фразы и акценты - 16 px × 1,2 ≈ 19 px.</li>
43
<li>Подзаголовки - 19 px × 1,2 ≈ 23 px.</li>
43
<li>Подзаголовки - 19 px × 1,2 ≈ 23 px.</li>
44
<li>Заголовки - 23 px × 1,2 ≈ 28 px.</li>
44
<li>Заголовки - 23 px × 1,2 ≈ 28 px.</li>
45
<li>Дополнения и сноски - 16 px × 0,833 ≈ 13 px.</li>
45
<li>Дополнения и сноски - 16 px × 0,833 ≈ 13 px.</li>
46
</ul><p>В автоматическом режиме это делает сервис<a>Type-scale</a>. Сайт сразу выдаёт нужные значения в пикселях и в rem.</p>
46
</ul><p>В автоматическом режиме это делает сервис<a>Type-scale</a>. Сайт сразу выдаёт нужные значения в пикселях и в rem.</p>
47
<em>Скриншот: сайт<a>type-scale.com</a></em><p><strong>Написание ПРОПИСНЫМИ</strong> - популярный приём в дизайне. Но важно понимать один нюанс. У строчных букв есть разнообразные выносные элементы, которые помогают визуально узнавать буквы. Слова, написанные прописными буквами, имеют похожие друг на друга прямоугольные силуэты, и сами буквы менее контрастны между собой. Поэтому уходит больше времени, чтобы прочесть их.</p>
47
<em>Скриншот: сайт<a>type-scale.com</a></em><p><strong>Написание ПРОПИСНЫМИ</strong> - популярный приём в дизайне. Но важно понимать один нюанс. У строчных букв есть разнообразные выносные элементы, которые помогают визуально узнавать буквы. Слова, написанные прописными буквами, имеют похожие друг на друга прямоугольные силуэты, и сами буквы менее контрастны между собой. Поэтому уходит больше времени, чтобы прочесть их.</p>
48
<p>Не пишите длинные фразы заглавными буквами. Это значительно замедлит чтение:</p>
48
<p>Не пишите длинные фразы заглавными буквами. Это значительно замедлит чтение:</p>
49
<em>Изображение: Skillbox Media</em><p><strong>Разрядка</strong> - это расстояние между символами в словах. Обычно применяется сразу ко всему абзацу.</p>
49
<em>Изображение: Skillbox Media</em><p><strong>Разрядка</strong> - это расстояние между символами в словах. Обычно применяется сразу ко всему абзацу.</p>
50
<p>Не разряжайте текст, написанный строчными. П р о с т о п о т о м у ч т о э т о н е у д о б н о ч и т а т ь. Во всех качественных шрифтах она уже оптимально настроена:</p>
50
<p>Не разряжайте текст, написанный строчными. П р о с т о п о т о м у ч т о э т о н е у д о б н о ч и т а т ь. Во всех качественных шрифтах она уже оптимально настроена:</p>
51
<em>Изображение: Skillbox Media</em><p>Если вы используете в заголовках прописные - установите разрядку в 10%. Это уберёт эффект слипшихся букв и улучшит читаемость текста.</p>
51
<em>Изображение: Skillbox Media</em><p>Если вы используете в заголовках прописные - установите разрядку в 10%. Это уберёт эффект слипшихся букв и улучшит читаемость текста.</p>
52
<em>Изображение: Skillbox Media</em><p>Убедитесь, что цвет текста выглядит контрастно по отношению к фону. Чтобы это проверить, используйте сайт<a>WebAIM</a>для проверки контраста. Коэффициент контрастности должен быть не меньше чем 7:1 для обычного текста и 3:1 для крупного текста.</p>
52
<em>Изображение: Skillbox Media</em><p>Убедитесь, что цвет текста выглядит контрастно по отношению к фону. Чтобы это проверить, используйте сайт<a>WebAIM</a>для проверки контраста. Коэффициент контрастности должен быть не меньше чем 7:1 для обычного текста и 3:1 для крупного текста.</p>
53
<p><strong>Выберите ограниченную палитру цветов и придерживайтесь её.</strong>Это способствует узнаваемости бренда и упрощает восприятие информации в интерфейсе. Лишние цвета создают дополнительную нагрузку и вызывают путаницу.</p>
53
<p><strong>Выберите ограниченную палитру цветов и придерживайтесь её.</strong>Это способствует узнаваемости бренда и упрощает восприятие информации в интерфейсе. Лишние цвета создают дополнительную нагрузку и вызывают путаницу.</p>
54
<p><strong>Больше о том, как работать с цветом</strong></p>
54
<p><strong>Больше о том, как работать с цветом</strong></p>
55
<p><strong>Текст на изображении должен легко читаться.</strong>Чтобы добиться этого, накладывайте на изображение полупрозрачные цветные плашки. Также можно попробовать менять свойство наложения цвета и добавить размытие.</p>
55
<p><strong>Текст на изображении должен легко читаться.</strong>Чтобы добиться этого, накладывайте на изображение полупрозрачные цветные плашки. Также можно попробовать менять свойство наложения цвета и добавить размытие.</p>
56
<em>Изображение: Skillbox Media</em><p><strong>Больше о типографике и вёрстке</strong></p>
56
<em>Изображение: Skillbox Media</em><p><strong>Больше о типографике и вёрстке</strong></p>
57
<a>Практический курс: "Профессия UX/UI-дизайнер + ИИ" Узнать о курсе</a>
57
<a>Практический курс: "Профессия UX/UI-дизайнер + ИИ" Узнать о курсе</a>