Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

Подробное руководство по основам типографики

by
Read Time:18 minsLanguages:

Russian (Pусский) translation by Anastasia Reut (you can also view the original English article)

Если ты изучаешь веб-дизайн с нуля и хотел бы значительно улучшить свои знания в типографике, тогда это статья для тебя. Мы разберём гарнитуры, шрифты, анатомию и иерархию типографики, а также, как правильно выбирать гарнитуры. Ты узнаешь достаточно, чтобы стать очень опасным в этом деле за короткое время.

Темы

Как это принято для таких подробных руководств, мы охватим значительное количество тем, включая:

  • Известные 95%
  • Гарнитуры против шрифтов
  • Классификация типографики
  • Анатомия типографики
  • Кернинг и трекинг
  • Пунктуация
  • Иерархия
  • Выбор гарнитуры

Известные 95%

95% веб-дизайна составляет типографика! Веб-дизайна без шрифта не существует. Так почему бы не улучшить свои навыки в веб-дизайне с помощью чистой типографики? Это богатый мир, наполненный множеством символов, мир, который передавался из поколения в поколение творческими людьми, работающих в графическом и шрифтовом дизайне. Еще одна удивительная кроличья нора, чтобы нырнуть.

С самых первых дней веб-дизайн старался следовать идеям графического дизайна, особенно тому, как книги, журналы и газеты были выставлены и оформлены. Сегодня проектирование для интернета созрело и не следует этим концепциям так точно, как это было раньше. Адаптивный веб-дизайн - это один из примеров, когда дизайн самостоятельно созрел за пределами печатного мира во многих отношениях. Обратная сторона состоит в том, что это также привело к большим сложностям - возникло что-то, что, постоянно растёт и увеличивается. Это отнюдь не угроза, это очень захватывающе, и возможности не только растут, но и становятся сегодня огромными и невероятными. Мир веба вырос - совсем немного и будущее выглядит очень ярким!

Коммуникация

Шрифт более эффективный, чем что-либо другое при передаче сообщения в сети. Несомненно, графика может поддерживать и даже улучшать его, также, как и иконки, но обращение к пользователям происходит в основном через письменные слова - в отличие от рекламного мира, где изображения и графика могут передавать целые истории, не используя при этом много текста.

В сети мы говорим о страницах, сайтах, и больше всего об интерфейсах. Работа главным образом с графическими элементами для них оказалась наиболее трудной, часто неэффективной, неоднозначной и не подходящей для массового рынка.

без
с Dropbox

Пример с Dropbox  показывает, как графика самостоятельно не может достичь такой же уровень коммуникации, как графика с текстом. Это в лучшем случае выглядит неоднозначно.

Гарнитуры против шрифтов

Гарнитуры - это коллекция букв, цифр и знаков пунктуации, которые образуют набор стилей для алфавита. Думайте о гарнитуре, как о семействе шрифтов, члены которого имеют общие дизайнерские решения, но могут различаться по начертанию и стилю. Например, Bodoni или Gotham являются гарнитурами.

Вы разрабатываете гарнитуру.

Caslon
Gotham

Шрифты считаются подмножеством гарнитур. Они представляют собой физические (или цифровые) наборы определённой гарнитуры в одном определённом начертании и стиле. Open Sans Light - это шрифт; файл, который Вы используете в своей системе.

Вы делаете шрифт.

Open Sans

Классификация типографики

Предмет классификации гарнитур намного шире, чем может показаться на первый взгляд - особенно подклассификация. Прежде, чем пробежать по основам, давайте взглянем на некоторые классификации, которые вам необходимо знать.

Гарнитуры с засечками

Гарнитуры с засечками названы в честь небольших элементов, декоративных деталей на конце шрихов (анг. serif).

10 Remedial Design Pointers for Developers
Из 10 указателей для исправления дизайна для разработчиков

