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

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

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

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

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

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

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)

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

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

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