сайты с хорошей типографикой
Полезные ресурсы для изучения типографики и дизайна шрифта
Архивы, коллекции, блоги.
● Журнал и издательство Шрифт — лучший ресурс о шрифтах и типографике на русском языке. Начните с раздела «история».
● Глоссарий Паратайп / Paratype, крупнейшего в России шрифтового магазина.
● Typomania Festival, который нужно посещать и следить за именами в лайнапе.
● Журнал на сайте магазина шрифтов Type.today: новые шрифты, интервью с шрифтовыми дизайнерами.
● Incredible Types — сайт с очень хорошей типографикой в готовых проектах.
● Typo/Graphic Posters — большая коллекция типографических постеров.
● Образовательный центр дизайна и типографики имени Герба Любалина — архив-наследие великого графического дизайнера.
● AIGA Eye on Design — cамый передовой блог о дизайне, читать категорию Typography.
● Book cover archive — уже не обновляемая, но большая коллекция примеров дизайна книжных обложек.
● Klim Type Foundry — блог на сайте новозеландской шрифтовой дизайн-студии.
● Type Directors Club — новости международной ассоциации шрифта.
Глоссарий Паратайп / Paratype, крупнейшего в России шрифтового магазина
Проверьте ссылку, она ведет на пустую страницу. Корректная ссылка: https://rus.paratype.ru/catalog-chapter/a
Это связанно с багом при копировании ссылки
Пока работаю с договорами по найму(аренде) квартир. В статье расскажу, кто я такая и что умею.
Что делать, если вы нашли идеальный логотип или изображение для презентации, но у нее есть задний белый фон. Обрезать фон с помощью Photoshop? Долго! С помощью MS PowerPoint? Неэффективно. К примеру, встроенная в MS PowerPoint функция удаления фона вместо фона на изображении удалила зеленые значки.
= новый формат космического дайджеста от Venture Club.
Подпишитесь на канал и поставьте лайк статье, чтобы 11 ноября получить расширенную версию исследования и инфографики бесплатно!
Согласно опросу сервиса «Работа.ру» четверть работающих россиян хотели бы всегда трудиться из дома.
Помогут сформировать «зелёные» привычки и справиться с экотревожностью.
Привет! Меня зовут Александра Лоскот, и я редактор лектория Сигнум. Расскажу о том, как правильно организовать работу, все успеть и при этом не выгореть.
Методики конспектирования лекций, совещаний и книг в материале издания Reminder.
Директор по логистике ПГК Михаил Петров рассказал о том, почему логисты должны быть профессиональными коммуникаторами и «жадинами».
10 вдохновляющих сайтов со смелой типографикой
Тяжелая типографика была заметной тенденцией на протяжении всего 2018 года. Беря пример с Apple, впервые установившей начальную тенденцию на мобильном телефоне с выпуском iOS 10, веб-дизайнеры начали быстро развивать направление новыми и творческими способами. Поскольку Apple продолжает выпускать тяжелую типографику почти во всех своих приложениях для iOS, тенденция, похоже, останется на некоторое время.
Результаты тяжелой, выразительной типографики часто визуально впечатляют и могут добавить некоторые интересные и динамичные аспекты на веб-сайт. В этой статье мы рассмотрим некоторые из самых креативных реализаций тяжелой типографики в веб-дизайне в 2018 году.
Gregory Maslov
Портфолио Грегори Маслоу использует большой решительный слоган, набранный шрифтом с засечками на фоне яркого и сфокусированного фонового изображения.
Havaianas
Игривый, летний дизайн Havaianas использует большую тяжелую типографику с подчеркнутым интервалом и уникальными цветовыми наложениями на базовые узоры.
KOTI Sleepover
Простой дизайн домашней страницы KOTI – одна из самых тонких, но эффективных реализаций тяжелой типографики. Минимальный иллюстрированный стиль прекрасно контрастирует с большим, черным выразительным шрифтом.
Humaan
В одной из самых уникальных реализаций, Humaan применили графический дизайн для каждой из тяжелых букв составляющих слово “digital”. Это очень творческий подход и он был выполнен великолепно.
Work&Co
Work&Co использует чрезмерно большой и тяжелый шрифт с засечками, чтобы выделить статистику и данные вокруг своей компании.
GHAFARI
GHAFARI используют красивые заглавные буквы. Текст перекрывает изображение для полубрутального эффекта и отлично контрастирует с золотой и белой цветовой гаммой.
Super16
Супер 16 заполняет весь главный раздел собственным названием. Тяжелая и уникальная типографика, которая вырезает 90-градусные секции букв, поддерживается тщательно отобранной серией дизайнов на фоне.
Huge использует сочетание тяжелых шрифтов без засечек вместе с легкими курсивными шрифтами с засечками. Он создает впечатляющее сопоставление и особенно эффективен против смелого розового цвета, который формирует основной раздел сайта.
Shopify Credit Card Reader
Shopify использует тяжелую, но тонкую типографику за своей фотографией продукта, чтобы выделить основную точку продажи.
UNFOLD
Новая домашняя страница UNFOLD использует некоторые очень тяжелые шрифты над основным разделом. Они красиво контрастируют с затемненным заполненным портфолио на фоне.
Хорошие, плохие и отличные примеры веб-типографики Статьи редакции
Куратор ресурса о шрифтах Typewolf Джереми Шоаф выбрал примеры сайтов с интересными шрифтовыми решениями и описал их преимущества и недостатки.
Digital-агенство Red Collar подготовило для рубрики «Интерфейсы» перевод заметки Шоафа.
Выбор начертания шрифта — неотъемлемая часть каждого веб-проекта на этапе дизайна. Сейчас самое удобное время быть дизайнером, помешанным на типографике. Есть тысячи начертаний в открытом доступе на таких ресурсах, как Typekit, а также на постоянно пополняющихся сборниках бесплатных шрифтов.
Можно смело заявить, что ничто не влияет на дизайн больше, чем типографика. А хорошая типографика начинается с выбора подходящего начертания шрифта. Но наличие слишком большого выбора может и навредить, не так ли? С большим выбором мы получаем больше возможностей для плохих решений. В этой статье мы рассмотрим несколько интересных сайтов и проанализируем, как выбор начертания шрифта повлиял на дизайн в целом.
Я буду критичен как к плохим решениям, так и к хорошим. Конечно, моя оценка субъективна, поэтому отнеситесь к ней с некоторой долей скепсиса.
Vesper Hotel
Новозеландский дизайнер шрифтов Крис Соверсби на сайте Vesper Hotel использует Domaine Display, витиеватый и богато украшенный экранный шрифт, в комбинации с Proxima Nova. Хоть Proxima Nova, возможно, один из слишком часто используемых веб-шрифтов последних нескольких лет, подбор ему в пару чего-то менее заезженного — например, Domaine Display — может освежить дизайн и сделать его отличным от других.
Мне также очень нравится, когда бренд умеет использовать выбранный веб-шрифт для своего логотипа. Это радует как раз ту половину моего мозга, которая отвечает за разработку, так как такой логотип может быть сделан в стиле CSS, прочитан скринридером и масштабирован — загружать изображение совсем не нужно.
Dragone
Использование шрифта на фоне совершенно роскошных текстур, как здесь, заставляет меня сильно сожалеть, что flat design — настолько преобладающий тренд. Сайт Dragone смотрится, как картина, и элегантный Playfair Display в данном случае — идеальное начертание. Playfair Display в курсиве особенно красив, и сайт отлично это демонстрирует. Классический гротесковый геометрический Futura используется также, обеспечивая прочную основу рядом с ярким Playfair Display.
Иногда, если текст расположен поверх изображения, страдает его разборчивость. Однако, дизайнеры этого сайта хорошо позаботились и гарантировали адекватный контраст, достаточно затемняя фотографии, чтобы шрифт выделялся. Моя единственная придирка — использование Playfair Display в качестве основного текста — этот высококонтрастный экранный шрифт не подходит для больших отрывков текста.
И всё же, количество текста на сайте достаточно невелико, и тогда не составляет большого труда его прочитать. Georgia — уже привычный шрифт с похожими характеристиками, поэтому он мог бы быть использован в качестве более читабельного напарника Playfair Display.
Romain Balcerak
Tiempos Text — ещё одно начертание от Криса Соверсби. Здесь используется вместе с Sentinel, брусковым шрифтом от Hoefler & Co. Apercu, орнаментированный и гротесковый шрифт из Colophon Foundry, дополняет получившийся набор.
Использование трёх начертаний иногда может быть чересчур, но Romain Balcerak выдержан в последовательной схеме, что удерживает дизайн в гармонии. Tiempos Text установлен жирным для заголовков; Sentinel всегда курсивный для подзаголовков; и Apercu используется везде для основного текста.
Rails Assets
Adelle Sans и Whitney — два шрифта без засечек с отчасти похожими характеристиками: оба гротесковые с гуманистическим уклоном. Комбинация двух схожих начертаний — определённо неординарное решение. Похоже, будто дизайнер не смог выбрать какой-нибудь один шрифт, поэтому использовал оба.
Если назвать это решение преступлением против типографики, то я посчитаю его незначительным. Использование шрифтов последовательное — Adelle Sans для заголовков и Whitney для всего остального. Дизайну трудно выглядеть ужасно с начертаниями, которые были так хорошо скомпонованы.
Dollar A Day
Я сделаю далеко не спорное заявление: Apercu — сейчас самый трендовый шрифт в вебе. На моём стороннем проекте Typewolf есть много сайтов, использующих Apercu. В действительности, на сайте это третий по популярности шрифт, и я до сих пор сталкиваюсь со многими сайтами, выбравших Apercu, но они только не отражены на Typewolf. Очевидно, несколько сайтов с этим шрифтом появляются буквально каждый день.
Моё предположение таково, что Apercu и другие похожие «орнаментированные и гротесковые шрифты» импонируют дизайнерам, потому что спустя годы использования Helvetica в вебе этот стиль начертания гордо заявляет: «Я не Helvetica».
Итак, если бы сайт Dollar A Day использовал Helvetica, его дизайн мог бы показаться холодным и лишённым своеобразия. Но с Apercu он мгновенно становится весёлым, живым и уникальным. Конечно, свежесть теряется, когда каждый сайт выбирает одинаковое начертание. Но прямо сейчас Apercu всё ещё смотрится интересно.
New Venture Scouting
New Venture Scouting — сайт с кучей хороших вещей в типографике, но есть ощущение, что во взаимодействии дизайна и разработки что-то пошло не так.
На первый взгляд, шрифт с засечками Jubilat отлично смотрится с Open Sans на главном слайде с путешественником. Тёплый и витиеватый брусковый шрифт в сочетании с деловым гуманистическим держит курс на основательный брендинг. Однако, при близком рассмотрении вы заметите, что другой шрифт без засечек Proxima Nova используется для навигации. А потом ниже идёт Arial для основного текста. Если вы уже прибегли к Open Sans, то почему не взять его и для основного текста? У этих шрифтов же разный вес. Почему для навигации нужно начертание без засечек другого семейства?
Остаток сайта, видимо, является случайным миксом Jubilat, Proxima Nova, Open Sans and Arial без чётко обозначенного предназначения для каждого. Такой случай несогласованности обычно происходит, когда несколько дизайнеров работают над одним сайтом, но над разными страницами. Создание руководства по стилю в начале проекта обычно предотвращает появление подобных проблем.
Над этим проектом несомненно работали талантливые дизайнеры, и на сайте есть много чего, чем можно восхищаться. Но непоследовательное использование четырёх семейств начертаний не смотрится хорошо.
United Strands
United Strands использует только одно начертание, Montserrat, чей шрифт находится в открытом доступе на Google Fonts. Его популярность многим обязана сходству с самыми популярными платными начертаниями последнего десятилетия Gotham и Proxima Nova. Несмотря на то, что у него есть сходства с этими двумя начертаниями, я думаю, что у него есть свой уникальный дизайн с отличительными признаками.
Единственный недостаток Montserrat — у него нет курсива. И если вы основной текст поставите в шрифт без курсива, всё закончится искусственным курсивом. Хотя текста на этом сайте достаточно мало, и я нашёл только несколько кейсов, где так происходит. Поэтому, это не столь заметно, но правильной типографикой данный кейс сложно назвать. Так или иначе, гротесковые шрифты с искусственным курсивом получаются лучше, чем латинские. И всё же дизайнеры проделали большую работу, выжимая максимум из одного шрифта с ограниченным количеством стилей.
Текстовые элементы в кейсе выше имеют большие межбуквенные интервалы, чем обычно. Это всегда хороший признак, обилие белого пространства даёт шрифту свободу дышать, а глубокий тон создаёт сильный контраст.
Norwegian Rain
На сайте Norwegian Rain классический геометрический гротесковый Avenir идёт вкупе с Freight Text. В прошлом году Avenir по результатам опроса стал любимым шрифтом многих ведущих дизайнеров. Слово ‘avenir’ во французском означает «будущее» — легенда типографики Адриан Фрутигер взял геометрические принципы шрифта Futura и добавил тёплые и органичные элементы для создания Avenir. Неудивительно, что он так предпочитаем теми, кто искренне ценит типографику.
У Freight Text есть характерный курсив, который отлично идёт в паре с опрятными линиями Avenir. Вообще, на сайте используется только курсив семьи начертаний Freight Text. Это держит систему текста в постоянстве, а также уменьшает время загрузки страницы.
Высота строки текста футера смотрится немного тесной. В остальных случаях это отличный сайт с хорошей типографикой.
Pelican Books
Сайт Pelican Books использует другое крайне популярное среди дизайнеров начертание Brandon Grotesque. На самом деле это особая текстовая версия Brandon Grotesque, называется она Brandon Text. Обычная версия Brandon Grotesque больше предназначена для экранного текста и меньше подходит для больших отрывков текста. А у Brandon Text более крупное очко и он больше оптимизирован под основной текст.
Интересно, что на этом сайте Brandon Text используется больше в качестве экранного текста, чем основного, который стоит в Freight Text. Brandon Text всё равно хорошо смотрится в больших размерах, но он не очаровывает так, как оригинальный Brandon Grotesque, из-за своей мягкости и консервативности. Freight Text один из самых чётких латинских шрифтов, так что это превосходный выбор для больших отрывков текста в разделе Read Online.
В сочетании с тонкой бумажной текстурой данная типографика создаёт ощущение, будто читаешь книгу.
Simply Gum
Спасибо веб-шрифтам, помогающим подогнать типографику упаковки продукта к типографике сайта производителя. Это происходит всё чаще и чаще. Сайт Simply Gum выбрал Gotham начертанием своего бренда, что сохраняет идентичность постоянной и на онлайн, и на офлайн каналах.
Этот сайт — хороший пример того, как только одно начертание иногда является единственным нужным. Используя разную насыщенность Gotham и ставя заголовки в верхнем регистре, Simply Gum установил чёткую иерархию всего с одним начертанием.
Логотипы в заголовке и футере стоят в формате PNG, таким образом они теряют чёткость и масштабируемость веб-шрифта. Использование веб-шрифта для логотипа не всегда осуществимо, особенно если вам нужен хороший контроль над кёрнингом; однако, изображение в SVG подойдёт в этом случае лучше, чем PNG, потому что оно может масштабироваться и при этом сохранять свою чёткость.
Краткий вывод
К счастью, примеры выше продемонстрировали, как определённые решения в типографике могут повлиять на дизайн. Вот вам несколько ключевых мыслей:
Подбор типографики для сайта
Техническая предыстория
С середины девяностых, когда Netscape представил тег для изменения шрифта текста (сейчас устарел), веб-мастеры пытались использовать нестандартные шрифты на своих веб-сайтах с определенным успехом.
На протяжении всей истории интернета и по мере появления новых технологий, можно выделить несколько стадий развития типографики. Сначала использовались обходные пути, например картинки вместо текста, постепенно это сменилось решениями на Flash и CSS, а также Javascript.
В настоящее время доступны разные инструменты и технологии, например шрифты Google (бесплатно) или Adobe Typekit (доступно по подписке), которые намного упрощают внедрение пользовательских шрифтов на сайт. Более того, существуют онлайн-конструкторы и редакторы, такие как Breezi, Squarespace и Moonfruit, которые могут сделать всю работу за вас, сгенерировать код и предоставить вам готовое решение.
Читаемость шрифта превыше всего
Первое, на что стоит обратить внимание — читабельность шрифта, который вы выбираете. Может возникнуть искушение выбрать шрифт по его внешнему виду, и, конечно, внешний вид важен, но вы всегда должны помнить основную причину, зачем вы публикуете материал на сайте — посетители должны быть в состоянии прочитать то, что вы опубликовали.
Поэтому, если шрифт сложно прочитать, нет смысла его использовать. Цель публикации, которая содержит в себе текст — доставить сообщение читателю. Если появятся какие-то трудности, сообщение не будет доставлено. Лучше отказаться от стильного, но нечитаемого шрифта, чем рискнуть, что ваши посетители не смогут понять, что вы хотите сказать.
Начните с типографики основного контента
Вероятно, часть страницы, на которой будет сосредоточено внимание пользователей — это текст основного материала. Там они потратят наибольшее время, читая вашу статью, или что-либо другое, просто потому, что это самый длинный текст на данной странице.
Поэтому, советуется не использовать сложный, нестандартный шрифт. Подойдет любой sans serif, «безопасный для web» (об этом чуть ниже). Основной текст это как раз то место, где предыдущий пункт — читабельность — является наиболее важным.
Также стоит подумать о размере шрифта. Каждый шрифт может иметь разные значения и вариации размеров, поэтому нельзя утверждать, что есть размер, который подходит для каждого шрифта, но примерно 14-16 размер может сработать отлично.
Шрифт для заголовков
Заголовки также важны, потому что они будут начальной точкой для больших объемов текста. Так происходит потому, что люди «сканируют» страницы в интернете, а не читают каждую строчку с начала и до конца.
И заголовки, которые показывают, что будет говориться дальше, и маленькие блоки текста, не предъявляют так много требований к типографике, следовательно у вас есть больше свободы для действий. Для заголовка вы можете позволить себе более искусный и сложный шрифт.
Еще, крупный шрифт проще прочитать, у вас будет больше свободы в выборе шрифта, если вы используете шрифт покрупнее.
Также, если вы используете нестандартный шрифт, вам может понадобиться как-то указать правильный шрифт для ваших заголовков. Например, если вы используете решение на Javascript для отображения шрифта на вашем сайте (например Google Fonts, Adobe Typekit или Cufon), это замедлит скорость загрузки вашего сайта. И чем больше шрифта Javascript должен будет отрисовать, тем медленнее станет ваша страница. Это еще одна причина, почему стоит избегать нестандартных шрифтов в основном тексте.
Как уже упоминалось, для шрифтов не существует стандартных размеров, но если хотите, можете попробовать 32-34 размер для H1, и снижать этот параметр для заголовков следующих уровней, потому что не должно быть текстов больших, чем основной заголовок.
Еще нужно упомянуть, что вы должны подчеркивать иерархию, так что заголовки должны выделяться из обычного текста. Это можно сделать разными способами, но самый простой, используемый наиболее часто, и рекомендуемый — сделать их крупнее обычного текста. Вы также можете выделить их жирным шрифтом, другим цветом, добавить фон или картинку и так далее.
Двух шрифтов хватит!
Если вы используете слишком много разных шрифтов, есть опасность сделать сайт непоследовательным. Такой сайт может больше запутывать, чем разъяснять что-то. Возможно, у такого стиля и есть какая-то цель, но если вы не сможете грамотно реализовать ее, лучше просто избежать такого.
Конечно, «правила придуманы, чтобы их нарушать», и вы можете попробовать воспользоваться тремя или больше шрифтами, и у вас будут хорошие результаты. Но, в общем, всего двух шрифтов может быть достаточно практически для любой цели.
Например, один шрифт может быть использован для стандартного текста, а другой для заголовков или других выделенных элементов.
Категории шрифтов
Гарнитуры можно разделить на две основные категории: с засечками (Serif) и без засечек (Sans serif). Засечки представляют собой небольшие элементы на концах штрихов букв.
Также существуют другие категории, например «Script», «Blackletter» или «Mono», но они не используются так же широко, как предыдущие.
Шрифты, «безопасные для web»
«Безопасный для web» — это термин, используемый для описания доступных элементов, или, другими словами, «безопасный» для использования в интернете. Он применяется не только к шрифтам, но в этом контексте особенно, он относится к шрифтам, которые установлены на большинстве компьютеров (PC и Mac).
Они могут применяться на вашем сайте без каких-либо хаков, методов замены или скриптов и будут правильно отображаться на всех компьютерах (как минимум тех, которые подключены к интернету).
Приведу небольшой список «безопасных» шрифтов:
Без засечек:
С засечками:
Другие заметки
Также доступны другие способы форматирования текста, которые вам нужно учитывать, настраивая шрифт. Даже если у вас есть очень хороший шрифт, легко читаемый и отлично подходящий к вашему дизайну,, все впечатление от сайта может быть испорчено, если не настроено расстояние между буквами или высота строки.
Эти две характеристики могут сделать текст более читаемым. Они также могут быть использованы для достижения определенного эффекта, например сделать буквы более сжатыми, что может улучшить ваш дизайн. Пока они остаются читаемыми, это приемлемо.
Примечание относительно длины строк в блоках с текстом: советуется (хотя это и не строгое правило), чтобы на каждой строке было по 45-75 символов. Если строка будет слишком короткая, это замедлит скорость чтения текста. Если строка содержит слишком много знаков, становится очень легко потерять строку, которую читаешь, переходя к следующей.
Выводы
Из всех правил, перечисленных выше, наиболее важное — читаемость текста. Как подчеркивалось на протяжении всей статьи, никакое из остальных привил не должно считаться нерушимым. Вы можете пробовать экспериментировать или спрашивать отзывы у дизайнеров или любого обычного пользователя.