Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Тренды / ТОП

15 тенденций типографики 2020-х: сайты и трендовые идеи

4 марта 2020 6 комментариев

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

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

Подписываясь на Envato Elements скачивайте неограниченно шрифты с кириллицей и другое.

  1. Главные заголовки сжимаются
  2. Типография «от руки»
  3. Засечки снова в тренде
  4. Крупно и контрастно
  5. Утонченные Sans Serif’ы
  6. Гранжевые штрихи
  7. Брутализм
  8. Анимированный набор текста
  9. Перекрывающая типографика
  10. Контурные надписи
  11. Закругленные без засечек
  12. Вариативные шрифты
  13. Типографика «не по правилам»
  14. Персонализированные шрифты
  15. Комбинации стилей

Читайте также:  Тренды в веб-дизайне 2022: идеи запоминающегося UX

1. Главные заголовки сжимаются

Недавно правилом оформления hero-хедера было – чем заметней массивный заголовок, тем лучше. Веб-пользователи сталкивались с огромными надписями поверх hero-изображения. Гигантские буквы с главных экранов приковывали внимание. Но, «визуально кричащее» создает не лучший User eXperience.

Недостатки драматической типографики:

  • Не смотрится при малых разрешениях
  • Адаптация дизайна нарушает его эстетику

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

Без шрифтового гигантизма:

  • Проще разрабатывать под мобильные
  • Больше мотивирующего вмещается до линии сгиба

Красивое применение тренда типографики 2020 года в оформлении сайта

тренд типографики в дизайне

Смотрите, как поменялся дизайн главной страницы Dollar Shave Club.

Тренды типографики 2020: шрифты надписей поверх Hero-изображений уменьшаются

тренд типографики в дизайне


2. Живые шрифты «от руки»

Чистый флэт вида Pixel Perfect сменяют более человечные концепции и скриптовые шрифты будут актуальны. Вам нужнее брендовое оформление или простота восприятия? Чем больше прямоты, последовательности и ярче выражена индивидуальность, тем убедительней и результативней дизайн.

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

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

Тренд типографики сайтов 2020: рукописный шрифт поверх HERO изображений в первых экранах

тренд типографики в дизайне


3. Засечки снова в тренде

Со времен первых мониторов тексты с засечками признали неразборчивыми. Но, экраны 2020-х не размывают «ступни» литер. Уже давно все читабельно – от едва заметных засечек четкого тонкого шрифта, до малоконтрастных шрифтов с длинными и утолщенными засечками. Любой сериф (с шрифтовыми завитушками или просто квадратный) добавит надписи значимости, а сайту – темперамента и обаяния. Засечки усиливают эстетику дизайна, как незамысловатого, так и великолепно использующего пространство, вот красивый пример.

Выбирайте шрифт по стилю литер – предпочтительней с постоянной толщиной основных штрихов. Межстрочный интервал в Serif’ах зависим от выносных элементов букв

Вариант 1 и Вариант 2 шрифтового контраста: гуманистические Sans-Serif отлично дополняют эмоционально годную для объемного чтения традиционную классику Old Style с засечками.

тренд типографики в дизайне

тренд типографики в дизайне


4. Крупно и контрастно

Когда-то изображения c текстом считались вещами несовместимыми. У дизайнеров 2020-х свои идеи с наложением массивных заголовков поверх стимулирующего визуала.

Читайте также:  Как правильно использовать фоновое видео: 24 сайта в пример

Изображение стоит тысячи слов, а сколько расскажут вписанные в заголовок фото / видео. Для реализации эффекта просто используйте hero-изображение и CSS-свойства mask-image.

тренд типографики в дизайне

тренд типографики в дизайне


5. Утонченные Sans Serif’ы

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

Со времен популярности Helvetica, дизайнеры искали дополняющие легкие sans-serif шрифты. Теперь мода на них. Некоторые скажут: слишком просто. Но зачем усложнять то, что работает?

тренд типографики в дизайне