Гарнитуры с засечками  самые старые, о них мы поговорим далее в этой статье. Это не точная наука, но можно привести аргументы, что они берут начало ещё в эпоху римлян, когда те вырезали буквы на камнях, используя латинский алфавит. Существует также одна интересная теория, которая говорит о том, что они являются результатом использования долота при резьбе камней и являются художественным выбором из-за инструментов, используемых для создания лучшего конечного результата.

MailChimp
Latinotype
Pana

Засечки часто используют для более длинных фрагментов текста. Свидетельства об их «удобочитаемости» неубедительны, тем не менее этот аргумент часто возникает. Они хорошо работают в старой школе и классической среде, но могут также хорошо работать и в современной обстановке при правильном использовании.

The New York TimesThe New York TimesThe New York Times
The New York Times

Шрифт с засечками, тем не менее, является отличным выбором для заголовков. Заголовки, используемые The Washington Post, являются прекрасным примером использования засечки для передачи определенного традиционного стиля и качества, в то время как шрифт без засечек делает текст современным и в то же время хорошо читаемым.

The Washington Post

Шрифты без засечек

У шрифтов без засечек отсутствуют декоративные элементы. 

Проект Soli

Популярность таких шрифтов выросла в 1920-х годах. Они были разработаны, чтобы выглядеть современными и промышленными; Идеальны для рекламной индустрии и движения Art Deco того времени.

Cool Hunting Omakase
Medium
Webflow

Шрифт полусериф

Шрифт "полусериф" включает в себя как характеристики шрифтов с засечками, так и без засечек.

Latinotype

Брусковый шрифт

Брусковые шрифты похожи на шрифты с засечками, только они намного толще и более привлекательные.

VitesseVitesseVitesse
Vitesse

Раньше их часто использовали для пишущих машинок, чтобы убедиться, что на странице достаточно контраста. Раньше пишущим машинам было труднее отображать печатные буквы последовательно на странице; Это зависело от давления и свежести чернил и тому подобному. Поэтому тонкие засечки были мало эффективны при наборе шрифта на машинке. Индустрия рекламы в то время также нуждалась в чем-то новом и привлекающем внимание, поэтому брусковый шрифт набирал популярность.

everywhere.is
Proday
Flowhub

Рукописные шрифты

Рукописные шрифты часто иммитируют текст, написаный от руки, используя различную толщину и плавность. Их внешний вид более небрежный и неформальный, часто дает ощущение ручной и персональной работы. Рукописные шрифты, как правило, очень декоративные и редко используются для длинных абзацев текста (я надеюсь).

Paravel
Foster Type
Femmebot

Моноширинные шрифты

Как следует из названия, каждая буква и знак пунктуации моноширинного шрифта занимают одну и ту же горизонтальную ширину. Остальные шрифты, которые мы рассматривали до сих пор, имеют символы переменной ширины; Они известны как пропорциональные шрифты.

Пишущие машинки, ранние компьютеры и терминалы использовали моноширинный тип. Аппаратные средства того времени не были приспособлены к пропорциональным шрифтам переменной ширины. Сегодняшние текстовые редакторы для написания кода по-прежнему предлагают моноширинный шрифт по умолчанию. Ничто так ясно не говорит о «хакере» , чем код, написанный в моноширинном стиле. В последние несколько лет он также стал намного более популярным среди дизайнеров.

The Next Century
CSSDA

Анатомия типографики

Теперь давайте рассмотрим некоторые из наиболее важных особенностей анатомии шрифта.

Мы не будем слишком зацикливаться на мелочах здесь, ваша работа как дизайнера заключается в том, чтобы творчески подходить к самим шрифтам, а не пересказывать каждую мельчайшую деталь того, как они составлены. Это всё о том, что вы делаете, чего вы достигните, когда введёте шрифты в работу. Поэтому мой совет прост, посторайтесь понять и запомнить основы, получайте удовольствие и играйте с гарнитурами. Нет ничего плохого в том, что вы не знаете каждую деталь в анатомии шрифта. С другой стороны, может быть, я слишком прагматично отношусь к этому. Но решать вам!

