SOCIAL
PROJECT
Важность типографики в мобильном дизайне

Важность типографики в мобильном дизайне

  • 0 комментариев
  • 356 просмотров
  • 0 репостов
  • 0 лайков
  • 0

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

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

Итак, уделите прицельное внимание таким ее элементам:

1. Шрифт

Для разного контента требуются различные шрифты. Например, для рекламы женских духов обычно используются тонкие шрифты, плавные или изогнутые. Но тут важно не переборщить, так как декоративные шрифты на маленьком экране могут выглядеть неразборчиво. Также воздержитесь от рукописных шрифтов, они перегружают мобильный дизайн и выглядят нечитабельно. Для примера – шрифт League Script #1.

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

Для поддержания чистого простого пользовательского интерфейса используйте шрифты одного стиля. А лучше – 1 шрифт в нескольких вариантах и размерах. Для контраста можно выбрать 2-3 дополнительных шрифта.


2. Размер шрифта

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

Какой же размер шрифта выбрать? Для iOS можно использовать размер шрифта в 11 пунктов, а для смартфонов на базе Android выберите размер 14 sp. Это рекомендация для основного текста, для заголовков и подзаголовков используйте больший размер.

3. Стили текста

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

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

Если вы соединяете разные стили – ищите буквы с одинаковой формой чаш (пространством внутри замкнутых букв, например, «о») и высотой. Довольно распространенная пара шрифтов – serif и sans serif.

4. Интерлиньяж

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

Так как экран смартфона меньше монитора компьютера, то и межстрочный интервал надо делать меньше, чем в десктопной версии. Общепринятый интерлиньяж – 1,4em, но, на наш взгляд, он немного маловат и делает текст слишком сжатым на экранах мобильных. В веб-дизайне нормальный межстрочный интервал должен составлять 120% от размера шрифта. И еще одно правило – в короткой строке используйте меньший интерлиньяж. Также, если для десктопных версий вы задаете более свободный интерлиньяж, не забудьте его уменьшить для мобильных версий.

5. Длина строки

Длина текстовой строки – важная мера в типографике. Тут надо учитывать, что длина строки экрана ноутбука или ПК выходит за границы экрана смартфона. И если для ПК оптимальная длина строки считается 50-75 символов (в идеале – 60-65), то для мобильных девайсов она должна быть короче. Мы рекомендуем придерживаться 30-40 символов в строке, так текст будет удобочитаемым.

6. Пустое пространство

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

Также дайте больше пространства элементам – например, выстройте навигационное меню не по горизонтали, а по вертикали.

7. Контраст

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

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

8. Кернинг

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

9. Трекинг

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

10. Выравнивание текста

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

Можно использовать смешанное выравнивание – когда в большом блоке текста используется выравнивание по левому краю, а для заголовков или коротких строк используется выравнивание по центру. Но не более 3 раз на весь текст.

Выравнивание по ширине оставляет аккуратные и ровные края. Однако приводит к несогласованному пробелу или лишь нескольким, растянутым, словам в строке. Поэтому оно нам не подходит.


11. Функциональность.

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

12. Адаптивность.

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

Итого

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


Вам понравилась статья? Поставьте оценку для рейтинга:

Комментарии (0)

Хотите оставить комментарий?

Получите консультацию
удобным для Вас способом!

Ответим в течении минуты!