Если вы когда-нибудь замечали, что некоторые интернет-проекты, кажется, что просто светятся от своего лоска и шарма, что они популярнее ваших творений и творений даже именитых мастеров, то… не стоит даже расстраиваться. Некоторые веб-дизайнеры просто имеют определенное чутье при проектировании сайтов, поэтому им особо легко удается создать каждый новый проект уникальным и еще к тому же подобрать ошеломляющую типографику.

Но в действительности каждый из нас тоже способен на такое. С небольшой толикой простых правил можно значительно улучшить внешний вид дизайна и оформления отельных элементов сайта. Даже больше, не только в веб-дизайне, но и полиграфии. Все эти правила на слуху и о них говорят часто, но почему-то, когда дело доходит до реального воплощения собственных идей, о них сразу забывается или начинает казаться, что их использование совсем неуместно. Но если вы действительно испытываете проблемы с подбором и нахождением идеального варианта сочетания шрифтов и стилей, то все же стоит обратить внимание на наш материал.

Мы, разумеется, не стремимся пересказать давно известное. Тем более, о некоторых вещах мы уже рассказывали в течение года (ссылки будут в статье). Но взглянуть на интересные идеи воплощения правил совершенной типографики веб-дизайнерами – интересно и желательно.

Цели проекта

Хорошая типографика начинается с твердого и четкого понимания того, для чего создается сайт и проект в целом. Прежде чем сразу «бросаться сломя голову» изучать наборы Google Fonts или TypeKit, стоит попробовать ответить на вопросы:

  • Что дизайнер (вы) старается достичь своим проектом?
  • Как пользователи должны будут взаимодействовать с дизайном сайта?
  • Где находятся точки конверсии?
  • Каково настроение сайта?
  • Нужно ли скоординировать свои замыслы с другими проектами бренда или заказчика?

И начнем с laclairiere.design, primitivance, nove, Ingphi, sbs, viennesemodernism2018

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

Найти подобия и соответствия

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

Найдите тот образец, что вам интересен и нужен. Это может быть начертание или общий вид. А затем достаточно подобрать тот шрифт, что его дополнит, но при этом будет обладать аналогичными формами. То есть, суть не найти разные шрифты, а найти дополняющие друг друга, чтобы вместе они смотрелись как единое целое; чтобы приходила в голову мысль: «и  почему сразу не создали один вот такой красивый набор?»

В качестве примеров посмотрите на сочетания шрифтов  на Open Wear, Pivot Design Happy Holidays, Academy of Architecture, buysellads, cellierdeschartreux

 

 

Можно задаться вопросом, на что обращать внимание конкретно? У каждого веб-мастера своя методика. Но вот что интересно и удобно к тому же:

  • Нижний регистр «о» в каждом семействе шрифтов. Форма буквы бывает или овальной или круглой, а потому все буквы с такой формой разительно отличаются друг от друга.
  • Сочетание жирного и обычного написания – нормально, но жирного или обычного с тонким – еще лучше. Тонкий, вообще, способен на большее, чем обычный.
  • Обращайте внимание на «х-высоту» в шрифтах, то есть высоту строчных букв. У всех она разная и это придает контраста. Но приглядитесь к сочетаниям шрифтов с одинаковой «х-высотой». Иногда можно придумать весьма интересные вариации.
  • Смешивайте и сочетайте разные стили шрифтов. Например, изучите комбинацию с засечками serif и sans serif. При этом один всегда должен быть очень простым, а другой сложным. Простой применяется для основного текста, а сложный – в исключительных местах, для привлечения внимания.
  • Курсивный и наклонный также может таить секреты в букве «о». Единственное, чего следует избегать – если курсивное начертание и наклонное в разных шрифтах направлено в разные стороны. Если у вас буквы одного шрифта наклоняются слева направо, то у второго наоборот никак не могут.

Определение размера шрифта по шкале

Размер надписи может «убить» проект, может сделать его менее интересным или, наоборот, приятным взору. Мы уже обращали внимание на большие заголовки. Смысл, разумеется, не в создании букв высотой во весь экран монитора РС. Слишком большой текст приводит к неестественному восприятию его при чтении. Человек начинает делать много пауз, останавливает взгляд. Хотя стереотипность и предубеждения гласят о том, что, чем крупнее – тем виднее. С другой стороны, маленький текст вынуждает читателей напрягать глаза, что приводит, так или иначе, к их уходу с сайта.

