Что относится к типографике в дизайне
Основы типографики
Типографика — один из самых сложных и западающих у многих веб-дизайнеров разделов в их профессии. Пугаться этого не стоит, нужно принять свою некомпетентность и постараться заполнить пробелы в знаниях этого важного раздела. Ведь без грамотного текстового наполнения никакая самая красивая картинка не спасет Ваш макет и не сделает его визуализацию максимально выгодной.
Хороший вкус, как и идеальная типографика, выше индивидуальности. Ян Чихольд
Типографика — область графического дизайна, которая занимается шрифтами и текстом, но не только вопросами подбора шрифтов, а прежде всего вопросом использования текста в графических макетах.
Типографика – это умение работать с «пустотой», как с чистым листом бумаги, который в этом разделе называется «воздухом».
На начальном этапе у каждого из нас возникают проблемы с типографикой в виду того, что зачастую мы не уделяем ей особого внимания, прикладывая все усилия на изучение графических редакторов и красивой визуализации картинки, а не текста. Это одна из самых распространенных ошибок, но, как ни крути, каждый наступит на эти грабли и сполна в нее окунется. А потому давайте немного приоткроем завесу тайны и рассмотрим базовые понятия из этой области.
Классификация шрифтов
1. San-Serif
Шрифты без засечек, или «Гротеск»
2. Serif fonts
Шрифты с засечками, или «Антиква»
3. Декоративные (акцидентные) шрифты
Плюс таких шрифтов — оригинальность и выделение. Минус — сложность чтения и некоторый «дискомфорт» для глаз. На том акцентирую внимание потому, что Вы не должны излишне играться с ними в своем проекте. Такими шрифтами можно выделить логотип или какое-то одно слово для привлечения внимания, но никак не большую часть текста.
4. Handwritting – рукописные шрифты
Слова здесь излишни. В принципе, характеристика подходит такая же, как и для декоративных шрифтов. Главное, не переусердствовать.
5. Моноширинные шрифты
Все шрифты, в которых длина букв по горизонтали одинаковая
6. Символьные шрифты
Представлены в виде иконок (Fontawesome, Stroke, icomoon)
Основные термины
Давайте с Вами разберём основные понятия, с которыми мы столкнемся при работе с типографикой.
1. Гарнитура – совокупность шрифтов, объединенных общими стилевыми признаками, отличными от других шрифтов.
2. Насыщенность – определяется изменением толщины основных и соединительных штрихов одноименных знаков.
3. Контрастность – отношение толщины соединительных штрихов к толщине основных штрихов знаков
4. Кегль – величина шрифта в наборе, определяется в пунктах. Кегль- то величина площадки, на которой размещается знак.
5. Трекинг/Кернинг – более сложные понятия, однако именно они позволяют нам задавать тон и тональность подачи информации. Трекинг – равномерное расстояние между буквами, а кернинг – избирательное расстояние между буквами, что позволяет добавить разнообразия в одних и тех же надписях.
6. Интерлиньяж – вертикальный интервал между строками текста. Для прямого шрифта он измеряется от базовой линии одной строки текста до базовой строки, расположенной под ней. Не забывайте об этом пункте. Интерлиньяж можно и нужно изменять.
7. Комплектность шрифта – совокупность всех знаков, необходимых для набора текста ( строчные, прописные, цифры, знаки препинания, символы и спецзнаки)
8. Пропорции – показатель изменения ширины одноименных знаков в начертаниях одной гарнитуры.
Как выбрать шрифт?
Для начала Вы должны определить тему проекта (строгая, деловая, минималистичная, фантазийная, женская/мужская, аристократичная) и строго следовать этому «настроению» на протяжении всей работы. Не путайте и не забывайте настроение сайта, с которым Вы работаете.
После того, как вы точно сложите у себя в голове понятие о проекте, можете просматривать списки гарнитур и методом проб и ошибок, Вы найдете шрифт, который подойдет именно Вам. Это далеко не лёгкий процесс, запаситесь терпением. Вы должны понимать, что далеко не каждый шрифт подойдет, например, для сайта, представляющего деловую компанию.
К каждому проекту нужно подходить индивидуально. В прочем, даже, если сейчас Вы не обратите на этот момент внимания, в конце концов придете к нему, испытав на своем опыте все нюансы.
Принципы типографики
Как подобрать шрифты, которые будут гармонично сочетаться друг с другом, не будут конфликтовать, а будут дополнять?
1. Классика хороша во все времена
Хороший и всегда работающий типографский прием – использовать в заголовке рубленый шрифт (Гротеск), а самого текста – шрифт с засечками (Антиква).
2. Каждому своя роль
Всегда придерживайтесь типографской иерархии, четко установив, какому шрифту отводится та или иная роль (заголовок, подзаголовок, текст, примечания, ссылочная масса, подпись и т.д.).
3. Экспериментируйте
Помимо того, что Вы будете использовать шрифты разного размера, не забывайте про упомянутые выше термины, как контрастность, насыщенность, трекинг и т.д.
Умное использование текстовой тональности усиливает визуальную иерархию на странице, что напрямую связано с передачей смысла сообщения.
4. Простота и лаконичность – гарант успеха
Вместо того, чтобы нагромождать сайт различными шрифтами, пытаясь выделить каждый фрагмент, усмирите пыл и фантазию, и подумайте «А стоит ли оно того?». Не зря же рекомендуют использовать 1-2 шрифта, точнее гарнитуры. Попробуйте. И Вы увидите, что все гениальное – просто.
5. Какой цвет?
Здесь правило простое и отходить от него не нужно. Отталкиваясь от Вашего фона, играете на контрасте, выбираете цвет, благодаря которому текст будет читабельный, удобный к просмотру и не режущий глаз.
Управление шрифтами
Мало кому удается сразу же подобрать шрифт к своему проекту. Обычно это занимает продолжительное время и превращается в кропотливый процесс, где веб-дизайнер анализирует, пробует, сравнивает гарнитуры.
Как правило, на рабочем компьютере дизайнера установлено множество всевозможных шрифтов, которые когда-то зацепили мастера, и он, чтобы не потерять их, внес их в свою коллекцию. Из-за этого разнообразия появляются 2 проблемы:
1. снижается скорость работы компьютера, а соответственно вся продуктивность
2. вы просто замучаетесь прокручивать все шрифты в меню Fonts для того, чтобы найти одну единственную нужную Вам в данный момент гарнитуру.
Именно поэтому на помощь приходят менеджеры шрифтов, в задачу которых входит организация и управление большим количеством шрифтов на компьютере.
Основная способность менеджеров шрифтов — активация/деактивация шрифтов в любой момент. Т.е. по сути, Вы сможете работать со шрифтами, не устанавливая их на компьютере, а значит, не перегружая систему.
В настоящее время существует довольно много менеджеров шрифтов, как платных, так и бесплатных, так что Вы можете выбрать то,что Вас больше устроит. Я лишь назову некоторые из них для примера: Nexus Font (бесплатный), Suitcase Fusion и Suitcase (платный), Linotype FontExplorer X (бесплатный), FontFrenzy (бесплатный) и др.
Что такое типографика и какие шрифты использовать на сайте
Как сделать текст более читабельным? Как подбирать шрифтовые пары? Какой шрифт выбрать для бизнеса и не ошибиться? Ответы на эти и другие важные вопросы в руководстве по типографике от Skillbox.
Один из источников информации — это текст. Чтобы привлечь внимание читателя и выделить материал среди других, его стараются красиво оформить и сделать легким для восприятия. Направление, которое содержит в себе правила о расположении текста, выборе шрифтов и размеров, называется типографикой.
Чтобы сделать текст удобным для чтения и правильно подобрать шрифт, необходимо узнать, из чего состоит типографика и какие шрифты можно использовать на сайте.
Что такое типографика
Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.
До появления компьютеров правила типографики использовали для создания макетов книг, газет и плакатов. Теперь их применяют для удобного отображения информации на дисплее — в программах и на сайтах.
Правила типографики учитывают параметры шрифта, размеры текста, его расположение. Чтобы хорошо оформить текст, нужно знать, какие шрифты использовать на сайте, что такое начертание, каковы пропорции между основным текстом и заголовком.
Как подбирать шрифты на сайт
Внешний вид сайта во многом зависит от используемых шрифтов. Правильно подобранный шрифт помогает читать быстрее. Обычно пользователь заходит на страницу, пробегает взглядом по тексту и сразу получает нужную информацию.
Если использовать какой-то необычный шрифт, рукописный или акцидентный, то читать станет сложнее. Скорее всего, посетитель сайта не станет тратить время на то, чтобы разобрать текст, и просто закроет страницу.
Чтобы решить, какой шрифт выбрать для сайта, нужно знать, какие бывают семейства, что такое начертание и классификация.
Классификация шрифтов
Шрифты отличаются характером, внешним видом, стилем. Какие-то — статические, какие-то передают динамику. Но все эти различия видит опытный человек, а простой пользователь, скорее всего, не заметит.
Главное визуальное различие шрифтов — засечки на буквах. Этот параметр называется классификацией шрифта. На сайтах чаще всего встречается две классификации: антиква и гротеск.
Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.
Передает ощущения надежности и традиционности. Шрифт с засечками выглядит строго и классически. Используется в бумажных книгах, журналах и печатных изданиях. Длинный текст, набранный таким шрифтом, удобно читать.
Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.
Гротеск ассоциируется с чем-то современным и легким. Его часто использует в чертежах и технической документации, в интерфейсах программ, на сайтах.
Что такое гарнитура
Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.
Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.
Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)
Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)
Выбор размеров шрифта
Размер шрифта подбирают для каждого сайта индивидуально. Главное, чтобы читать текст на странице было комфортно.
Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.
Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.
Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.
Нормальный текст: 18px
Заголовок 4: 18х1,6 = 27px.
Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:
Заголовок 3: 27х1,6 = 40px.
Вычислить, какой размер шрифта на сайте лучше использовать, можно с помощью калькулятора. На основе параметров обычного шрифта он подбирает оптимальные размеры для заголовков.
Сочетание шрифтов
Использование разных шрифтов на сайте помогает создать контраст и задает настроение во время чтения текста. Поэтому дизайнеры тщательно подбирают шрифты для сайта, анализируют разные сочетания.
Для выбора сочетания шрифтов нет каких-то определенных алгоритмов, потому что каждый проект индивидуален.
Обычно сочетают либо разные начертания одного и того же шрифта, либо выбирают два шрифта разной классификации. Комбинирование антиквы и гротеска помогает показать иерархию текста и добиться хорошей читабельности.
Самый простой способ подобрать пару шрифтов — просмотреть несколько, сравнить и проанализировать, какие пары подойдут.
Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.
Где брать шрифты
В интернете можно найти бесплатные и платные шрифты. И те, и другие шрифты можно использовать на сайте.
Бесплатные
Большая библиотека качественных шрифтов называется Google Fonts. Шрифт легко подобрать по нужным параметрам: выбрать только кириллицу, искать антикву или гротеск. С Google Fonts их можно скачать или напрямую подключить к сайту.
Часто дизайнеры рисуют свои шрифты и выкладывают их в общий доступ. Здесь стоит быть аккуратным, потому что не все они — качественные и подойдут для вашего проекта.
Платные
Ищут в специальных магазинах или на сайтах владельцев — студий и дизайнеров.
Больше о типографике и шрифтах
Шрифт проектируются для определенной цели. У каждого — разные характер и настроение. Поэтому к подбору шрифтов и верстке текста на странице важно подходить осознанно.
Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:
Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Разбираемся в основах типографики за 10 минут
Креативный директор агентства Agima Григорий Коченов рассказал Нетологии об основах типографики, шрифтовых трендах, ключевых понятиях и правилах комбинирования шрифтов.
Креативный директор агентства Agima
Типографика — это игра со словом, шрифтами и образами, благодаря которым получаются крутые концепты, как в этом видео:
Выравнивание текста
Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине.
В вебе принято выравнивать текст по левому краю, потому что это привычно и текст так легко считывается.
По правому краю выравнивают в редких случаях, например, цифры в таблицах. Это помогает соблюсти разрядность и визуально отделить определения от значений без дополнительных визуальных инструментов.
Выравнивание по центру используют для одноколоночных сайтов со спокойной композицией и ровным построением.
Выключка по ширине — это газетный стиль. Так верстают и книги, но для их вёрстки есть верстальщик, который трудится, чтобы сделать это качественно и гармонично, без разрывов между символами.
Базовые правила
Типографьте текст перед публикацией. Используйте типограф Лебедева. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире.
Разбивайте текст на абзацы по смыслу. Смотрите, где по смыслу заканчивается одна мысль и начинается другая. Большинство дизайнеров придерживаются позиции: «Когда у нас есть текст, можно половину выкинуть и относиться к нему, как к рыбному тексту». Нет, так делать нельзя.
Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.
Соблюдайте баланс длины строки и межстрочного отступа. Чем длиннее строка, тем больше должен быть межстрочный отступ, так как при чтении длинных строк легко сбиться. Чем больше между ними свободного пространства, тем проще найти нужную строку. Средне-оптимальное значение межстрочного отступа, от которого можно отталкиваться, — размер кегля основного шрифта, умноженный на полтора.
В небольших колонках, приближенных к газетным, межстрочный отступ можно уменьшать, но не делать меньше высоты шрифта, иначе всё смешается:
Типографика: основы и правила для создания понятного и эффективного сайта
Создатель сайта может без объяснений показать юзеру где читать, что смотреть, куда нажать и как купить. Всё это делается при помощи типографики и вёрстки в веб-дизайне. Как использовать типографику для своих целей и получить вовлечённость пользователя на максимум — читайте в нашей статье.
Что такое типографика и вёрстка
Изначально типографика относилась только к печатным изданиям и графическому дизайну. Но чем больше материалов попадало в сеть — тем быстрее понятие распространялось в сфере создания сайтов. Сейчас большинство под «Типографикой» понимают совокупность правил для создания страниц. Визуальное оформление отвечает за общее впечатление от текста и вложенных смыслов. Понятие «вёрстка» тоже прошло долгий путь и переросло из «создание макета на печать» в «создание сайта».
Прежде чем создать сайт для пользователя и завоевать его внимание — разберёмся в терминах.
Типографика — это свод правил по оформлению текста для удобства пользователя. Чтобы каждый нашёл нужную идею, быстро её прочёл, при желании задержался и насладился визуальной концепцией ресурса.
Вёрстка — это структурирование текста и всех сопровождающих его элементов в макете страницы, газетной полосы, книги и других печатных или электронных текстовых материалов. Важно понимать при этом, что вёрстка создаёт типографику.
Зачем использовать типографику и вёрстку при создании сайта
Правила типографики текста описываются одной фразой: «вашему читателю должно быть понятно и приятно это читать».
Чтобы проверить, отвечает ли проект этим требованиям, используйте три основных критерия. Проверьте насколько сайт:
Посетитель страницы должен получить всю информацию не только быстро, но и правильно её понять.
В веб-дизайне полезно знать правила и основы типографики, чтобы создать ресурс, на котором будет комфортно находиться читателю долгое время. Для начала поймём, как обращаться со шрифтами и текстовыми блоками.
Основные термины в типографике
Разберёмся в терминах, чтобы в следующих разделах было понятно о чём именно речь.
Шрифт — графическое изображение букв и знаков в едином стиле.
Кегль — размер буквы по вертикали со всеми её элементами.
Начертание — вид шрифта в пределах одной гарнитуры. Популярные: обычный, курсив, полужирный.
Гарнитура — это совокупность одного или нескольких шрифтов со всеми их начертаниями и во всех размерах в одном стиле.
Кернинг — расстояние между букв и символов.
Базовая линия — та, на которой находятся буквы.
Интерлиньяж — расстояние между базовых линий. Это кегль вместе с расстоянием между строк.
Виды шрифтов: с засечками (антиква) и без засечек (гротеск).
Как создать сайт, понятный для пользователей и эффективный для компании
Для начала разбираемся со шрифтами и общим наполнением. Первым идёт текст, после — визуальное оформление. Никто не подбирает шрифты до создания макета, не зная, сколько в нём будет текста и как его нужно будет распределить. Идеальная вёрстка не создаст для вас идеальный проект, но позволит читателям увидеть весь необходимый материал и направит на нужное целевое действие.
Текст
Основное наполнение страницы — текст. Пользователи приходят за необходимой справкой и хотят получить её как можно быстрее, желательно максимально понятно. Правила типографики текста такие:
Шрифты
Шрифты отвечают не только за удобство чтения, но и за визуальное наполнение ресурса. Можно создать страницу, на которой будет приятно находиться или захочется возвращаться снова, и сделать это только с помощью шрифтов. Поэтому пунктов при работе со шрифтами больше.
Структура
Когда готов текст, подобраны читабельные шрифты и их начертания — нужно всё собрать. Если у вас ошибки в структуре, то юзеры запутаются и уйдут с ресурса до того, как найдут нужный раздел. Поэтому запоминайте не только типографику, но и правила вёрстки: нюансы разметки, сочетания блоков и другие важные мелочи.
Советы для оценки сайта на «понятность» вместо заключения
Когда делаете проект — постарайтесь сохранить единообразие при общей читаемости. У вас есть все инструменты и правила использования для этого. Создавайте такое пространство, где человек не только найдёт то, что ему нужно или сделает целевое действие, но и захочет вернуться. При помощи типографики вы сможете создать подходящее пространство и для заказчика, и для пользователя.
Всегда перепроверяйте себя с точки зрения читателя. Можете зайти с другого браузера или со смартфона и посмотреть, будет ли ресурс удобный для поиска нужной информации. Посмотрите насколько легко ориентироваться в наполнении, заголовках и структуре. И постарайтесь оценить проект визуально, всё ли вам нравится, нет ли лишних элементов и правильно ли воспринимается информация.