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