Типографика: процесс выбора шрифта. Сколько мне будет стоить шрифт? Используйте шрифт с засечками для длинных текстов

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

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

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

В гайдлайнах обычно указывается вся иерархия шрифтов, которые используются при создании фирменного стиля бренда. Эти правила можно сразу же интегрировать в свой дизайн. Если другой бренд использует какой-либо неизвестный вам шрифт, можно воспользоваться инструментом «WhatTheFont» на сайте Myfonts.com. Это поможет вам его идентифицировать.

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

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

У вашего бренда еще нет фирменного стиля и шрифта?

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

1. Учитывайте целевую аудиторию

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

Разные аудитории — разный дизайн, в том числе и шрифт

Как только вы ответите на вопрос об аудитории, у вас будет понимание стиля. Основываясь на этой информации, вы сможете правильно подобрать шрифт для своего лендинга.

Скажем, вы — владелец винтажного магазина одежды с приятной и современной атмосферой. Вы можете выбрать традиционный шрифт для заголовков и классический шрифт без засечек для основного текста. К примеру, для заголовков можно взять шрифт вроде Arvo, а для основного текста — Open Sans, известный своей читабельностью. Это придаст всему сайту сбалансированный внешний вид. Кроме того, он будет выглядеть вневременно, что будет отлично сочетаться с вашей компанией в стиле ретро:

Или, скажем, у вас юридическая фирма или бренд элитной косметики, и вы хотите, чтобы внешний вид сайта подчеркивал ваш профессионализм и вызывал доверие потенциальных клиентов. Тогда лучше будет использовать классический и одновременно элегантный шрифт вроде Frank Ruhl Libre или Playfair Display. В глазах потенциальных клиентов это лишний раз подчеркнет вашу надежность и первоклассный уровень сервиса.

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

Использование веб-безопасного шрифта означает, что пользователям не нужно устанавливать какой-либо дополнительный шрифт на компьютер, чтобы текст правильно отображался в их браузере. 10 лет назад было всего 13 семейств шрифтов, которые дизайнеры могли использовать при создании сайтов. В настоящее время золотым стандартом для любого дизайнера является Google Fonts. Эти шрифты корректно отображаются в любых браузерах.

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

Когда вы ищете идеальный веб-безопасный шрифт, лучше всего посмотреть в библиотеке Google Fonts. В большинстве случаев вы найдете там подходящий вариант. Там содержится более 800 бесплатных лицензионных шрифтов. Если вы используете один из них, то можете быть абсолютно уверены в том, что пользователи из любой страны увидят ваш текст правильно в любом браузере.

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

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

Вот, как это выглядит на практике:

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

2. Затем нужно выбрать дополнительный шрифт, который будет использоваться для основного текста. Он должен быть легко читаемым даже на небольших экранах. Таким, к примеру, является шрифт Noto Sans.

3. И, наконец, ваш третий шрифт должен привлекать внимание. Его можно использовать на кнопках целевого действия или выделять с его помощью некоторые части текста. Для этого прекрасно подойдет шрифт вроде Montserrat.

Только грамотная комбинация шрифтов может оказать существенное влияние на внешний вид вашего лендинга.

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

Выше можно увидеть еще два примера грамотного использования шрифтов. Первый лендинг принадлежит кэшбэк сервису. Там используется четкий, но слегка угловатый шрифт Open Sans. Благодаря этому сайт приобретает современный внешний вид. Второй пример — магазин чая и подарков. На его страницах используется более редкий шрифт Bebas Neue Regular, также без засечек, но за счет «вытянутости» по вертикали он выглядит более оригинально. В обоих этих примерах шрифт прекрасно сочетается с остальными элементами дизайна и прекрасно передает ценности бренда. В этом и заключается сила влияния шрифта.

Заключение

