Миру веб-дизайна пришлось пройти через довольно длительный процесс «внедрения» типографических эффектов на сайты. Несколько лет назад это было еще невозможно из-за недостаточного развития технологий, а браузеров, поддерживающих такого рода эффекты, было чрезвычайно мало. К счастью, ситуация изменилась, и теперь мы можем наслаждаться бурным развитием творческой деятельности в отношении веб-типографики и коммуникации, при котором по-прежнему сохраняется высокий уровень читабельности. За последние несколько месяцев появилось множество новых шрифтов, стилей оформления и hover-эффектов, а иконки и эмодзи стали еще чаще использоваться для усиления экспрессивности текста.
Жирные и hero-шрифты
Использование жирного начертания — это тренд, благодаря которому тексты приобретают индивидуальность, а изображения перестают быть центральными элементами дизайна. Творческое использование типографики становится центром внимания и в значительной степени вытесняет hero-изображения и видео — мультимедийные элементы, которые зачастую могут помешать комфортному просмотру сайтов на мобильных устройствах.
Засечки вернулись!
Да, засечки стары как мир. Однако, они смогли прорваться обратно и практически заняли центральную позицию в трендах, насколько, что теперь никто и не думает, что они являются пережитком прошлого: жирный шрифт + засечки = 2018. Так что смахните пыль с замечательного Clarendonа, он вам еще пригодится!
Экспрессивная типографика в интерфейсах со сломанной сеткой
В рамках творческого использования типографики мы видим, что на смену рукописным шрифтам приходят иллюстрированные и 3D-шрифты, а также обрезанные и обработанные гарнитуры с анимированными и более «живыми» буквами. Что касается интерфейса, в этом году мы без колебаний покончим с основанными на классической сетке лейаутами и позволим текстам перенять композицию, близкую к журнальному дизайну. Не стоит забывать, что ситуация сложилась таким образом отчасти благодаря постепенной стандартизации Flexbox и CSS Grids, которая будет набирать обороты все сильнее, и она будет еще больше развиваться с появлением вариативных шрифтов.
Hero-шрифты и большой кегль в абзацах
Тексты на сайте играют не только визуальную роль — они выражают индивидуальность продукта, будучи составляющей частью «голоса и стиля» коммуникации. И сейчас мы смешиваем все визуальные ресурсы, которые имеются под рукой, включая иконки, эмодзи, пиктограммы, аудио и наложение изображений. Текстовая часть начинает играть такую важную роль, что абзацы становится ключевым элементом страницы, и иногда в размере бывают не меньше заголовков.
«Горе-творец»
Пиктограммы, иконки и эмодзи украшают наши абзацы
Есть много типичных (и не очень) способов украшения текста, которые могут прекрасно сочетаться в одном и том же абзаце: например, для высказывания или усиления какой-то идеи можно использовать классическое подчеркивание или курсив разной насыщенности. Все это, наряду с многочисленными и самыми разнообразными и оригинальными ховерами, разноцветными подчеркиваниями, контурными шрифтами, изменениями в типографике, переключением между засечными и беззасечными шрифтами (даже в рамках одного предложения), пиктограммами, иконками и эмодзи, теперь разбросано по всему тексту для достижения семантических и декоративных целей. Желаемый результат — сделать текст более динамичным. Комбинировать такие приемы можно бесконечно; многие из них являются результатом визуальных экспериментов веб-дизайнеров, работающих в направлении брутализма и максимализма.
Эволюция абзацев в веб-дизайне
Размер шрифта и размер текстового блока в последние несколько месяцев так стремительно увеличивались, что мы не смогли устоять и сделали таблицу, которая иллюстрирует эволюцию абзацев в истории веб-дизайна.
Эволюция абзацев в веб-дизайне
Тренды в типографике 2018
Здесь собраны некоторые тренды в типографике, которые мы еще увидим в 2018 году.
Интернет-магазин Marsell (Типографика в веб-дизайне)
DRÔLE DE MONSIEUR (Типографика в веб-дизайне)
The phoenix studio (Типографика в веб-дизайне)
Excessocenus (Типографика в веб-дизайне)
Masonry gallery (Галереи изображений и слайдшоу)
Анимированная типографика от Uncanny Valley Studio (Брутализм)
Анимация шрифта, Souffle (Типографика в веб-дизайне)
Портфолио Макса Каплуна (Вдохновение типографикой)
Навигация по проектам Бена Минго (Лучшее из навигации)
Портфолио Эдгара Козловского (Типографика в веб-дизайне)
Структура абзацев, A message from Earth (Вдохновение типографикой)
Типографика в интерфейсе, Cream Co. (Типографика в веб-дизайне)
Интерфейс, основанный на типографике и приятные шрифтовые стили (Ховеры, курсоры и приятные взаимодействия)
Динамичная типографика (Типографика в веб-дизайне)
Hero-шрифт, ONE&ALL (Типографика в веб-дизайне)
Список создателей (Типографика в веб-дизайне)
Размер шрифта в абзацах (Типографика в веб-дизайне)
Жидкий hero-шрифт (Типографика в веб-дизайне)
Анимировання типографика (Страницы о команде разработчиков и процессе создания)
Система дизайна Dropbox (Типографика в веб-дизайне)
Одностраничный интерфейс с сеткой (Интерфейс)
Текстовые эффекты (Галереи изображений и слайдшоу)
Places of intimacy (Сайты дня)
Типографика, выбор пункта меню при скроллинге (Типографика в веб-дизайне)
Анимированная типографика в портфолио (Типографика в веб-дизайне)
Сумасшедшая анимация шрифтов / Laurel Halo (Дизайн, сфокусированный на типографике)
Ховер со звуком (Ховеры, курсоры и другие связующие элементы)
Tennent Brown Architects (Сайты дня)
Анимация типографики с вращением (Типографика в веб-дизайне)
Райан Дж.Хаббард (Дизайн и интерактив)
Плавные текстовые переходы (Переходы)
Летающие буквы (Типографика в веб-дизайне)
Сломанная сетка (Типографика в веб-дизайне)
Типографика в анимации при загрузке (Анимации при загрузке)
Заголовки, которые можно скроллить (Типографика в веб-дизайне)
Анимированное лого (Детали сайтов дня)
Эффект расширения в типографике (Типографика в веб-дизайне)