6. Гранжевые штрихи озорства

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

Тренд ориентирован на сайты с молодой аудиторией и амбициозные бренды. Гранж подойдет музыкантам и арт-ресурсам. Нужны результат и долгосрочность? Горячие заголовки трендовым шрифтом – реклама для любого бизнеса.

тренд типографики в дизайне

Крутой дизайн сайта с трендовой гранжевой типографикой

тренд типографики в дизайне


7. Брутализм

Знакомы с архитектурным брутализмом, возникшим в 1950-х – 60-х? Особая гнетущая атмосфера однообразной функциональности: четкие грани, простота и награждение бетонных плит. Брутальный сайт лишен украшений – это визуальная коммуникация со своей эстетикой. Брутальные проявления идентичности будут характерны для web среды 2020-х, яркие примеры

Тренды типографики 2020: шрифтовой брутализм

тренд типографики в дизайне

Тренды типографики 2020: шрифтовой брутализм в минималистичном дизайне сайта

тренд типографики в дизайне

Брутальная простота дизайна по французски.

тренд типографики в дизайне

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

Тренды типографики на примере брутального сайта креативного разработчика - davideperozzi.com

тренд типографики в дизайне


8. Анимированный набор текста

Мощь CSS3 и HTML5 позволяет анимировать типографику. Эффектное появление надписей выводит скучное оформление на уровень захватывающего UX.

Благодаря Web’у мы отдаляемся от печатного прошлого, так почему типографика должна оставаться неизменной? Анимации в типографской практике на удивление легко реализуемы.

тренд типографики в дизайне

тренд типографики в дизайне


9. Перекрывающая типографика

Сейчас модно «ломаной» сеткой наслаивать и перекрывать контент. Такое построение макета добавляет динамики в композиции и визуально разнообразит. Индивидуальных стратегий много, как и вариаций наложения, пример.

Перекрывающаяся типографика - актуальная тенденция в 2020 году

тренд типографики в дизайне

Перекрытие текстом перечсечения и наслоения - актуальное направление в типографике 2020 года

тренд типографики в дизайне

Перекрытие изображений надписями - тренды типографики в веб-дизайне 2020

тренд типографики в дизайне

Читайте также:  Стили и элементы современного веб-дизайна

10. Контурные шрифты

Отличная идея – привлечь внимание стильной надписью. Не случайно, контурными заголовками украшены hero-хэдеры передовых сайтов. Наиболее популярны:

  • Sans-serif
  • Крупные буквы
  • Надпись только заглавными
  • Часть заголовка жирным шрифтом, пример 1, пример 2

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

Читайте также:  Применение контурной типографики в веб-дизайне — 10 новых идей

Тренды в типографике сайтов 2020 - применение контурного шрифта

тренд типографики в дизайне

11. Закругленные без засечек

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

Тренды типографики: округлые шрифты без засечек

тренд типографики в дизайне

Тренды типографики 2020 - закругленные шрифты без засечек

тренд типографики в дизайне


12. Гибкие вариативные шрифты

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

Интерактивный сайт fontsmith.com – удобный инструмент нуждающимся в новом шрифте под креативную идею. Лайв-превью позволяет редактировать размер, стиль, толщину и в реальном времени просматривать изменения.

Вариативные шрифты - пример применения тренда на сайте variable-fonts.com

тренд типографики в дизайне


13. Креатив «не по правилам»

Почему бы в интерактивной среде не оживить типографию нарезкой надписи? На сайте агентства:

Глубокий разрез фирменного имени задает слои

Еще слой добавляют превью-плашки с тенью

А объем – боковая подсветка названий разделов

Пример креативной типографики в веб дизайне

тренд типографики в дизайне

Нестандартный подход и креативная типографика с красивыми шрифтовыми контрастами.

Нестандартное оформление сайта с типографскими креативами и красивыми шрифтами и шрифтовыми контрастами

тренд типографики в дизайне

