Шрифт – один из самых выразительных средств, с помощью которых можно донести информацию. Поскольку визуальная информация считывается нашим мозгом в разы быстрее, чем текст, можно считать, что шрифт – это своеобразная обложка, по которой встречают. Именно он задает настроение текста, создает ожидание, повышает доверие к бренду и в целом управляет вниманием читателя.
Современный дизайн стремится максимально упростить подачу информации. Частично это связано с адаптацией под экраны телефонов, а также с борьбой за внимание пользователей. Поэтому в тренде крупный текст и шрифты, их применяют как основной элемент дизайна. Это больше не дополнительное средство донесения информации, а вполне самостоятельное решение.
Разбегаются глаза от количества возможностей и потенциальных сочетаний? Хочется сделать передовой дизайн и укрепить положение лидера рынка? В этой статье поговорим о главных трендах в типографике, а также об особенностях верстки и выборе шрифтов.
Основные правила типографики
Чтобы сайт выполнял свою задачу и успешно удерживал внимание пользователей, надо соблюдать ключевые правила:
-
Чем проще – тем лучше. Нельзя использовать все и сразу. Да, безусловно, огромный выбор новых шрифтов, анимации и эмодзи привлекают внимание. Но не забывайте о главной цели вашей работы. Использовать надо такой объем визуальных инструментов, который не отвлекает внимание от главной мысли. Если сомневаетесь, то отложите выбор на следующий день и сравните оба варианта, так выбор будет сделать легче.
-
Текст на сайте должен легко читаться. Если выбирать между удобством пользователя и креативной идеей, то хороший дизайнер выберет первый вариант. Ни один читатель не будет расшифровывать непонятные надписи, ему нужна доступная и легко читаемая информация.
-
Главное должно выделяться на фоне второстепенного. Хорошая типографика призвана показать главное. Если элементы сайта одинаково привлекают внимание, посетитель запутается.
-
Соблюдение пропорций. Для человеческого глаза комфортно, когда элементы страницы могут делиться на пропорции в соотношении 3/2 или 5/3. Обычно этот принцип применяют и к рекламным блокам в тексте.
Тренды типографики
Типографика, как и любая другая сфера дизайна, не стоит на месте и откликается на потребности потребителя. Более того, анализируя визуальные тенденции, которые только появляются, можно не только проверить свой бренд на современность, но и предсказать покупательские предпочтения. Даже если вы не продаете дизайн-услуги, вы продаете товар или собственный сервис. А это значит, так или иначе, вам приходится работать с упаковкой, дизайном сайта, полиграфической продукцией. Хотите иметь современный дизайн и даже быть на шаг впереди своих конкурентов? Тогда рассмотрим 10 главных типографических тенденций этого года.
Брутализм
В архитектуре брутализм появился в 60-е годы прошлого века. В послевоенное время денег на постройку красивых зданий не было, поэтому все они были похожи на огромные камни, которым придали форму.
Брутальный стиль в веб-дизайне был в тренде последние несколько лет, в этом году тенденция сохраняется. Конечно, он стал более мягким и современным. В целом для сайтов в брутальном стиле характерно отсутствие ярких деталей. На страницах нет ничего лишнего.
Брутальные сайты также лишены украшений. В этом стиле основой визуальной коммуникации является текст. На сайте брутализм проявляется в виде крупных букв, которые особенно хорошо контрастируют со светлыми тонами.
Крупные и жирные заголовки
Чтобы донести ключевой посыл посетителям, надо выделить главные мысли. Сделайте заголовки привлекательными. Необязательно использовать трендовые цвета, достаточно сделать шрифт жирным и крупным.
Размещение контрастного текста позволит привлечь внимание. На фоне обычного шрифта жирные и крупные надписи будут казаться важными, а значит посетитель их точно прочитает. Выделяйте только ключевые фразы, которые затронут, а пояснение дайте обычным шрифтом.
Контурные шрифты
Еще один вариант привлечь внимание – сделать стильные контурные надписи. Они способны произвести сильное первое впечатление. В любом случае надо обращать внимание на читаемость текста. Контурные надписи часто сливаются с фоновыми изображениями.
Оптимально применять контурные шрифты на однотонных или градиентных фонах. Здесь нет места фанатизму – таким типографическим приемом подчеркивается только ключевая мысль, а не весь посыл.
Сломанные шрифты
Оживить типографию сайта можно за счет комбинации слов самыми неожиданными способами. При правильной постановке текста – сломанный шрифт привлечет внимание к вашему посылу. По сути, этот принцип играет на особенности мозга замечать несовпадения, нарушения ритма, а значит – фокусироваться на этом.
В идеале применять специфические надписи только для заголовков или слоганов. Всего несколько слов, иначе вместо внимания посетителя вы получите раздражение и как результат – отказ. В любом случае надпись должна легко читаться и лишь дополнять общий смысл.
Черно-белая классика
Минималистический дизайн в тренде не один год, и 2021 не исключение. Просто – не значит скучно. Можно комбинировать черный и белый шрифты, чередуя их особым образом, чтобы подчеркнуть главную мысль.
Правильно подобранный фон в сочетании с черно-белым шрифтом позволит привлечь внимание легкостью и простотой. Другие элементы не будут отвлекать внимание, в поле зрения будет только важное, а значит, читатель сможет полностью сосредоточиться на посыле.
Сочетание текста и изображений
Еще один вариант – сочетание изображений и текста. Слова должны переплетаться с содержанием картинки, чтобы подчеркивать друг друга и запоминаться. К изображению лучше применить цветной фильтр, с целью улучшить читаемость текста. Также можно скомбинировать несколько слоев для достижения 3D-эффекта.
Важно удостовериться, что примененный эффект не скроет важную часть смысла. Можно пробовать в тексте разные цвета, чтобы слова не терялись на фоне изображения.
Психоделические цвета
Психоделическая атмосфера на страницах в 2021 году – это возврат к ретро-стилю 1970-х годов. Для современной психоделики характерно сочетание ярких цветов и современных ноток, вроде минимализма.
Эффект радуги в качестве фона – это оптимальный вариант, чтобы выделить черный или белый текст. Также можно сам текст выполнить в психоделических тонах, но стоит обращать внимание на контраст. Текст должен хорошо читаться, посетитель не станет разбираться, что написано на странице, ему нужна простая и понятная информация.
Анимация
Текст, который сменяет друг друга, вероятно, будет прочитан. А значит – вы донесете главную мысль. Не перестарайтесь, аккуратный анимированный элемент сделает ваш контент интересным, а главное – запоминающимся.
При добавлении анимированного текста, важно, чтобы шрифт хорошо читался, и пользователю не надо было ждать следующего цикла. При этом позаботьтесь, чтобы пользователь мог понять информацию, даже если анимация не будет работать. Также можно предусмотреть на сайте кнопку “Без анимации”. Еще один момент в этом решении – вес сайта и скорость загрузки экрана. Не стоит забывать и об адаптивной версии для мобильного.
Как подобрать шрифт для сайта
Чтобы определить оптимальный шрифт для вашей конкретной веб-страницы, надо понимать их классификацию. Выделяют три типа:
Шрифты с засечками
Они упрощают восприятие текста в печатных изданиях. Что касается веб-дизайна, то засечки скорее усложнят чтение и будут отвлекать внимание. Чтобы этого не произошло, такие шрифты рекомендуют использовать в логотипах, для выделения заголовков или ключевой информации.
Рубленные
Это нейтральные шрифты. Их используют для основного текста, заголовков или параграфов. Если возникают трудности с выбором шрифта, то это беспроигрышный вариант.
Декоративные
Яркие и оригинальные шрифты, которые лучше использовать для молодежных ресурсов, посвященных творчеству. Обычно такие рифты сложно читаются, а значит использовать их для основного текста или заголовков не рекомендуется.
По данным Google Fonts, в рейтинг наиболее используемых шрифтов в начале 2021 года вошли:
-
Roboto. Универсальный рубленый шрифт, который отлично читается в миниатюрном формате и отлично сочетается с другими шрифтами на кириллице.
-
Open Sans. Предназначен для заголовков и длинных текстов. Прекрасно подходит для билбордов, презентаций, рекламных роликов.
-
Montserrat. Аккуратный шрифт, который идеально подходит для баннерной рекламы. Главное его преимущество – отличная читаемость, вплоть до самого мелкого. Также он отлично вписывается в заголовки.
Основные правила верстки в типографике
С основными трендами типографики и шрифтами разобрались, перейдем к оформлению текста и списков.
Визуальная иерархия
В типографии под понятием «визуальная иерархия» подразумевается порядок расположения заголовков в основном тексте. Важно правильно структурировать информацию. Для этого определяется заголовок H1 и подзаголовки – H2, H3, H4.
Читатель будет бегло просматривать структуру и выбирать только интересные ему пункты. Структурирование – это забота о пользователе. Так гораздо проще понять, где важная, а где второстепенная информация.
Количество букв в строке
В одной строке не рекомендуется вписывать более 45-75 знаков для кириллицы и 45-65 для латиницы. Безусловно, не всегда надо соблюдать это правило. Главное, чтобы строка воспринималась целиком.
В некоторых ситуациях лучше уменьшить строку и сделать несколько узких колонок до 40 знаков. Так будет казаться, что текста меньше, и посетитель ознакомится с текстом.
Выравнивание
Рекомендуется использовать выравнивание по левому краю. Это связано с удобочитаемостью, строки при выравнивании по центру или правому краю сложнее воспринимаются.
Оформление списков
В формате списков обычно оформляется информация, которую гарантированно надо донести до пользователя. Даже вопреки желанию взгляд цепляется за списки и посетитель читаем короткие строки. Но использовать списки недостаточно, надо правильно их оформить. Списки делят на: маркированные и нумерованные.
-
В качестве маркировки используют графические значки, что делает список более эстетичным. Если предложение заканчивается двоеточием, то перечисляют элементы списка со строчной буквы, а в конце каждой строки ставят точку с запятой. Последний пункт заканчивается точкой. В таком списке должно быть только одного логическое предложение, чтобы не запутать читателя.
-
Нумерованные списки лучше делать после заголовка. Это в случае если каждый элемент списка будет законченной мыслью. Каждая строка должна начинать с прописной буквы, а в конце ставится точка. Если используется нумерация со скобкой, то строка начинается со строчной буквы, в конце строк ставится точка с запятой, а после последнего элемента – точка.
Кавычки
В русском языке принято использовать кавычки-елочки (« »). Используйте только их. А вот в латинице используются только лапки (,, ”).
Тире и дефис
Нередко даже опытные дизайнеры используют только дефис, даже в тех случаях, когда надо выбирать тире. Тире больше дефиса, и его используют для раздела членов предложений, выделения прямой речи и указания маршрутов. Дефис в свою очередь используют для разделения в словах (что-либо, бизнес-леди и т.д.).
Передавайте эмоции с помощью картинок
Текст способен дать основную информацию, но в тренде также краткость и лаконичность. А значит, если текст можно заменить или дополнить емкой картинкой – обязательно используйте ее. Изображение не должно сосредотачивать все внимание, его задача проиллюстрировать текст и вызвать эмоции в читателя.
Гифки и видео
Короткие анимации должны быть подобраны по тому же принципу, что и изображения. Их задача подчеркнуть текст и вызвать ассоциации или эмоции у читателя.
Схемы, инфографика, таблицы
Текст можно заменить компактной табличкой или инфографикой. Такой формат подачи информации привлекает внимание, даже при просмотре вскользь. Схемы или таблицы должны быть максимально простыми и понятными, но в то же время выделяться на фоне текста и изображений.
Заключение
2021 год – самое время, чтобы отказаться от стандартов. Комбинация шрифтов и типографских техник сделает сайт ярким и выделит на фоне конкурентов. Корректировка цвета и акцент на важную информацию позволит добиться повышения конверсии.
И помните, нельзя привлечь клиента только трендами. Конечно, надо следить за актуальными тенденциями в дизайне, но не менее важно заботиться о посетителях веб-страницы. Сделайте все, чтобы посетителям сайта было комфортно воспринимать информацию. А яркие акценты, как «ломаный» шрифт или анимация подчеркнут важное и разогреют интерес к странице.