Лого vc.ru

«Шрифт определяет то, как пользователь потребляет контент»: Веб-дизайнер о роли текста на сайте

«Шрифт определяет то, как пользователь потребляет контент»: Веб-дизайнер о роли текста на сайте

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

Поделиться

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

Методы выбора шрифта

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

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

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

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

Найдите любимые шрифты

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

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

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

«Работа дизайнера заключается в том, чтобы создать узнаваемый проект и произвести впечатление на пользователя. Вы должны передать информацию так, чтобы посетитель легко мог её воспринять», — пишет автор материала.

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

Важность заголовков

«Далеко не каждый посетитель сможет продержаться на сайте так долго, чтобы дойти до содержания. Ваша задача — заинтересовать его в первые несколько секунд», — объясняет Джейк Рошле. Яркий и броский заголовок — это то, что поможет захватить внимание пользователя. Для таких задач существуют специальные шрифты, которые «цепляют» посетителя. «Заголовок — это самостоятельный элемент интерфейса, который нужно рассматривать отдельно от текста и остального контента. Он определяет содержимое страницы и заставляет пользователя обратить внимание и на другой контент».

Сервис Pen Heaven, говорит Рошле, представляет собой хороший пример использования такого «притягательного» заголовка. Сам по себе он не очень крупный, но две линии, которые проходят «сквозь» него, привлекают к нему больше внимания. Они показывают, что этот заголовок — важная составляющая страницы:

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

Кроме того, пишет Рошле, вовсе необязательно искать броские шрифты в платных библиотеках — бесплатные варианты могут сработать не хуже. В качестве примера дизайнер приводит шрифт Insolent — массивный и выделяющийся на фоне других типографических решений. «Важно, чтобы шрифт вам нравился — тогда вы сможете найти им достойное применение», — говорит он.

Комбинируйте типографические концепты

Практика, отмечает Джейк Рошле, — лучший способ научиться выбирать эффективные комбинации шрифтов. Её важно сочетать в теоретическим обучением — изучать работы других дизайнеров и проектировщиков, посвящая поиску профессиональных концептов часть своего времени. «Это не тот навык, которым можно овладеть за неделю или месяц. В полной мере его не освоить и за год, хотя есть исключения», — отмечает автор материала.

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

Ещё один хороший способ научиться комбинировать шрифты, по мнению автора, — скопировать какую-то часть интерфейса другого сайта и попробовать как-то её изменить или разнообразить. «Чем больше вы практикуетесь, тем легче вам будет выбирать шрифты в дальнейшем. Со временем решения будут приходить к вам легко», — говорит Джейк Рошле.

Ресурсы, где можно найти бесплатные шрифты

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

Автор материала рекомендует следующие ресурсы, которые, по его мнению, подойдут начинающим специалистам:

Статьи по теме
Проблемы интерфейсов будущего: Какие шрифты использовать в гаджетах27 февраля 2015, 15:20
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

0

Текст на красном фон отсюда
hellohappy.org/beautiful-web-type/
Чувак показывает, как можно комбинировать шрифты из google fonts. Очень круто

0

Черный текст на красном фоне ужасно смотрится

0

Ребята сделали классный webfont.ru, регулярно пользую.

1

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Дмитрий Лимонов

потому что ресторан не означает "дорого, бохато", как привыкли в РФ. Это всего лишь пункт общественного питания. Да, есть элитные рестораны, а есть в формате закусочных. Мир не кончается там, где ваши представления о нём не совпадают с реальностью.

«Будьте нашим гостем»: кому McDonald's даёт право бесплатно есть в своих ресторанах
0
Владимир Тихомиров

Похоже, пора на собеседовании в Яндекс спрашивать, в самом конце: вилкой в глаз или в жопу раз? И оценивать креативность процесса поиска правильного ответа... Будем перенимать международный опыт с адаптацией под наши условия, так сказать

Бывший глава Google затруднился ответить на один из традиционных вопросов компании на собеседованиях
0
Александр Васильев

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

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Artem Zinnatullin
Juno

Не собираюсь оправдывать ролик сбера, но если вы про вот это видео с футболистом youtu.be/VGEfNcvntno, то оно ничем не лучше, тк там блин оператор(ы) по полю бегают, сверху съемка ведется и рядом с полем люди явно не на телефон снимают. Всем участникам было понятно, что это какой-то прикол. Была бы скрытая съемка — без вопросов.

Так можно и в сбере снять реального инвалида, но с кучей операторов, камер и режиссером рядом, понятное дело, его будут обслуживать максимально хорошо.

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Artem Zinnatullin
Juno

Я может не понимаю, но в чем большая разница между "в имитирующем инвалида костюме" и "под видом инвалида"?

Не вижу "небо и земля" на скриншоте. У всех одинаково желтушные заголовки.

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Показать еще