Базовая линия

Wikipedia

Базовая линия - это линия, на которой размещаются символы.

Медиана

WikipediaWikipediaWikipedia
Wikipedia

Медиана - это потолок для большинства строчных букв.

Высота строчных букв

Промежуток между базовой линией и медианой образуют высоту строчных букв. Это можно увидеть как равную высоте строчной буквы «x», отсюда и ее название. Чем больше высота строчных у гарнитуры шрифта, тем более читабельной она будет при меньших размерах. Большая часть текста, который мы читаем в западном мире, состоит из строчных букв, и поскольку большинство отличительных признаков, которые позволяют нам распознавать буквы и, следовательно, слова, можно найти в этой области, высота букв сильно влияет на читаемость.

Это дополнительное пространство дает шрифту немного больше возможностей, чтобы просвечивать сквозь себя. Мы склонны читать в прыжках и потреблять буквы быстро и на подсознательном уровне. Таким образом, большая высота строчных хороша для основного текста, потому что длинные абзацы могут стать утомительными, если глазам придется работать усерднее, чтобы расшифровать алфавит. Заголовки, в которых вы обычно используете большие размеры шрифтов и меньшее количество текста в любом случае могут обойтись и оптимальной высотой строчных. Здесь у вас больше пространства для художественного творчества, которое подразумевает определенное настроение или характер, но не слишком влияет на удобство читаемости для пользователей.

Линии верхних и нижних выносных элементов

Линия верхних выносных элементов располагается над медианой, а линия нижних выносных элементов под базовой линией:

The Anatomy of Web TypographyThe Anatomy of Web TypographyThe Anatomy of Web Typography
Из Анатомии веб-типографики

Внутрибуквенный просвет

Внутрибуквенные просветы - это области, которые частично или полностью закрыты. Подумайте о буквах "о" или "а". Например, буква «a» имеет два просвета: один закрыт частично, второй - полностью. Шрифты с большими просветами обычно также хороши для удобочитаемости, поскольку буквы имеют больше пространства. Поэтому обратите внимание на шрифты с большей высотой строчных и большими просветами, если вы заинтересованы в том, чтобы текст был хорошо читаемым.

Интервалы

Давайте рассмотрим несколько разных типов интервалов в типографике.

Межстрочный интервал

Межстрочный интервал - это расстояние между двумя последующими базовыми линиями. В печати очень важно создать последовательный вертикальный ритм - базовую сетку - мини-систему сетки для шрифта на странице. В вебе такую точность, как известно, трудно достичь

Базовая сетка

from My name is Mikefrom My name is Mikefrom My name is Mike
Из Меня зовут Майк

Адаптивная среда делает применение базовых сеток менее привлекательным, поэтому, возможно, проинвестируйте ваше время в более прагматичные вопросы.

Хорошая высота строки для абзацев на веб-странице обычно находится между 1.3-1.6 (что пропорционально размеру шрифта). Заголовки могут и должны быть немного более узкими. Хорошим ориентиром, который следует иметь в виду, является то, что читатели должны быть в состоянии легко перейти к началу следующей строки. Вы ведь не хотите обременять пользователей какими-то трудностями, чтобы им приходилось сосредотачиваться на том, где продолжить читать, когда они достигнут конца строки текста.

Различная степень высоты строки также может (причудливо) влиять на цвет вашего текста. Более плотные высоты линий кажутся более темными, поскольку уменьшаются микро-пробелы между строками текста и наоборот. Вашей целью является нахождение баланса, чтобы текст выглядел согласованным, легким и читаемым, регулируя этот интервал. Читайте текст, используйте реальный текст, а не пустой lorem ipsum, и наблюдайте ощущения от чтения текста. Ощущения хорошие? Это должно быть всегда на первом месте!

