Типографика - это умение, искусство сделать текст не только красивым, но и удобным для чтения. Важно, чтобы в начертании букв отражался характер издания или определенный информационный посыл. Типографика - это умение принести визуальную гармонию в печатный текст или страницу сайта. Она не ограничивается лишь выбором шрифта контента, и выравнивания. Типографика - это искусство выразить смысл написанного не только через слова, но и через их отображение. Это очень интересная, глубокая и сложная дисциплина. В этой статье мы расскажем именно о ней.
Что такое типографика?
Чтобы или сайт, дизайнер использует текст, фотографии и графику, которые сделаны другими. Подобное разделение труда позволяет добиться наилучшего возможного результата за счет того, что работа ведется с материалами высокого качества. Дизайнер - это не фотограф и не автор текстов. Кроме того, ему даже не обязательно разбираться в компьютерной или HTML-верстке.
Универсальные специалисты - они существуют?
Совсем другой разговор, что во время полной компьютеризации заниматься даже непосредственно дизайном без знания такого инструмента, как компьютер, просто немыслимо, особенно учитывая, что и сайт, и печатная продукция изначально создаются с помощью программ.
Если вы хотите с помощью компьютера создать что-то, вам необходимо знание того, как это «что-то» можно создать. Кроме того, современное компьютерное обеспечение с каждым днем совершенствуется и предоставляет все более и более широкий спектр возможностей. И если вы не знакомы с этим спектром, то и проектировать на высоком уровне у вас вряд ли получится, так как не будет возможности создать продукт, способный конкурировать с лучшими образцами.
Разумеется, уровень владения компьютерными программами у графического дизайнера будет значительно превышать уровень обыкновенного пользователя. Графический дизайнер - это прежде всего художник. Однако между художником и «компьютерщиком» связь более чем ощутима: например, основы стиля в типографике и дизайнерские решения, которые создаются с помощью определенного программного обеспечения.
С кем работают графические дизайнеры?
Чтобы создать полноценный сайт, графическому дизайнеру необходимо сотрудничать как минимум с программистом. Особенно в том случае, если создается многоуровневый ресурс, который будет содержать множество интерактивных функций. Однако небольшой среднестатистический сайт способен сдать и один дизайнер, не нуждаясь в помощи web-мастера или программиста.
В жизни почти не встречается идеальная цепочка, состоящая из креативщика, дизайнера и верстальщика. Зачастую все эти три функции выполняет один-единственный человек, который имеет высшее художественное образование, знает большинство необходимых графических программ, дока в Интернете и компьютере, а также выдает оригинальные идеи, не затрачивая много сил. Кроме того, такой универсальный человек будет представлять себе оформление будущего журнала, все средства управления новой, еще не созданной страницы сайта, и какая именно реклама будет там располагаться.
Где готовят графических дизайнеров?
В профессии графического и web-дизайнера, как ни в какой другой, крайне важно даже не желание, а постоянное стремление воплощать свои идеи в жизнь - и это можно сказать с уверенностью.
В этой профессии многие знания добываются путем постоянной практики на рабочем месте. Необходимо нарисовать именно такую кнопку на страницу сайта - расшибусь, но сделаю. Возможно, именно поэтому графические дизайнеры зачастую достаточно быстро перестают учиться в классическом понимании этого слова, то есть ежедневно посещать институт или колледж. Их обучение происходит всю оставшуюся жизнь на рабочем месте, при решении повседневных задач.
Считается, что можно стать графическим дизайнером и вовсе не обучаясь в высшем или среднеспециальном учебном заведении. Достаточно многие годы постоянно заниматься ремеслом и искусством (известны и такие примеры). При этом человек усердно трудится и анализирует свои и чужие работы.
Правда, графические дизайнеры, имеющие огромный опыт при полном отсутствии профильного образования, существуют только в России. В иных условиях людям, которые хотят работать по этой специальности, необходимо высшее художественное образование, а также знание программного и технического обеспечения.
Разумеется, элементарные навыки работы с графическими программами вполне можно получить и самостоятельно, и на краткосрочных курсах, однако это поможет лишь залатать дыру, но не даст основательных познаний, которые можно получить в вузе.
Коммуникация играет в дизайне огромную роль. Очень важно создавать крепкую связь между веб-сайтом и непосредственно самим пользователем и затем помогать ему в достижении поставленных целей. Когда мы говорим о коммуникации в контексте веб-дизайна, обычно мы имеем в виду текст. Типографика является неотъемлемой частью данного процесса:
Более 95% информации в Интернете хранится в письменном виде.
Хорошая типографика — это залог легкодоступной информации, в то время как при плохой типографике приходится прикладывать усилия для понимания текста. Как отмечает Оливер Райхенштайн в статье «Веб-дизайн на 95% состоит из типографики »:
Оптимизация типографики — это оптимизация читабельности, доступности, удобства использования (!) и достижение графического баланса в целом.
1. Используйте минимальное количество шрифтов
При использовании более 3 разных шрифтов ваш веб-сайт теряет структуру и выглядит непрофессионально. Помните, что злоупотребление размером и стилем шрифта может испортить любую разметку.
Чтобы предотвратить подобную ситуацию, старайтесь свести количество используемых шрифтов к минимуму.
В целом, сведите количество шрифтов к минимуму (двух более чем достаточно, часто хватит и одного) и придерживайтесь использования одних и тех же на всем веб-сайте. Если вы решите работать с более чем одним шрифтом, убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв. Взгляните на пример, приведенный чуть ниже. У комбинации Georgia и Verdana (слева) есть общие характеристики, что позволяет им гармонично сочетаться друг с другом. Возьмем для сравнения комбинацию Baskerville и Impact (справа). «Тяжеловесный» Impact подавляет своего «засечного» напарника.
Убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв
2. Старайтесь использовать стандартные шрифты
В сервисах со шрифтами (например, Google Web Fonts или Typekit) можно найти много интересных, которые добавят в ваш дизайн нечто новое и необычное. К тому же, ими очень легко пользоваться. Возьмем, к примеру, Google:
1. Выбираете любой шрифт. Скажем, Open Sans .
2. Генерируете код и вставляете его в
Своего HTML.
3. Готово!
Но что может пойти не так?
На самом деле, у этого метода есть одна серьезная проблема — пользователи привыкли к стандартным шрифтам и читают быстрее текст, написанный именно такими шрифтами.
Обычно наилучшим выходом будет использование системных шрифтов (Arial, Calibri, Trebuchet, etc.). Исключением может стать необходимость придерживаться каких-то шрифтов, которые задал сам клиент: например, для брендинга или для создания чего-то запоминающегося. Помните, что хорошая типографика влияет на прочтение текста, а не на визуальное восприятие шрифта.
3. Ограничьте длину строки
Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста. Выбирая ширину текста, вы должны ориентироваться не на ваш дизайн, а на ясность и четкость написанного. Обратите внимание на этот совет от Baymard Institute :
«Если вы хотите, чтобы вашему читателю было комфортно, каждая строка должна содержать не более 60 знаков. Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста».
Если строка слишком короткая, глазам придется часто менять фокус, что сбивает темп чтения. Если же строка слишком длинная, глазам читателя, наоборот, придется долго фокусироваться на написанном. Фото: Material Design
Что касается мобильных устройств, придерживайтесь диапазона в 30-40 знаков в строке. Ниже представлен пример двух сайтов, открытых на мобильных устройствах. На одном строка содержит от 50 до 75 символов (лучшее количество знаков в строке для печатного текста и разрешения компьютера), а на втором мы видим оптимальные 30-40 знаков.
В веб-дизайне можно достичь необходимого количества знаков, уменьшив ширину текстовых блоков с помощью em или пикселей.
4. Выбирайте гарнитуры, которые хорошо читаются в любом размере
Пользователи будут заходить на ваш сайт с разных устройств, у которых, соответственно, различается размер и разрешение. Большинство пользовательских интерфейсов используют текстовые элементы различной величины (кнопка «копировать», подписи полей, заголовки секций и т.д.). Необходимо выбирать гарнитуру, которая будет хорошо выглядеть, и оставаться читабельной в любом размере.
Roboto от Google
Убедитесь, что гарнитура, которую вы выбрали, легко читается на маленьких экранах! Старайтесь не использовать курсивные шрифты, например, Vivaldi (на изображении ниже): хоть они и выглядят красиво, понять написанное иногда бывает сложно.
Использование шрифта Vivaldi затруднит прочтение текста на маленьком экране
5. Используйте шрифты с четкими буквами
Многие шрифтовые гарнитуры созданы таким образом, что иногда бывает очень легко спутать похожие буквы, особенно «I» и «L», написанные латиницей (как на изображении ниже). В некоторых же буквы расположены так близко друг к другу, что сочетание «r» и «n» можно принять за букву «m». Поэтому, выбирая шрифт, протестируйте его в разных контекстах. Так вы сможете убедиться, что из-за шрифтовой гарнитуры у читателя не возникнет проблем с пониманием текста.
6. Избегайте капса
Текст, написанный капсом — или одними заглавными буквами — подходит для ситуации, где пользователь не вовлекается в процесс чтения (например, в аббревиатурах или логотипах). Но в других случаях не насилуйте ваших читателей текстом, написанным заглавными буквами. Как отмечает Майлз Тинкер в своей известной работе «Legibility of Print», такой текст читается гораздо медленнее текста, написанного строчными.
7. Не сводите межстрочное расстояние к минимуму
В типографике существует специальный термин для обозначения расстояния между строками — интерлиньяж (или межстрочный интервал). Увеличивая интерлиньяж, вы увеличиваете вертикальное пространство между строками, тем самым улучшая читабельность текста на экране. По правилам, для обеспечения читабельности текста интерлиньяж должен быть примерно на 30% больше, чем высота знака.
Правильное межстрочное расстояние способствует лучшей читабельности текста. Фото: Microsoft
По словам Дмитрия Фадеева, правильно подобранное расстояние между абзацами увеличивает понимание прочитанного на 20%. Умение дизайнера работать с белым пространством позволяет пользователям усваивать содержание текста целиком без упущения каких-либо деталей.
Слева: Текст написан практически вплотную. Справа: Правильное межстрочное расстояние способствует читабельности текста. Фото: Apple
8. Убедитесь, что у вас все в порядке с цветовым контрастом
Не используйте одни и те же или похожие по гамме цвета для текста и фона. Чем лучше виден текст, тем быстрее пользователи смогут прочитать его и уловить основные моменты. Консорциум Всемирной паутины советует использовать следующее соотношение для основного текста и текста изображения:
- Небольшие тексты должны иметь коэффициент контраста минимум 4,5:1 по отношению к фону.
- Большие тексты (от 14 размера полужирным шрифтом/от 18 размера и выше стандартным шрифтом) должны иметь коэффициент контраста минимум 3:1 по отношению к фону.
Этот текст не соответствует стандарту цветового контраста, поэтому его тяжело различить на фоне.
Этот текст соответствует стандарту цветового контраста, поэтому он читается легко.
Когда вы подобрали цветовую гамму, необходимо дать ваш текст для прочтения реальным пользователям и желательно на нескольких разных устройствах. Если в ходе тестирования выявятся какие-то трудности с распознаванием текста, то можете быть уверены, что в будущем многие пользователи могут столкнуться с такой же проблемой.
9. Старайтесь не использовать красный или зеленый цвет в тексте
Дальтонизм — явление довольно распространенное, особенно среди мужчин (8% мужского населения — дальтоники). Поэтому, помимо цвета, желательно использовать какие-то другие знаки для выделения важной информации. Также старайтесь не прибегать к красному и зеленому цвету, так как именно эти цвета чаще всего не распознаются дальтониками.
10. Старайтесь не использовать мерцающий текст
Информация, которая мигает или мерцает, может вызвать недомогание у восприимчивых к этому пользователей. Кроме недомогания, это также может вызвать раздражение у многих читателей, так как будет отвлекать их от процесса чтения.
Не используйте мерцающий текст!
Заключение
Типографика — это очень важная вещь. Делая правильный выбор, вы наделяете веб-сайт ясностью и четкостью. В то же время, неправильный выбор может привести к невнимательному прочтению текста, так как отвлекает все внимание на себя. Типографика должна быть читабельной, ясной и понятной.
Типографика должна уважительно относиться к контенту
Это подразумевает, что читатель никогда не должен испытывать дискомфорта при прочтении текста.
Создание логотипа — это нечто большее, чем создание визуальной идентификации бренда компании. И это далеко от названия компании, расположенного в прямоугольнике. Умные предприниматели и дизайнеры никогда не отделяют визуальный аспект от бизнес стратегии. Логотип часто является первым впечатлением о компании, и это само по себе может повлиять на восприятие клиентом бренда.
Хорошо продуманный логотип — это уникальное сочетание бизнеса и искусства, которого чрезвычайно сложно достичь. Типографика в логотипах, если их использовать мудро, может привести к желаемому балансу между ними. Типографические логотипы кажутся простейшими логотипами и наименее креативными. Однако это не так. Профессиональные и творческие подходы могут сделать ваш бренд не только запоминающимся, но и доверительным и любимым. Эта статья предназначена для тех, кто ищет идеи и вдохновение в создании текстовых логотипов.
Это не лучшая идея, чтобы приступить к дизайну, прежде чем погрузиться в сущность бизнеса. Какое сообщение вы пытаетесь доставить? Подходит ли бренд к действию или он более ориентирован на срабатывание эмоций? Что заставит клиентов снова обратиться к вашему сервису? После того, как вы поймете свой бренд достаточно, вы сможете доставить правильное сообщение через свой логотип.
Во-вторых, типографический логотип повлияет на название вашей компании. Поэтому убедитесь, что имя достаточно понятно, чтобы не путать потенциальных клиентов.
Знайте свою аудиторию
Следующий шаг — познакомиться с вашей аудиторией. Есть большая разница в том, что вы ожидайте от бренда и что ожидает ваша аудитория. Подумайте об ответах на эти вопросы:
- Кто они? Их возраст, пол и национальность так же важны, как знание профессий, хобби и интересов ваших клиентов.
- Где они будут видеть ваш логотип? Это может быть веб-сайт, рекламный баннер, рекламный щит или футболка соседа. Попытайтесь рассмотреть любую ситуацию.
- Понятно ли они ваше сообщение? Постарайтесь подумать обо всех ассоциациях, которые могут прийти на ум, когда они видят ваш логотип. Хорошая идея — опросить представителей потенциальной аудитории.
Убедитесь, что вы знаете визуальные основы
Основываясь на результатах исследований и вашем глубоком понимании вашего бренда, вам придется сделать несколько вариантов, связанных с вашим логотипом.
Прежде всего, будьте готовы обсудить шрифты. В настоящее время доступны тысячи шрифтов, что еще более затрудняет выбор дизайнеров. Все основные шрифты можно разделить на несколько типов, и каждый из них может иметь свой эмоциональный тон:
- Serif (с засечками): респектабельный, традиционный, надежный, успокаивающий;
- Sans Serif (без засечек): современный, объективный, чистый;
- Script type (имитирует ручное написание): элегантный, творческий, ласковый;
- Декоративные: выразительные, уникальные.
Вы видите, что каждый шрифт имеет свое настроение и индивидуальность, которые он передает вашему бренду. Он может быть серьезным, неосторожным, игривым или утонченным. Вам нужно определить, что именно вы хотите сказать, используя шрифт и соответствует ли он вашему дизайну. Выберите шрифт, который не основан на личных предпочтениях, но помните о духе и особенностях вашего бизнеса.
Также играют важную роль. Каждый цвет имеет свой собственный подтекст и может добавить некоторые нюансы в ваше сообщение. Поэтому не отправляйте неверные сообщения своим клиентам.
Вот несколько советов, которые помогут вам выбрать правильный шрифт и цвет для вашего логотипа:
- Проверьте своих конкурентов. Ваша цель — не подражать, а тщательный анализ. Если их решение разумно, вы можете извлечь уроки из полученого опыта.
- Придерживайтесь простоты. Чистый шрифт позволит воспроизводить ваш логотип на разных продуктах и всех размерах, будь то большой баннер или ручка.
- Обеспечьте удобочитаемость. Ваш логотип должен быть доступен для чтения в течение нескольких секунд.
Обеспечьте универсальность вашего логотипа
- Дизайн логотипов лучше выполнять в векторных приложениях, таких как Adobe Illustrator. Photoshop не лучший выбор для этой цели, потому что логотип должен быть масштабируемым без потери качества.
- Укажите цвета логотипа с помощью CMYK или Pantone, чтобы убедиться, что цвета будут воспроизведены правильно после печати логотипа.
- Вы должны иметь возможность воспроизводить свой логотип одним цветом (черный или белый) для печати.
Остерегайтесь общих ошибок дизайна
- Использование слишком большого количества шрифтов и цветов. Лучшие компании, как правило, используют один шрифт и один цвет. Чем больше шрифтов используется, тем грязнее выглядит логотип. Использование двух шрифтов приемлемо, если они отличаются для названия компании и слогана.
- Использование модных шрифтов. Большинство тенденций недолговечны: то, что сегодня популярно, может быть устаревшим и окажется смешным завтра.
Копирование других. Имитация — это ленивый способ решить творческую проблему. Логотип является отражением вашего бизнеса: если он выглядит как чужой, ваш бизнес не может быть уникальным и теряет доверие в глазах клиентов.
Примеры типографики в дизайне логотипа
Есть определенные типы логотипов, о которых вы должны знать, прежде чем приступать к разработке собственного логотипа и убедитесь, что выбранный тип соответствует потребностям вашего бизнеса:
Письменные и текстовые логотипы
Есть много всемирно известных компаний, которые полагаются исключительно на типографские логотипы. Вот лишь несколько примеров, чтобы почувствовать силу в текстовых логотипах. Конечно, IBM, CNN, Google, Facebook и т. д. являются наиболее заметными представителями дизайна буклета с логотипом.
Графические логотипы
Apple, Nike, Shell и многие другие компании имеют графические логотипы.
Одна из самых часто встречающихся бед дизайна - это проблема с .
В этой статье мы расскажем о нескольких принципах правильной типографике и посоветуем, как вам избежать многих распространенных ошибок.
Статья не является книгой по типографике или искусству книгопечатания, это больше похоже на «быстрые советы по улучшению шрифтовой основы дизайна».
Правило 1. Чем меньше шрифтов, тем лучше
Одна из самых больших ошибок, которые делают дизайнеры, заключается в использовании слишком большого количества шрифтов и/или их стилей. Постарайтесь снизить их до двух или трех. То есть, основной текст должен быть одного шрифта и размера.
Выберите один для заголовков и придерживайтесь его, может быть, на крайний случай, еще один для подзаголовков. Не бойтесь, если шрифты будут оченьразличаться между собой. При использовании двух очень похожих шрифтов в дизайне, читатель может подумать, что вы просто сделали ошибку и случайно выбрали не тот шрифт при наборе.
Позаботьтесь о единстве цвета, плотности и т.д. или ваш текст будет выглядеть, как будто пьяные мухи разбежались по всей странице.
Правило 2. Следите за разрядкой
Будьте осторожны, чтобы не слишком скучковывать буквы. Если у вас возникли проблемы с нехваткой места для текста, то лучше уменьшите шрифт. Да это, возможно, добавит пространства между абзацами, но в этом нет ничего страшного, это даст некоторую передышку при чтении.
Правило 3. Правильное выравнивание
Пожалуйста, не выравнивайте все по центру (если это не специальный дизайнерский ход). Подумайте об использовании сетки. Ведь на странице все взаимосвязано. Используйте направляющие и размещайте согласно им объекты. Не раскидывайте объекты по углам страницы так как будто вы не смогли решить, где их разместить.
Правило 4. Поменьше декоративных шрифтов
У вас есть красивые декоративные шрифты? Замечательно! Но это совсем не означает, что необходимо использовать их для текста абзацев. За декоративными шрифтами, чаще всего стоит, история или они применяются в конкретном случае, например, для заголовка или названия. Часто, чем проще, тем лучше, поэтому такие шрифты как Helvetica так популярны.
Правило 5. Размер имеет значение
Это о размере букв текста;). Заголовки хороши, когда набраны жирным и большим шрифтом, но если вы будете использовать и в основном тексте слишком большие буквы, это удешевит его. Подумай об этом. Вы идете в хороший ресторан и часто бывает, что меню написано мелким шрифтом, это выглядит классно. (Только убедитесь, что шрифт не так мал, чтобы было трудно прочитать). Не бойтесь делать заголовки гораздо больше, чем основной текст.
Правило 6. Следите за читабельностью
Все что вы делаете, делается для того, чтобы это можно было прочесть. Темный текст на темном фоне – это не очень хорошая идея. Еще хуже, помещать мелкий текст над высококонтрастным фото. Помните, что надо избегать размещения текста над чем-либо.
Правило 7. Правильно подбирайте цвета
Какой цвет лучше всего подходит для шрифта? Как правило, верите вы в это или нет, черное или белое часто лучше всего. Если вы используете цвет отличный от разных оттенков серого, снижайте насыщенность. Ярко окрашенный шрифт может быть труден для чтения. Остерегайтесь сложных вибрирующих сочетаний, таких как красный на зеленом.
Правило 8. Подходящая группировка
Связанные части информации лучше объединять вместе. Это позволит сделать дизайн яснее. Например: посмотрите на постер фильма, все данные сгруппированы в привлекательные блоки. Они теперь могут рассматриваться как отдельный элемент дизайна. Примеры плохой группировки – откройте желтые страницы.
Правило 9. Достаточный интерлиньяж
Это расстояние между строками текста. Очень важно правильно подобрать этот интервал. Гораздо более приятно читать, когда есть место для отдыха глаз между строками. Как правило, стараются использовать интерлиньяж, по крайней мере, на 2 пункта больше, чем размер шрифта. Например: для максимального удобства чтения при 10pt для шрифта должны задать хотя бы 12pt.
Правило 10. Следите за кернингом
Кернинг – интервал между отдельными символами слова. Тут важно иметь опыт в определении плохого кернинга, так как часто программы, например, такие как Фотошоп, ошибаются в его расстановке. Это надо будет отрегулировать вручную, но главное не перестараться. Если вам не нравится межсимвольное расстояние, но вы не знаете, как это улучшить, выберите другой шрифт.
Попробуйте применять эти правила, когда работаете со шрифтом. Хорошо продуманные шрифтовые блоки должны хорошо выглядеть и без каких-либо изображений. В лучшем случае, ваша шрифтовая работа укрепляет положительное впечатление от дизайна. Она должна быть привлекательной и легкой для чтения