Типографика в вебе. Как выглядит полиграфический дизайн

Одна из самых часто встречающихся бед дизайна - это проблема с .

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

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

Правило 1. Чем меньше шрифтов, тем лучше

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

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

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

Правило 2. Следите за разрядкой

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

Правило 3. Правильное выравнивание

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

Правило 4. Поменьше декоративных шрифтов

У вас есть красивые декоративные шрифты? Замечательно! Но это совсем не означает, что необходимо использовать их для текста абзацев. За декоративными шрифтами, чаще всего стоит, история или они применяются в конкретном случае, например, для заголовка или названия. Часто, чем проще, тем лучше, поэтому такие шрифты как Helvetica так популярны.

Правило 5. Размер имеет значение

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

Правило 6. Следите за читабельностью

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

Правило 7. Правильно подбирайте цвета

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

Правило 8. Подходящая группировка

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

Правило 9. Достаточный интерлиньяж

Это расстояние между строками текста. Очень важно правильно подобрать этот интервал. Гораздо более приятно читать, когда есть место для отдыха глаз между строками. Как правило, стараются использовать интерлиньяж, по крайней мере, на 2 пункта больше, чем размер шрифта. Например: для максимального удобства чтения при 10pt для шрифта должны задать хотя бы 12pt.

Правило 10. Следите за кернингом

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

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

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

Начнем с примеров типографики.

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

Так делать не надо

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

Попробуйте прочитать этот текст за 20 секунд.

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

Типографика

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

Базовые определения в типографике

Пример каллиграфии

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

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

Леттеринг для логотипа

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

Основные правила типографики

Строчные и заглавные буквы шрифта

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

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


Чтобы набрать длинное тире на PC зажмите клавишу alt и на дополнительной цифровой клавиатуре (у вас блок справа) набери 0151, получится длинное тире. Короткое тире: alt + 0150.
Если забыли сочетание, то наберите в поисковике «длинное тире» найдите статью на википедии и скопируйте тире от туда.

Кавычки
Важно помнить, что в России принято использовать кавычки-ёлочки «». Чтобы их набрать используй alt + 0187. Некоторые используют в качестве кавычек удвоенный знак минут “, но лучше использовать кавычки-лапки “ ”: alt + 0147.
Комбинация клавиш Shift + 2 в кириллической раскладке клавиатуры вызывает на экран привычный всем знак “. Он обозначает совсем не кавычки (как принято считать), а секунды: 68° 13′ 22″ или дюймы: монитор с диагональю 17”.
В издании нужно использовать один рисунок кавычек, кроме «случаев „цитаты в цитате“».

Шрифты

Со знаками разобрались, теперь о понятии шрифта. Здесь я приведу только основные определения, как правильно использовать шрифты, читай в .
Шрифт - комплект литер, предназначенных для набора текста. Литера - та штука, про которую я рассказывал выше, металлический брусочек с буковкой. Грубо говоря шрифт - это комплект таких металлических буковок, предназначенных для работы текста.

Гарнитура - набор шрифтов, которые имеют единый стиль и оформление. Естественно у них должно быть схожее начертание. Например, гарнитура PT Sans состоит из различных начертаний шрифта: Bold, Italic и другие. Все начертания в совокупности, дают нам гарнитуру PT Sans.

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

- расстояние между базовыми линиями соседних строк.

Выключка (в жизни выравнивание) - способ расположения неполной набранной строки относительно вертикальных границ полосы набора. Вы наверняка видели в MS Word такие кнопочки (найти картинку выровнять). Называется выключка, потому что когда нужно было правильно расставить металлические литеры в них ставили пробельные металлические брусочки, чтобы их выключить. Поэтому назыавется “выключка”.

Выравнивание текста или выключка

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

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

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

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

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

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

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

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

Знайте свою аудиторию

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

1. Кто они? Их возраст, пол и национальность так же важны, как знание профессий, хобби и интересов ваших клиентов.
2. Где они будут видеть ваш логотип? Это может быть веб-сайт, рекламный баннер, рекламный щит или футболка соседа. Попытайтесь рассмотреть любую ситуацию.
3. Понятно ли они ваше сообщение? Постарайтесь подумать обо всех ассоциациях, которые могут прийти на ум, когда они видят ваш логотип. Хорошая идея — опросить представителей потенциальной аудитории.

Убедитесь, что вы знаете визуальные основы

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

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

• Serif (с засечками): респектабельный, традиционный, надежный, успокаивающий;
• Sans Serif (без засечек): современный, объективный, чистый;
• Script type (имитирует ручное написание): элегантный, творческий, ласковый;
• Декоративные: выразительные, уникальные.

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

Также играют важную роль. Каждый цвет имеет свой собственный подтекст и может добавить некоторые нюансы в ваше сообщение. Поэтому не отправляйте неверные сообщения своим клиентам.

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

• Проверьте своих конкурентов. Ваша цель — не подражать, а тщательный анализ. Если их решение разумно, вы можете извлечь уроки из полученого опыта.
• Придерживайтесь простоты. Чистый шрифт позволит воспроизводить ваш логотип на разных продуктах и ​​всех размерах, будь то большой баннер или ручка.
• Обеспечьте удобочитаемость. Ваш логотип должен быть доступен для чтения в течение нескольких секунд.

Обеспечьте универсальность вашего логотипа

• Дизайн логотипов лучше выполнять в векторных приложениях, таких как Adobe Illustrator. Photoshop не лучший выбор для этой цели, потому что логотип должен быть масштабируемым без потери качества.
• Укажите цвета логотипа с помощью CMYK или Pantone, чтобы убедиться, что цвета будут воспроизведены правильно после печати логотипа.
• Вы должны иметь возможность воспроизводить свой логотип одним цветом (черный или белый) для печати.

Остерегайтесь общих ошибок дизайна

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

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

Примеры типографики в дизайне логотипа

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

Письменные и текстовые логотипы

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

Графические логотипы

Apple, Nike, Shell и многие другие компании имеют графические логотипы.