Вот некоторые интересные идеи: The Architect Paris, lensabl, znaturydoskonale, conebio, elevenandsun, quad

 

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

Но как пользователь воспринимает текст на сайте? Что для него важно?

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

Направление чтения

В русском языке, как и во многих иностранных языках, принято читать и писать слева направо. Поэтому считается, что выравнивание по левому краю идеально для оптимизации читабельности отдельных блоков.

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

Но также стоит помнить и задумываться, что существуют проекты, ориентированные исключительно для тех языков и регионов, где чтение происходит справа-налево. Мы об этом тоже в свое время поговорим…

 

Два семейства шрифтов

Вероятно, всем уже надоело слышать и читать о том, что в веб-дизайне и полиграфии необходимо использовать только два вида шрифта и все. Никак иначе, и вообще, да сколько же можно об одном и том же? Вот только вы, читатели, может и удивитесь, но если посмотреть на самые разные сайты в интернете, то можно заметить, что веб-дизайнеры пренебрегают этим и используют или один шрифт, или три и больше.  Пример ниже наглядно это и демонстрирует. Он красивый, интересный, но идет вразрез с правилами типографики. Речь идет о magicoflapland.

Если вы собираетесь тоже нарушить это правило, то подумайте еще раз, и еще. И не о том: хорошо это или плохо, нужно или нет. А над тем, чего вы планируете добиться путем добавления еще одного шрифта? Поверьте, гораздо проще подробно изучить стили тех двух, что уже есть.

Посмотрите на Zero Studios, Alef, Domaine Jessiaume, project-redspace, terracap, open-uniqlo

 

Альтернатива шрифту

Существуют такие дизайнеры, которые стараются изменить буквы. Все.  Изменить даже вид надписи. Они скручивают её, наклоняют гарнитуру, растягивают буквы, превращая «о» в нечто вида плоского бублика и многое иное.  На это уходит много времени, но не всегда приносит результат, поскольку зачастую человеку сложно прочитать непривычное ему написание букв. Более того, повреждение букв приводит к распаду целостности шрифта и его вид получается слишком уж пиксельным при увеличении.

Исключением может стать, например, проект hyperverve, где несмотря на искажение надписи, есть возможность прочитать её в целостном виде.

Впрочем, совсем иначе дело обстоит с буквицей или первой буквой. Её допускается стилизовать и если по стилю и тематике проекта такое подходит, то читателям такой вариант оформления текста даже нравится. Но в любом случае, изменять букву следует острожно, не меняя её формы. Украшать, но не менять овал на квадрат или эллипс.

Примеры, что мы подобрали: surrealistgame, mellowselfhelptherapy, hondamotoglobal, hashima-island

 

Мобильность и контраст

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

Касается это и момента размещения текста поверх изображений. Если между буквами и фоном нет контраста, то прочитать текст навряд ли будет можно. Светлое и темное создают контраст, но множественные детали сцены на фотографии просто поглотят строчные буквы, каким бы шрифтом и размером они не были написаны. Поэтому такие детали должны быть приглушены, затонированы. Подробнее о вариантах сочетания и идеях использования текста и изображений в веб-дизайне мы рассказали тоже отдельно в течение 2017 года.

Но, несмотря на это, вот еще яркие примеры: Domaine Jessiaume, Academy of Architecture, cacpro, tondo (текст просто слился с фоном, увы), terracap, open-uniqlo, Ingphi

 

Палочка-выручалочка

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

Создавайте копии веб-макета и разместите их в интернете. А затем, делая какие-либо изменения в дальнейшем в своей работе, открывайте копии и сравнивайте, что было и что стало с тем, что было в промежутках. Разложите все копии в хронологической последовательности и задайтесь вопросом: «Как вы изменили типографику за время работы с ней. Добились ли вы совершенства в её дизайне»?

Вывод

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

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

Мы не стремились сегодня «открыть Америку» повторно. Но решили немного напомнить о том, что даже такими простыми и немного «избитыми» правилами пренебрегают даже именитые веб-дизайнеры, хотя и создают потрясающие проекты. Но для такого нужен очень большой опыт, талант, чутье художника. Как и в искусстве. Художников много, шедевры получаются из единичных работ. А ведь создать хороший веб-дизайн и довести до совершенства уже созданное так просто, когда вспоминаешь основы и находишь яркие идеи их применения.