Длина строки / Размер строки

Оба этих термина означают одно и то же: количество символов в одной строке текста. Хороший размер для дизайна в вебе лежит между 60-85 символами. Длина линии и высота линии несколько симбиотичны и зависят друг от друга. Чем больше длина строки в абзаце, тем больше должна быть высота строки.

Если это выглядит чересчур или слишком растянуто, отрегулируйте это, пока текст не станет читаемым и не будет выглядеть хорошо.

Кернинг

Кернинг используется для изменения микро-пробела между отдельными буквами. Каждый тип дизайна шрифта задуман по-разному, соответствуя потребностям каждой буквы.  Строчная буква "o" может занимать меньше места, чем буква "т", например. В вебе это утомительно настраивать, в то время как практика кернинга очень распространена в полиграфии.

Wikipedia

В вебе можно применять кернинг, полагаясь на данные, которые заданы в самом шрифте. Это функция может быть реализована с помощью свойств CSS text-rendering или font-feature-settings . Имейте в виду, что поддержка этих свойств пока не получила широкого распространения.

Межбуквенное расстояние / Трекинг

Это относится к согласованному расстоянию между всеми буквами в группе. Он не нацелен на отдельные буквы, так как кернинг, но вместо этого является единообразной корректировкой, которая охватывает весь затронутый текст, что приводит к большей или меньшей плотности и текстуре.

Когда вы используете большие фрагменты текста, например, для заголовков, немного отрицательный интервал между буквами может не так повлиять на текст. Вы ведь не хотите создавать впечатление, что текст дрейфует. Как и в случае с кернингом, когда шрифты предназначены для использования при меньших размерах шрифта, интервалу между буквами могут потребоваться эти небольшие толчки, поскольку исходный кернинг рассматривался по-разному.

Пунктуация

Кавычки

Используйте реальные кавычки. Точка!

Другие кавычки, которые часто используются, на самом деле являются прямыми кавычками, которые должны использоваться для дюймов и футов. Апострофы и одинарные кавычки также имеют свой реальный аналог. Да, вам нужно сделать на клавиатуре несколько пальцев кунг-фу, чтобы получить их, но конечный результат стоит того. Читайте также:

Многоточие

Многоточие относится к трем точкам, которые легко можно принять за три отдельные точки. Разница заключается в том, что они имеют больший интервал между каждой точкой. Но вы можете использовать дополнительное пространство слева и справа, решать вам.

Используйте это, если вы хотите опустить содержание - слова, фразы, строки, абзацы или часть кавычек. Это заполнитель, указывающий, что вы оставили какой-то текст.

Дефисы

Нет необходимости в дополнительном пространстве вокруг дефисов. Их основная цель состоит в том, чтобы связать слова вместе, как изобразительное искусство, 8-летнее и тому подобное.

Они также ваш единственный выбор для префиксов и суффиксов. Вы также должны использовать их, если вам нужно написать слово: T-U-T-S-P-L-U-S. Распределение времени и расстояния также являются частью их репозитория:

  • 03:45-04:00 p.m.
  • 1938-1945

Для этих диапазонов также можно использовать дефис.

Короткое тире

Короткое тире берет свое название от длины строчной буквы "n" (от англ. En Dash). Это немного длиннее дефиса и используется для диапазонов значений, а также для подразумеваемых отношений, таких как мастер-студент. Или для выделения.

Тире

Тире снова немного длиннее, размер прописной буквы "m" (от англ. Em Dash). Они должны использоваться, чтобы подчеркнуть паузу мысли и указать, что предложение незакончено. Оба тире могут выглядеть немного тоньше, чем дефис, как правило. Пожалуйста, не используйте два дефиса в тех случаях, когда лучше использовать тире. Ни в одной из версий тире не требуется дополнительное пространство вокруг себя.

