Как комбинировать шрифты? Типография в сети и не только

0
7

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

Разные сорта

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

В примере слева вы можете увидеть два Footprint MT Light (Droid Serif), спорящих друг с другом в одном блоке текста. Хотя они ближе друг к другу, чем справа, соединение выглядит неестественно и сопротивляется. С другой стороны, у нас есть пример использования шрифта Museo Sans в заголовке и Droid Serif в контенте. Как вы можете видеть, они выглядят намного лучше, и у нас также нет проблем с различием двух разделов контента.

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

Только один выразительный шрифт

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

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

До трех разрезов

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

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

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

Но что, если еще один?

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

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

Соединения в пределах одной семьи

Один из простых способов обеспечить хорошо подобранную типографию без необходимости сравнивать разрез — использовать тот, который был создан в одной семье. Примерами такого типа решений являются многие, даже среди тех, кто свободен. У нас есть Roboto в нормальном исполнении, Source Sans Pro и его коллега — Source Serif Pro, вышеупомянутая семья Droid и многие другие. Использование их не всегда является самым гламурным, но если вы не чувствуете себя комфортно самим выбирать сами, то это, безусловно, хорошее решение. Они стилистически согласованы, но также и с точки зрения конструкции, что очень важно, особенно когда мы хотим использовать их бок о бок в одной строке. В дополнение к решениям в разных категориях, вы можете достичь тех, которые отличаются по толщине — мы можем иметь их до 9.

Как комбинировать порезы?

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

Высота буквы «x»

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

Как вы можете видеть выше, ползунки Roboto и Playfair Display имеют одинаковую высоту, поэтому, если вы установите минимальный размер заголовка на 120% основного текста, он будет больше. Если для второго примера используется аналогичное правило, может случиться, что текст заголовка будет размером основного текста (визуально), хотя высота, очевидно, будет меняться. Значение высоты буквы «x» также важно при выборе ведущих — более высокие шрифты этого коэффициента требуют большего количества свинца, чем меньшие.

Контраст, наклон «пера», засечки, формы букв

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

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

Толщина линии

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

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

Для ленивых

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