Типизация в Интернете основывается на нескольких решениях и принципах, которые эволюционировали на протяжении многих лет в процессе формирования формы типографии, известной из печатных материалов, в частности книг. В идеальном мире для использования дизайнера сайта будут доступны все эти решения, к сожалению, не всегда. Часто во время проектирования мы должны идти на уступки, но важно помнить некоторые основные грехи, которые не стоит делать.
Слишком много разрезов
Использование более одного фрагмента в графическом дизайне было потрясающей экстравагантностью для большей части типографики. Впервые эта мода появилась с печатью и была основана на самой простой потребности в принтерах — сокращение затрат на печать за счет уменьшения размера печатного текста. Сегодня количество сокращений и их вариаций (жирный, курсив) не влияет на решения, сделанные веб-дизайнером, что часто приводит к невероятным скачкам. При работе с текстом имейте в виду, что он должен быть фоном для контента и не мешать приему.
Количество различных семейств шрифтов, выбранных на странице, должно быть, как можно меньше. Для интересного и вместе с тем эстетического эффекта приятно удовлетворять две семьи и не переопределять разнообразие толщины (все зависит от размера нашего сайта и разнообразия информации, содержащейся на нем). Для простых веб-сайтов вы можете быть удовлетворены даже одной семьей и покатыми разновидностями и смелыми, как это делали типографы на протяжении веков.
Если мы решили объединить сокращение, нам нужно приблизиться к нему с правильной точностью, потому что неправильный выбор может уничтожить положительный прием даже самого продуманного макета и самой графики. Пути и правила объединения разреза — это целая масса, но самое главное — выбрать разрез, чтобы они не противоречили друг другу. Стоит иметь одну доминирующую, а другую менее заметную, чтобы избежать соединения разных типов засечек друг с другом, декоративные буквы с засечками (которые сами по себе немного декоративны). Также имейте в виду, что текст, посвященный большим блокам, не очень декоративен, так как он мешает приему текстов (например, вы можете взять, например, быструю смену основного разреза Antyweb после обновления вашего шаблона).
Также важно обратить внимание на высоту x (мера от основания букв до высоты символа x), если два разреза имеют схожую ценность с этим, существует большая вероятность того, что они будут соответствовать друг другу. На приведенном ниже рисунке я показал три примера популярных шрифтов Roboto. Как вы можете видеть, разница по высоте x для Garamond и Roboto значительна, что для меня отрицает их присоединение. Следующие два примера намного лучше с разрезом Roboto Slab, поэтому стандартный брат Roboto идеально подходит, так что это самый безопасный вариант.
Те, кто не убежден в собственном выборе, всегда могут воспользоваться массой ранее выбранных решений (к сожалению, некоторые из них не имеют польских символов):
fontpair. co,
justmytype. co,
hellohappy. org/beautiful-web-type
Вы также найдете готовые предложения для каждого Google Fonts.
Разумеется, его не следует путать с тем, чтобы использовать и объединять куски, чтобы тексты были с теми, которые часто предназначены для художественного характера или что-то изображать. Примером хорошо используемого набора разрезов является, например, домашняя страница Typekit.
Слишком широкий или узкий блок основного текста
Снова вернемся к старой, хорошей типографии, правила которой говорят, что для удобного чтения текста колонка с ней должна содержать от 66 до 72 символов, что соответствует приблизительно 9 -11 словам. Эта сумма позволяет максимально сосредоточиться на тексте и не требует движения глаз или даже головных болей при чтении. Это очень сложное правило для обслуживания в Интернете из-за горизонтальных пропорций экранов мониторов, которые каким-то образом заставляют дизайнера разрабатывать все это, но даже не совместимы с нашим текущим шаблоном. Поэтому я не могу быть настолько критичен в своих мнениях, но пребывание в 9-11 словах в стихотворении делает чтение намного более комфортным, и как только вы начнете обращать на него внимание, вы почувствуете Я начинаю переработку некоторых ваших страниц. Правильное соответствие количества слов в строке также делает ее хорошо выглядящей даже после того, как мы ее оправдали, даже если мы не можем разделить слова. В приведенном ниже примере я показал две из этих зависимостей. Текст в первом абзаце представляется намного лучше читаемым. В случае второго распределения к первому огню большая часть неоправданной корректировки выбрасывается, из которой мы должны отказаться, если линии имеют недостаточную ширину.
Конечно, как и в любом случае, и здесь должен быть здравый смысл. Для типичных новостных сайтов, где новости не важны, нет необходимости форсировать эту политику, но важно знать об этом и использовать ее по своему усмотрению.
Та же проблема — слишком узкий текст, часто встречающийся на боковой панели, текстовые блоки с короткой информацией. Если объем пространства ограничен, вы должны думать об уменьшении уровня записи и решительно воздерживаться от его оправдания, поскольку практически это всегда будет иметь плохой эффект, как вы можете видеть ниже. Узкие текстовые блоки также важны для соответствия текста (обычно больше, чем для обычного текста).
Неадекватно обозначенная иерархия заголовков
Другой важной проблемой для страниц, содержащих много текста, является недостаточный акцент на иерархии заголовков и их дифференциации. При стилизации h1-h6-тегов нам нужно иметь в виду, что они должны отличаться от h1-h6, что должно выглядеть немного более заметным, смелым основным разрезом. Создавая свою иерархию, используйте масштаб в Photoshop, чтобы помочь вам правильно настроить текст.
Использовать варианты, созданные браузерами
В эпоху популярности font-face у нас есть практически неограниченные возможности выбирать подходящие для их собственных предпочтений. Однако это часто приводит к высокой безрассудности, использованию разрезов, которые не имеют смелых или наклонных вариаций в местах, где это требует наша CMS. Варианты решения этой проблемы — два, или клиент будет недоволен, потому что вы не увидите эти эффекты, или мы не будем удовлетворены, потому что утолщение и наклон вместо типографа сделают браузер, который на 99% сделает очень несчастным. Аналогичную проблему можно встретить, когда мы решаем использовать браузер для создания заглавных букв (заглавные буквы будут некорректно толстыми по сравнению с небольшими). Решением этой проблемы является использование новых объявлений и новых методов CSS, но с другим текстом.
Избегайте измельченных разрезов и непроверенных веб-сайтов
Времена, когда избегали засечек в текстах, были оправданы давно, на данный момент можно с уверенностью сказать, что как засечка, так и без засечек могут сделать большие и трагические, все зависит от разреза, который мы выбираем.
Очень важным правилом, которое должен учитывать каждый веб-дизайнер, является необходимость тестирования webfonts перед тем, как применить их к своему проекту и показать их клиенту. Как вы все знаете, внешний вид разреза, особенно нестандартный (очень тонкий, декоративный), может варьироваться в диаметрально между тем, что мы видим в браузере, и тем, что показывает нам Photoshop. Иногда даже лучший разрез может потерять все свое обаяние, если он не отображается должным образом в браузере.
Выше вы можете увидеть два примера одного и того же шрифта — Alegreya Sans Thin. Первый — это скриншот Google Fonts, второй — Photoshop. Поскольку вы уже можете видеть, что яркость самого текста существенно отличается, что может не полностью вызывать отклонение, но даже думать о соответствующем совпадении.
Есть много инструментов, чтобы проверить их внешний вид. Если вырезание происходит из базы данных Google Fonts, дело просто, потому что предварительный просмотр сразу доступен в браузере. Если его нет, генератор FontSquirrel может помочь вам с помощью создания и загрузки webfont практически для любого типа, если позволяет его лицензия.