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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. Брутализм

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Глубокий разрез фирменного имени агентства задает слои. Еще слой добавляют превью-плашки с тенью, а объем – боковая подсветка названий разделов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подводя итог

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

Источник