Чтобы использовать самое простое объяснение, типография — это дизайн и использование шрифтов в качестве средства коммуникации. Многие считают, что типография началась с Гутенберга и разработки подвижного шрифта, но типография уходит гораздо дальше. Эта ветвь дизайна на самом деле имеет свои корни в рукописных формах букв.
Типография включает в себя все, от каллиграфии до цифрового типа, который мы видим сегодня на веб-страницах всех видов. Искусство типографии также включает дизайнеров шрифтов, которые создают новые формы букв, которые затем превращаются в файлы шрифтов, которые другие дизайны могут использовать в своей работе, от печатных работ до упомянутых выше веб-сайтов. Какими бы разными они ни были, основы типографии лежат в основе их всех.
Элементы типографии
Если вы когда-либо общались с веб-дизайнером, который использует типографику в своих работах, вы, вероятно, слышали термины «гарнитура» и / или «шрифт». Многие люди используют эти два термина взаимозаменяемо, но на самом деле между этими двумя элементами есть некоторые различия.
Гарнитура — это термин, данный семейству шрифтов (например, Helvetica Regular, Helvetica Italic, Helvetica Black и Helvetica Bold). Все различные версии Helvetica составляют полный шрифт.
Шрифт — это термин, используемый, когда кто-то имеет в виду только один вес или стиль в этой семье (например, Helvetica Bold). Так много шрифтов состоят из нескольких отдельных шрифтов, все они похожи и связаны, но в некотором роде разные. Некоторые шрифты могут включать в себя только один шрифт, в то время как другие могут включать многочисленные варианты букв, которые составляют шрифты.
Если это кажется запутанным, не беспокойтесь, если кто-то не является экспертом в области типографики, он, скорее всего, будет использовать термин «шрифт» независимо от того, какой из этих терминов они действительно имеют в виду, и даже многие профессиональные дизайнеры используют эти два термина взаимозаменяемо. Если вы не разговариваете с дизайнером чистых шрифтов о механике ремесла, вы, вероятно, довольно безопасно используете любой из этих двух терминов, который вы предпочитаете. При этом, если вы понимаете различие и можете правильно использовать правильные термины, это никогда не бывает плохо!
Классификация шрифтов
Иногда называемые « универсальными семействами шрифтов », это большие группы шрифтов, основанные на ряде общих классификаций, под которые подпадают разные шрифты. На веб-страницах есть шесть типов классификации шрифтов, которые вы, вероятно, увидите:
- засечка
- Без засечек
- скрипт
- моноширинный
- скоропись
- Фантастика
Есть также ряд других классификаций шрифтов, которые являются ответвлениями от них. Например, шрифты «slab serif» похожи на шрифты с засечками, но все они имеют узнаваемый дизайн с толстыми короткими засечками на буквенных формах. Serif и Sans-Serif — две наиболее распространенные классификации шрифтов, которые используются на большинстве веб-сайтов.
Анатомия гарнитуры
Каждый шрифт состоит из различных элементов, которые отличают его от других шрифтов, что называется анатомия шрифта . Если вы специально не собираетесь заниматься дизайном шрифтов и не хотите создавать совершенно новые шрифты, веб-дизайнеры, как правило, просто должны знать основы терминологии шрифтов .
На базовом уровне элементы анатомии гарнитуры, о которых вам следует знать, это «шапка» и «высота по высоте», а также «спуски» и «восходящие».
Cap и x-height — это высота заглавных букв в гарнитуре и высота буквы x. Он говорит вам, насколько высокими будут самые большие буквы, а также насколько большими будут строчные буквы. Все шрифты имеют размеры на основе этих двух характеристик.
Спуски и подъемы — это части букв, которые идут ниже и выше линии x-высоты. Обычно это относится к строчным буквам. Например, буква «b» имеет восходящий элемент (кусок, который «торчит» из буквы), в то время как буква «p» имеет спусковое устройство (части, которые опускаются «вниз» из буквы).
Интервал букв
Есть несколько настроек, которые могут быть сделаны между и вокруг букв, которые влияют на типографику. Цифровые шрифты создаются с учетом многих из этих характеристик, и на веб-сайтах у нас ограничена возможность изменять эти аспекты шрифта. Это часто хорошо, так как способ отображения шрифтов по умолчанию обычно предпочтительнее.
- Кернинг : горизонтальное пространство между отдельными буквами
- Отслеживание : пространство между группами букв
- Ведущий : вертикальное расстояние между строками типа (это называется высотой строки в терминах веб-сайта)
- Мера : длина строк текста
- Выравнивание : визуальное размещение текста слева, справа, по центру или выравнивание
- Лигатуры : буквы смещены настолько близко друг к другу, что их анатомии объединены, по сути, перетекая одно письмо в другое
Больше Типографских Элементов
Типография — это больше, чем просто используемые шрифты и пробелы вокруг них. Есть также некоторые другие вещи, которые вы должны иметь в виду при создании хорошей типографской системы для любого дизайна:
« Дефис » — это добавление дефиса (-) в конце строк, чтобы помочь предотвратить проблемы с читаемостью или улучшить выравнивание. Хотя это часто встречается в печатных документах, большинство веб-дизайнеров игнорируют переносы и не используют их в своей работе, потому что это не то, что хорошо обрабатывается веб-браузерами.
«Тряпка» — это неровный вертикальный край блока текста. Обращая внимание на типографику, вы должны смотреть на свои текстовые блоки в целом, чтобы убедиться, что тряпка не влияет на дизайн. Если тряпка слишком неровная или неровная, это может повлиять на читабельность текстового блока и отвлечь его. Это то, что автоматически обрабатывается браузером с точки зрения того, как он переносит тип из строки в строку.
Одно слово в конце столбца — это вдова, а если оно вверху нового столбца, то оно сирота. « Вдовы» и «сироты » выглядят плохо и их трудно читать.
Обеспечение идеального отображения ваших строк текста в веб-браузере — это изнурительное предложение, особенно если у вас адаптивный веб-сайт и разные дисплеи для экранов разных размеров. Ваша цель должна состоять в том, чтобы просмотреть сайт в разных размерах, чтобы попытаться создать наилучший возможный вид, при этом принимая во внимание, что в некоторых случаях ваш контент будет иметь окна, сироты или другие неидеальные дисплеи. Ваша цель должна состоять в том, чтобы минимизировать эти аспекты дизайна шрифта, а также быть реалистичным в том факте, что вы не можете достичь совершенства для каждого размера экрана и дисплея.
Шаги для проверки вашей типографии
- Тщательно выбирайте гарнитуры, изучая анатомию шрифта и его семейство.
- Если вы строите дизайн с использованием текста-заполнителя , не одобряйте окончательный дизайн, пока не увидите настоящий текст в дизайне.
- Обратите внимание на мелкие детали типографии, такие как дефисы и тире.
- Посмотрите на каждый блок текста, как будто в нем нет слов. Какие формы делает текст на странице? Убедитесь, что эти формы несут весь дизайн страницы вперед.