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