Яркая и контрастная типографика сочетает Bold, контурный и гранжевый шрифты. Заголовки, CTA-призывы и меню только заглавными. Шрифт главного заголовка с элементом интерактива.

Типографика с элементом интерактива - тренды, шрифтовые контрасты и совмещение типографских стилей на сайте happyegg.com

тренд типографики в дизайне

С прокруткой разворачивается текст, проясняющий суть прикола.

тренд типографики в дизайне

Анимированные буквы для навигации по сайту.

Нестандартное использование типографики - буквы для навигации по сайту

тренд типографики в дизайне

Промо сайт на поддомене eCommerce конструктора: тут можно отойти от правил.

тренд типографики в дизайне


14. Кастомные шрифты

Авторская типографика будет по-эффективней «просто креативной». Кастомный шрифт укрепит имидж бренда – это беспроигрышная тактика. Но, разработать шрифт не так просто, как кажется. Повысит ли индивидуальность бренда, впишется ли в атмосферу сайта? Иначе, какой толк?

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

Тренды типографики: кастомный шрифт

тренд типографики в дизайне


15. Эффектные комбинации стилей

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

В дизайне opentr.ca два решения – округлый без засечек и выравнивание по левому краю.

Красивый пример сочетания трендов типографики 2020 года

тренд типографики в дизайне

Пример с эмоциональным бэкграундом: надпись «ручная работа» рукописным шрифтом четко и лаконично объясняет подход.

Тренды типографики 2020: красивый рукописный шрифт на сайте weareisland.com

тренд типографики в дизайне

Анимированная предзагрузка логотипа «по буквам» и перекрывающаяся типографика.

тренд типографики в дизайне

Смотрите как типографикой можно вовлекать аудиторию:

  • При прокрутке синхронно сдвигаются заголовки и СТА-элементы «от руки»
  • Микроитерация нарисованной стрелки обращает внимание на CTA-действие

Призывы и пояснения низкоконтрастным шрифтом одними заглавными буквами – не отвлекая, акцентируют внимание на последующей информации. Тренды: вертикальные надписи, перекрывающий текст и его выравнивание по левому краю.

Тренды типографики

тренд типографики в дизайне

Компактный заголовок HERO-хедера, вертикальные надписи, сериф с округлыми буквами, наслаивание текста.

Пример нескольких трендов типографики на сайте

тренд типографики в дизайне

Сайт креативного агентства: иллюстративный элемент в центре обрамляют горизонтальные и вертикальные надписи. Много web и типографских трендов.

тренд типографики в дизайне

Яркая и лаконичная айдентика LIMELY задается шрифтовым логотипом с лаймовым градиентом.

Градиентная типографика – продолжение тенденции на «радужное» оформление сайтов цветными шрифтами, палитрами, мягкими приглушенными / насыщенными двухцветными переходами

Разделы оформлены модной типографией с индивидуальным окружением. Это вырезы в слое градиентного затемнения, анимированный набор, перекрывающий и вертикальный текст.

Пример трендового сайта с красивой типографикой

тренд типографики в дизайне

Фирменный стиль Bolden начинается с доменного имени и коренастой Болд-типографики. Лаконично показали свое отличие – надежность & открытость. Как раз это настроение создает жирный и низкий закругленный шрифт. В дизайне страниц вертикальный, перекрывающий текст.  

Тренды типографики

тренд типографики в дизайне

Сайт AR/VR студии применяет контурный шрифт, градиенты в литерах надписей, заголовки заглавными буквами, типографский интерактив.

Тренды креативной типографики

тренд типографики в дизайне

Подводя итог 

Золотые времена, чтобы отойти от шаблонного оформительства. Чем дальше дизайнеры отодвигают рамки общепринятого, тем становится интереснее. Шрифтовые композиции и типографские техники делают сайт запоминающимся. Небольшая корректировка цвета / размера влияет на читабельную эстетику и значимость надписи. Когда креативщики 2020-х станут удивлять рынок, просто проследите на своих экранах – на что способна типографика.