Выбор шрифта для полностью зависит от цели, которой вы хотите достичь. Когда вы планируете фирменный стиль и дизайн, подумайте о том, какой вы хотите, чтобы вашу компанию увидели потенциальные клиенты. Шрифты — идеальный имиджевый инструмент. Хотите, чтобы ваша компания выглядела классической, серьезной или традиционной? Тогда вам стоит выбрать элегантный шрифт с засечками. Хотите выглядеть стильно и минималистично? Тогда вам подойдет шрифт без засечек. Вам нужно нечто среднее? Тогда стоит объединить несколько шрифтов. Проще говоря, тот шрифт, который вы выбираете много говорит людям о вашей компании, поэтому следует отнестись к этому с умом.

Высоких вам конверсий!

По материалам: 99designs.com

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

1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

Самый популярный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.
В примере ниже — типичный макет статьи, в заголовке использован Trade Gothic Bold No.2 , а в тексте - Bell Gothic . Оба шрифта – рубленые, тем не менее, у них очень разные «личности». Хорошее правило при создании макета — не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic , наоборот – динамику и экспрессивность.

Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.
Теперь рассмотрим пример справа. Bell Gothic заменён шрифтом Sabon . Sabon , как шрифт с засечками, очень хорошо работает с Trade Gothic . Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков x-height (грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней). Таким образом, у обоих шрифтов одна и та же цель, что создает прекрасное сочетание.

2. Избегайте шрифтов одного класса

Шрифты одного класса, но из разных семейств могут запросто вызвать разногласие при их комбинировании. Их ярко выраженные личности будут тянуть одеяло каждая на себя, в результате макет станет «грязным».
На примере внизу, слева, в заголовке использован шрифт Clarendon Bold , который относится к классу Slab serif . В теле статьи использован Officina Serif который также относится к Slab serif . Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса Slab serif в одном месте может вызвать ненужное напряжение.

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville . New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon . Выбор шрифтов разных классов с самого начала избавит вас от головной боли при создании макета.

3. Присвойте шрифтам разные роли

Один из простых способов комбинации шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка - Rockwell Bold . Вводный абзац и основной текст статьи в одном шрифте – Bembo , но разного размера. И, наконец, подзаголовок - Akzidenz Grotesk Medium .

Отчетливый Rockwell Bold мы оставили для привлечения внимания к заголовку. В целом использовали уже открытую нами схему сочетания рубленого шрифта и шрифта с засечками. И даже при таком выборе у нас большое количество вариаций по размеру, весу и функциям шрифтов. В общей сложности использовались 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!

4. Контрастная насыщенность шрифтов

Самый лучший способ испортить макет – не разделить элементы текста друг от друга по их иерархии. Кроме использования разных размеров, убедитесь, что ваши шрифты разного веса (жирности), чтобы дать читателю «путеводитель» по вашему дизайну.
На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

5. Создайте на странице различную тональность текста

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

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

6. Не смешивайте настроения шрифтов

Одна из частых ошибок – игнорирование присущего шрифту настроения. Шрифты имеют свою личность. Иногда настроение шрифта может меняться в зависимости от контекста, но несущественно. Одна проблема – неправильно подобрать шрифт для конкретной работы. Но еще большая проблема – составить два шрифта с разным настроением!
На примере слева мы соединили Franklin Gothic Bold и Souvenir . Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Сочетание этих двух шрифтов подобно встрече гвардейца, охраняющего Букингемский дворец, и девочки. Гвардеец послушно игнорирует игривую девчонку у его ног, пытающуюся заставить его улыбнуться. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height . Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

7. Сочетайте яркое с нейтральным

Чистый, читабельные типографский дизайн требует внимательного отношения к намеренному и непреднамеренному напряжению между шрифтами. Столкновение разных личностей шрифтов – это только одна причина ненужного напряжения. Если один из шрифтов имеет яркую личность, то второй должен быть нейтральным.
На примере слева Dax Bold стоит рядом с Bernhard Modern . Это плохой выбор хотя бы по двум соображениям. Во-первых, Dax имеет узкие знаки и большую x-height , в то время как Bernhard Modern , наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern , наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon , который относится к классу Old style , но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax . Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax .

8. Избегайте несоизмеримых сочетаний

Когда между выбранными шрифтами слишком большой контраст, это создает визуальный дисбаланс, что плохо отражается на всем дизайне. Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, - рядом с Garamond Narrow . Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Справа Antique Olive Nord был заменен более мягким и сдержанным Antique Olive Bold . Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хорошим выбором нам представляется Chaparral . У Chaparral более высокая x-height , чем у Garamond , и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold .

9. Будьте проще – не используйте более двух шрифтов

Вместо того, чтобы перелопачивать библиотеки шрифтов в поисках «того самого» сочетания, иногда лучше вернуться к классическому и гораздо более простому варианту – сочетанию шрифта с засечками и рубленого. На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond .

Как добиться всего этого без лишних усилий? Во-первых, если вы возьмете шрифты из одной и той же гарнитуры, то наверняка получите отличную визуальную совместимость даже не задумываясь над этим. Во-вторых, мы выбрали проверенную временем комбинацию – сочетание нейтрального заголовочного шрифта и опять же нейтрального шрифта для текста. И Helvetica Neue , и Garamond обладают выраженной, но нейтральной личностью, и они могут сочетаться в сложных макетах друг с другом, потому что мы изначально заложили строгую иерархию. Следование правилам при использовании правильных шрифтов помогает достичь высоких результатов без лишних затрат энергии.

10. Используйте различные размеры шрифта

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

Справа использовались те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера. Использование шрифтов различных размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографике.

В заключение

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

(Перевод Виктории Шидловской статьи из журнала Smashing Magazine (в ред. автора)

От автора: типографская разметка – обширное поле деятельности. Люди посвящают годы своей жизни этому древнему ремеслу, и всегда найдется что-нибудь новое для изучения. В этой статье, я сделаю обзор основных моментов, которые следует обдумать при выборе шрифта для своего сайта и гарнитуры (набор из одного или нескольких шрифтов). После чего вопросы на подобие «Какой шрифт выбрать?» у вас отпадут сами по себе.

Практическая типографская разметка

При создании дизайна для Сети вам нужно принять к сведению, что контент будет меняться. О том, чтобы тратить время на кернинг (подгонку пробелов между отдельными буквами) каждого заголовка большого вебсайта, вопрос даже не стоит. Другими словами, вы отказываетесь от контроля.

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

Читабельность при выборе шрифта

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

Сделав написанное удобочитаемым, вы немедленно опередите по крайней мере половину своих конкурентов, что на самом деле здорово, потому что не так уж сложно!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Как выбрать гарнитуру шрифта?

Решая, какую гарнитуру применить на своем вебсайте, важно помнить: не перемудрите . Я знаю, как много дизайнеров недолюбливают использование Helvetica оттого, что она широко применяется. Я согласен, но это утверждение оставляет в стороне важные данные: почему. Люди слишком часто пользуются Helvetica, потому что он ужасно хорош . Он отлично подходит к любому дизайну, какой только можно себе представить, хорошо работает как в маленьком, так и огромном размере.

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

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

Это что касается основного текста, но как насчет заголовков, какой шрифт выбрать именно для них?

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

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

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

Выбор пары

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

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

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

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

Я не говорю, что вы должны пойти и установить все на черное по белому, просто при создании дизайна вам следует знать о контрастности своего текста. Если вы не будете осмотрительны, это вам потом может откликнуться.

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

Использование сетки при создании дизайна с текстами гарантирует четкий баланс и геометрическую структуру вашего проекта. Это – не волшебное исправление плохого дизайна, но если с самого начала вы создаете проект по сетке, то можете быть уверены, что по меньшей мере ваша разметка будет прочной.

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

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

Выделение

Как я уже говорил, если ваша типографская разметка читабельна, то вы уже на 50% выигрываете у конкурентов, а что насчет второй половины? Если вы зашли уже настолько далеко, то вместе мы оставим четкие, последовательные правила читабельности и входим в мрачный и мистический мир уникальности.

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

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

У The Design Cubicle – очень уникальный логотип и дизайн. Он мощный, однако классный, привлекающий внимание, но изящный. Когда я смотрю на этот проект, у меня остается чувство высокого класса этого сайта. Он говорит мне: «Я знаю, что делаю».

Будьте небанальны

Сколько вы знаете вебсайтов с логотипом размером во все содержимое? Как насчет ультратонкого заголовка? В отличие от моего последнего пункта, быть небанальным – значит смотреть на то, что делают другие, а затем сделать все наоборот.

Ребята из Savvy Belfast умны. Они заметили, какими стесненными смотрятся большинство вебсайтов и решили заменить весь бессмысленный основной текст одним предложением.

Даже бросив на их сайт единственный взгляд на одно мгновение, вы не можете не запомнить их название.

Приводите свой дизайн в соответствие

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

Если у вас применяется замысловатая фоновая текстура, то, возможно, вашим заголовкам подойдет хороший serif.

Моя точка зрения тут проста: не забывайте о контексте . Область дизайна огромна, а сегодня я говорю только об одном ее разделе. Для создания успешного веб-дизайна все части нужно успешно смешать. Вот в чем состоит цель: выработать впечатление, которое кто-то получит от вашего сайта. Это нельзя сделать с помощью одного лишь текста , или одного лишь цвета , или даже одного лишь контента !

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

Из всего, о чем я сегодня говорил, это общепризнанно самая абстрактная вещь, и ее немного трудно объяснить. Вместо этого давайте я вам просто покажу.

Впервые посетив Solid Giant , я улыбнулся. Я улыбнулся в следующий раз, когда его увидел, и даже в следующий. Внезапно я ощутил родство с этим проектом. Эта большая, пушистая "G" слишком очаровательна, чтобы ее можно было забыть!

Если честно, я думаю, что это гениально.

Эмоциональному дизайну научить невозможно, это нечто, что следует испытать, а затем обыграть в собственных проектах.

Заключение урока о том какой выбрать шрифт для сайта

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

Как вы считаете, что самое важное в типографской разметке сайта? Оставьте свое мнение в комментариях!

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

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

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

Как подобрать правильный шрифт?

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

Прежде чем начать поиски шрифта для рекламы продовольственного товара, нужно провести анализ целевой аудитории. Проще говоря, понять, какие люди будут чаще всего употреблять данный продукт. Как правило, всегда можно выяснить, кто именно является типичным клиентом. Каким, к примеру, должен быть шрифт для продукта с повышенным содержанием жира? Возьмем картофель фри, в котором количество жиров составляет 25,9%. Возможно, это человек, который любит есть данный продукт, запивая его пивом или газировкой. А может быть это семья с маленькими детьми, которая остановилась перекусить в небольшом придорожном кафе. В зависимости от аудитории и стратегии продвижения по рынку, шрифт для рекламы картофеля фри может быть разным, но при этом желательно, чтобы он не был слишком строгим.

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

Шрифты для рекламы пива

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

«Пивные» шрифты

Шрифты для рекламы сладостей

Сладкое любят все, однако основная целевая аудитория таких продуктов, как конфеты, печенье, мороженое и многое другое – это дети. И даже если это взрослые, нужно помнить, что каждый взрослый в душе немного ребенок, а значит шрифт для сладких продуктов должен быть не слишком формальным. Шрифт должен вызывать ассоциации с продуктом, поэтому ассоциативный ряд будет примерно таким: продукт сладкий, вкусный, сочный, клейкий, тянущийся, холодный. То есть нужно описать его признаки и уже на основе этих характеристик подбирать шрифты. Как известно, существуют шрифты, идеально подходящие для детской аудитории. Как правило, это рукописные или неформальные шрифты с различной толщиной штриха. В рекламе сладостей также нужно обращать внимание на цвет шрифта – он должен перекликаться с внешним видом продукта. Для такого продукта как мороженое лучше подойдут холодные оттенки, а для леденцов, наоборот, теплые.

«Сладкие» шрифты

Шрифты для кондитерских изделий

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

«Кондитерские» шрифты

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

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

Что такое насыщенность шрифта

Читабельность шрифта

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

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

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

Пример 1: Текст читается не очень

Пример 2: Текст читается хорошо

Если тема выбора шрифта вам интересна, найдите хорошие сайты, близкие к вашему проекту, и посмотрите какие шрифты они используют. Определить это поможет расширение для браузера What Font .

Также можно заглянуть на независимый архив типографики http://fontsinuse.com/ - ресурс на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.