19 Типографские навыки, которые должен знать каждый дизайнер

Более 90% всей веб-информации состоит из текста. Хотя дизайнеры тратят много времени на выбор графики, интерфейса и стиля страницы, для выбора идеальной типографики требуется одинаковое количество времени. Особенно в том, что касается мобильных устройств, типография мобильного Интернета требует особого внимания, поскольку она связана с двумя основными проблемами - доступным пространством и типографским размером. В этой статье будет дано 19 типографских советов, необходимых для разблокировки впечатляющего пользовательского интерфейса вашего мобильного веб-дизайна с богатым пользовательским интерфейсом.

Дать некоторое пространство

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

Бонусный совет: кернинг

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

Хотя это видно на изображении выше, есть еще много информации о разнице между этими различными типами кернинга. Любопытно? Прочитайте его в этом блоге «Кернинг: не стесняйся в своем стиле».

Подходящий размер шрифта

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

Используйте правильные единицы измерения

Для размера шрифта мобильного Интернета типография не использует баллы (pt). Вместо этого используйте ems или rems. Это предпочитается большинством дизайнеров, поскольку эти модули делают контент масштабируемым, поскольку они основаны на процентах, а не на статических размерах.

Выберите контрастные цвета

Лучший контраст обеспечивает лучшую читаемость. Размышляя о цвете мобильной типографии, подумайте о сравнении яркого и темного. Если фон страницы темного цвета, используйте яркие цветные шрифты. Например белые шрифты на черном фоне и наоборот.

Обеспечить лучшую читаемость

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

Правильно выровняйте тексты

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

Установить ведущий

Типография в мобильном Интернете требует последовательного лидерства (промежуток между строками). Когда он слишком мал, в большом контенте трудно проследить конец одной строки и начало следующей. Если он слишком большой, это приводит к ненужным пробелам. Следите за тем, чтобы не прерывать плавное течение линии.

В поисках сладкого пятна

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

Использование белого пространства

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

Учитывайте ширину экрана

Разрабатывая типографику в мобильном Интернете, вы должны думать о том, как люди читают тексты. Обычно в мобильном устройстве есть 2 вида ширины: вертикальная и горизонтальная. Следовательно, при разработке типографики учитывайте обе ширины и соответственно устанавливайте выравнивание и интервал.

Сделайте вашу типографику отличительной

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

Проверьте масштабирование и пропорции

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

Учитывайте функциональность

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

Является ли страница текстовой?

Если ваша страница имеет большой объем текста (например, блог или новостная статья), требуется очень небольшое взаимодействие. Основная цель пользователя - прочитать, убедиться, что типография мобильного Интернета разработана соответствующим образом.

Является ли страница интерактивным?

Если ваша страница включает в себя больше всплывающих окон и нажимает на действия, а также печатает, редактирует и т. Д., Измените текст соответствующим образом. Убедитесь, что размер шрифта составляет не менее 18 пикселей, чтобы пользователи могли понять, что какое-то действие должно произойти после того, как они нажмут или наведут курсор на текст.

Отзывчивый веб-дизайн

Как упоминалось ранее, следует избегать пикселей во время типографики мобильного Интернета. У них есть стандарт с фиксированными размерами. Вместо этого используйте em или rem. Они основаны на процентах и ​​масштабируемы. Когда контент просматривается на мобильном устройстве с другим разрешением, они соответствующим образом корректируют свой размер. Помните, что текстовое содержимое вашей отзывчивой веб-страницы должно быть масштабируемым и автоматически регулировать его размер в соответствии с шириной экрана. Вы можете использовать LambdaTest для проведения адаптивного тестирования. Одним щелчком мыши вы можете проверить отзывчивость вашего сайта на более чем 44 мобильных устройствах с различными разрешениями.

Сопряжение нескольких шрифтов

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

Вес шрифта: тяжелый или легкий?

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

Держите фон в уме

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

Типография - деликатное ремесло. Дизайнеры часто проводят всю жизнь в оттачивании своих типографских навыков. С каждым новым шрифтом мы сталкиваемся с новыми проблемами, и мы уверены, что вышеупомянутые советы по мобильной типографии пригодятся вам в следующий раз, когда вы создаете новую мобильную веб-страницу. Кроме того, имейте в виду, что нужно выполнять кросс-браузерные тесты на совместимость, чтобы убедиться, что используемые шрифты или стили работают должным образом во всех браузерах. LambdaTest может использоваться для выполнения кросс-браузерных тестов совместимости на более чем 2000 различных браузерах и их версиях. Убедитесь, что гарнитура поддерживается во всех необходимых браузерах, и предоставьте своим пользователям богатый пользовательский интерфейс, которого они заслуживают.

Первоначально опубликовано на LambdaTest

Первоначально Написал Арнаб Рой Чоудхури

Дальнейшее чтение…

Если вам понравился пост, пожалуйста, хлопните в ладоши и помогите другим найти его тоже.