Я знаю, эти детали пунктуации звучат не слишком интересно, но эти базовые знания о том, как их правильно использовать, должны быть важны для вас, если вы хотите делать дизайн с хорошей типографикой. Также может показаться тривиальным иметь три вида тире для выбора, потому что они выглядят очень похожими, но с другой стороны, в течение многих лет этому уделялось много заботы и внимания, и мы должны уважать работу дизайнеров, которые работали задолго до нас. Это их тяжелая работа и новаторский подход, на который легко опираться сегодня. Уделение внимания этим деталям - небольшая цена за то, что вы стоите на плечах гигантов.

Иерархия

Важно, чтобы вы передали сильную иерархию в своей типографике. Почему? Потому что, как мы установили в начале этой статьи, шрифт составляет примерно 95% вашего дизайна на странице. Если в вашем тексте слабая иерархия, у вас не будет шанса создания сильной иерархии в вашем общем дизайне.

Trent Walton
Typologic

Типографика предлагает несколько способов предоставить вашим зрителям визуальные зацепки, чтобы перемещаться по сайту так, как вы хотите. С помощью акцента вы можете сообщить им, что является самым важным и на что они должны обратить внимание в первую очередь. Вот несколько способов укрепить вашу работу в этом отделе:

Цвет

Если у вас не так много цвета на странице, элементы, которые имеют цвет, действительно выделяются. Как всегда, чем меньше, тем лучше. Примеры ниже используя простой эффект цвета достигают сильный эффект - даже без увеличения размера или дополнительного белого пространства.

Paravel
Dropbox

Размер

Увеличение размера шрифта всегда будет привлекать внимание к определенным элементам. Что мне нравится в разных размерах шрифтов, так это то, что можно легко создавать визуальные зацепки, которые читатель сможет использовать для перемещения по странице. Единственное предостережение заключается в том, что вам действительно нужно быть последовательным с использованием размеров шрифтов для определенных элементов. Вы не можете изменить его по своему усмотрению повсюду. Это, скорее всего, ослабит ваши проекты гораздо больше, чем единообразный размер текста.

Typeterrance
Dropbox

Пробелы

Дайте важным элементам пространство, чтобы дышать. Если они окружены пустым пространством, они просто подчеркиваются этим. Новички, похоже, немного уклоняются от использования большого пространства между элементами. В печати это может быть дорогостоящим, но в вебе вам это ничего не стоит. Поиграйте, посмотрите, что другие дизайнеры придумывают и крадите при случае. Ни магии, ни ракетостроения. Просто небольшой опыт - это все, что вам нужно, в конце концов вы сможете выработать хорошую меру.

CSS Zen Garden
Trent Walton

Начертания

Развёрнутое семейство шрифтов даёт вам множество начертаний на выбор. Во многих приведенных выше примерах вы могли видеть различные начертания для разных целей в работе. Для меня это не то, к чему я сразу прибегаю, обычно пробую другие инструменты для создания иерархии. Но это дело вкуса, независимо от того, что лучше всего подходит для вас и ваших проектов.

Latinotype

Скриншот

Dropbox

На скриншоте со страницы "О нас" Dropbox вы видите, что имена имеют иное начертание, чем должности. Очень простая техника для создания акцента.

Курсивы

Курсив отлично подходит для вторичной или третичной информации в работе с текстом (или акцентом). Приведенный ниже пример хорошо использует его для отображения адреса.

The Type Directors Club

Сильная контрастность в парных гарнитурах

Когда вы выбираете более одного шрифта для своей работы (лучше избегать выбора более двух), становится важным, чтобы эти шрифты сами создавали своего рода иерархию через их контраст. С одной стороны, они должны быть легко различимы друг от друга, а с другой стороны, не слишком разные. Есть несколько хороших рекомендаций по выбору шрифтов; Следующая глава поможет вам в этом.

Trent Walton
Stuntbox
Jason Santa Maria
Jason Santa Maria

Имейте в виду, что все вышеперечисленные правила работают только при их последовательном использовании. Если вы измените вещи очень сильно, ваша иерархия будет значительно ослабевать. Если все это для вас совершенно новое, перейдите к моей статье о принципах визуального проектирования, чтобы ускорить процесс изучения. После этого всё будет намного понятнее.

Выбор гарнитуры шрифта

Сегодня у нас есть тонны гарнитур на выбор. И не только это, у нас есть куча сервисов, которые хотят помочь нам в этом. Это может занять некоторое время, чтобы понять, что там на самом деле. Но для меня это хорошо. Веб-типографика прошла долгий путь, не только с точки зрения экосистемы, но и с точки зрения того, что браузеры позволяют вам делать в эти дни.

Решая, какие шрифты вы хотите использовать, я бы посоветовал вам прежде всего сосредоточиться на удобочитаемости и стиле, которые вы хотите передать в своих проектах. Тон и сообщение также важны, поскольку тип оказывает огромное влияние на это через его различные характеристики. Если вам удастся управлять этим, вы станете намного лучше остальных.

Сочетание гарнитур

Убедитесь, что вы создали хороший контраст между парными вариантами. Шрифты, которые выглядят слишком похожими, могут выглядеть сбивчивыми и негативно влиять на визуальную иерархию. Большим семействам шрифтов также выгодно иметь множество вариантов для изменения одного примера. Таким образом, вы можете использовать только один шрифт, не выглядя скучным.

Kitchen Sink Studios

Если вы хотите пойти дальше этого, то сочетание шрифтов без засечек и с засечками - это лучшее решение для начала, самое разумное. Это может привести к более сильному и интересному контрасту, который вы можете использовать в своих интересах - стилистически.


Hanson Wu

Используйте свой выбор последовательно. Избегайте переключения шрифтов для основного текста и заголовков. Решите, какой из них лучше всего подходит для читаемости, и который лучше всего подходит для передачи стиля, одновременно привлекая внимание читателей, и придерживайтесь этого.

Ben Goodyear

Некоторые конструкторы шрифтов создали версии с засечками и без из одного и того же шрифта. Они должны работать вместе аккуратно. Если у вашего шрифта есть соответствующий родственный шрифт, вы можете найти подходящий контраст, заложенный с самого начала.

adayinbigdata.com

Если вы соединяете два шрифта, старайтесь добиться сильных визуальных различий между ними. Держите различие тонким, если хотите, но оно должно быть, по крайней мере, заметным для быстрого глаза. В этом отношении сочитание двух шрифтов с засечками или без может быть сложным.

Exposure

Пока вы ищете визуальные различия, вы также хотите следить за какой-то общей чертой. Что-то, что может связать два разных шрифта вместе. Их визуальная структура, то, как разработаны их символы, могут иметь общие идеи. Похожие внутрибуквенные просветы и форма общих букв, например. Это свяжет их вместе еще более искусно. Подобная структура или геометрический дизайн помогут с этим точно.

При случае, воруйте! Когда вы найдете комбинации, которые вам понравятся, попробуйте сами и посмотрите, что вы можете с ними сделать. Обучение через подражание работе других прекрасно.

Завершающие мысли

Типографике не хватает жестких законов, которые могли бы помочь вам в принятии решений. Для меня это хорошо. Во многих отношениях типографика субъективна, но читаемость может быть одной константой, на которой вы всегда должны сосредоточиться прежде всего. Возьмите все идеи и концепции, которые мы покрыли с солью, и рассмотрим их как отправные точки для ваших собственных творческих исследований.

Существует много возможностей, чтобы способствовать лучшей типографике в вебе. Это такой замечательный инструмент для улучшения общения, и я считаю, что это ценное в культурном отношении знание, которое передавалось нам в течение многих поколений напряженной работы и исследований. Это фантастика, когда вы можете этим влиять на тонну письменного языка.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.