«о шрифте»: простые принципы хорошей типографики

Размер шрифта

Свойство задает размер текста.

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

Всегда используйте правильные HTML-теги, например < H1 >-< H6 > для заголовков и < p > для абзацев.

Значение размера шрифта может быть абсолютным или относительным размером.

Абсолютный размер:

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

Относительный размер:

  • Устанавливает размер относительно окружающих элементов
  • Позволяет пользователю изменять размер текста в обозревателях

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).

Статика и динамика

Рисунок букв шрифта может быть статичным или динамичным. Чем больше горизонтальных и вертикальных линий в строке, тем более статичным является шрифт. А линии и дуги, не совпадающие с горизонталью строки, придают шрифту динамичности. На динамику влияют: наклон оси наплыва у букв o, e, c, p, b, d, наклон перекладины е, окончания штрихов букв s, c, a и форма засечек. Все эти элементы могут быть прямыми, диагональными или изогнутыми. Курсивное или наклонное начертание делает рисунок еще более динамичным.

Статичный рисунок – шрифт Din PT, динамичный рисунок – шрифт Venetian, максимум динамики – шрифт Diana.

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

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

Геометрия

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

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

Гуманистический гротеск – шрифт Leksa Sans, геометрический гротеск – шрифт Futura PT, модульный шрифт – Robotesqa 4f.

Геометрическое построение с нуля, вопреки опыту и традиции, характерно для XX века. Первые геометрические шрифты появились в 1920-1930 годах под влиянием конструктивизма. Все буквы строились из простых геометрических форм: круга, квадрата, треугольника. Чаще всего это были шрифты без засечек, или засечки заменялись брусками. Сегодня их называют геометрические гротески и геометрические брусковые.

Идеи научного прогресса, стандартизации, упрощения, неизбежно привели к созданию новой формы шрифта. Простой чертеж способен полностью заменить рукописное и словолитное наследие, даже общепринятые очертания букв (графемы) могут измениться. Например, круглые О, С, D могут стать квадратными и весь шрифт может строиться из универсальных модулей. При этом форма букв потеряет влияние на читабельность и образ. Все будет зависеть от формы модуля: дуги, многоугольника, квадрата. Например, модульные шрифты эпохи Звездных Войн, Терминатора и Робокопа, своей нерукотворной формой изображают фантастическое будущее, с космическими полетами, умными машинами и прочими технологиями, которыми так увлечены люди с середины XX века.

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

Геометрические гротески в современных логотипах.

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

Добавление шрифтов в десктопную версию Figma

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

Добавление шрифтов в десктопную версию Figma выполняется в несколько шагов:

  1. Сначала необходимо скачать подходящий шрифт на сайте Figma (впрочем, не обязательно именно здесь).
  2. Далее выполнить его установку.
  3. После завершения – перезагрузить систему Figma.

Добавление шрифтов в десктопную версию Figma

Как изменить, то есть добавить и установить новый шрифт в Figma? Стандартным путем. К примеру, в Windows это можно сделать двумя способами:

  • Войти в директорию со скачанным файлом и дважды кликнуть мышкой по его названию. В новом окне появится начертание, вверху страницы – кнопка «Установить». Просто нажмите на нее.
  • Скопировать файл. Затем через «Проводник» зайти в системную папку Windows и там положить скопированный файл в папку Fonts. Всё, теперь он доступен для работы.

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

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

Можно поступить так:

При этом процесс установки не подразумевает обязательные изменения в системной папке. Можно поступить так:

  1. Отдельно создать в компьютере папку для новых загруженных шрифтов.
  2. Собрать в ней все скачанные файлы.
  3. Войти в панель управления и там, в появившемся справа списке, задать способ отображения «Мелкие значки».
  4. Найти в списке разделов «Fonts» и зайти туда.
  5. В меню справа кликнуть «Параметры…».
  6. Вы окажетесь на странице, где нужно поставить галочку для разрешения копирования в папку Fonts ярлыков файлов, предназначенных для инсталляции.
  7. Сохранить внесенные изменения.
  8. Открыть созданную перед этим папку для новых файлов, скопировать их ярлыки и поместить в системную папку.

Теперь остается перезапустить Figma. После этого все добавленные шрифты можно будет применять.

Курсив и наклон

Курсивные и наклонные начертания часто встречаются в современных шрифтовых семействах в дополнение к прямым. При этом они имеют различные функции и смысл.

Курсивное начертание – шрифт Kudryashev Italic, наклонное начертание – шрифт Pragmatica Italic.

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

Наклонные начертания (Oblique) получаются путем скоса прямых букв и служат в основном для придания надписи ощущения скорости, но иногда и для выделений в тексте. После скоса все вертикальные линии становятся наклонными, даже круглые формы под наклоном теряют часть уникальности. Более монотонная надпись, как бы покосившаяся от ветра, воспринимается как нечто быстрое и стремительное. Поэтому наклонные шрифты – отличный выбор для спортивной или автомобильной тематики.

Базовые правила

Типографьте текст перед публикацией. Используйте типограф Лебедева. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире.

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

Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.

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


Маленькое правило, которое может спасти

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

«Рабочие лошадки»

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

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

Эрик Шпикерманн

Универсальные шрифты Шпикерманн называет «рабочими лошадками» — с их помощью можно решить рутинные задачи бизнеса максимально быстро и дёшево. У любого подобного шрифта должны быть:

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

В качестве «рабочих лошадок» Шпикерманн выделяет девять шрифтов:

Полезные советы и ресурсы по теме

Прочитайте книгу Александры Корольковой «Живая типографика». Это базовое пособие о типографике для начинающих дизайнеров, которое доступно бесплатно.
Еще один электронный ресурс, но по платной подписке — учебник «Типографика и верстка» издательства «Бюро Горбунова»

Обратите внимание на оформление сайта — это лучшая реклама содержания.
На начальном этапе полагайтесь на готовые подборки сочетаний гарнитур. Они есть на множестве сайтов: FontPair, Fontjoy, Canva Font Combinations и других.
Используйте не более 2–3 гарнитур в одном проекте

Это правило универсально для задач любой направленности в типографике. Если вы только начинаете изучать что такое типографика, рекомендуем сперва ограничиться одной гарнитурой.
Установите расширение WhatFont для Chrome или для Safari, чтобы быстро узнать название понравившегося шрифта.
Типографика построена на акцентах. Используйте начертания и кегль, чтобы расставлять их и создавать структуру текста. Традиционно заголовок имеет жирное начертание и значительно больший кегль, чем основной текст. Например, он может быть выполнен шрифтом Helvetica Bold 48 pt, а основной текст — Helvetica Regular 14 pt.

Индивидуальность

Чтобы печатное издание выглядело хорошо, дизайнер собирает шаблоны, подбирает шрифты и тем самым формирует ожидания читателя

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

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

Эрик Шпикерманн

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


Изображение: издательство «Манн, Иванов и Фербер»

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


Правильный ответ — в конце статьи :-) Изображение: издательство «Манн, Иванов и Фербер»

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

Функция

Типографика неразрывно связана с вёрсткой — от размера полей и формата зависит, какой интерлиньяж вы выберете, какой будет межсловный пробел и размер абзаца. А сама вёрстка зависит от задачи — где, когда и зачем человек будет пользоваться печатным продуктом.

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

1. Домашнее чтение. Читатель в спальне или в другом месте для отдыха

Важно, чтобы книгу или журнал можно было держать в руках и ничего вокруг не отвлекало. Лучший выбор для вёрстки книг — канон Ван де Граафа или золотой канон Яна Чихольда, которые часто используются в вёрстке книг

Они позволяют оставить достаточно места на полях, их удобно держать, и всё внимание читателя фокусируется на рассказе автора


Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

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

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


Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

3. На кухне. Здесь люди читают инструкции и поваренные книги не в идеальных условиях. Поэтому цвет бумаги для вашего продукта должен быть не белым, а жёлтым — иначе она очень быстро запачкается.

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


Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

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

Для таких журналов важно оставить место для пальцев на полях, а вёрстку издания сделать строгой — в несколько узких колонок


Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

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

Антиква

Стиль: академический, классический, традиционный, консервативный, элегантный.
Применение: деловые газеты, научные статьи, книги, учебники, документация.

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

Антиква старого стиля

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

Переходная антиква

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

Антиква нового стиля

Отличается более сильным контрастом между основными и соединительными линиями, строго вертикальными овалами, тонкими и длинными засечками.

Брусковая антиква

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

Выбор шрифтов для проекта

Выбор размера шрифта

При составлении типографики с использованием шрифтов с заческами или без них обязательно учитываются размер букв и кернинг.

Стандартным является шрифт 12 пикселей с единичным интервалом.

Именно такие параметры применяются к основной массе текстов, размещаемых как на сайтах, так и полиграфии. Практически все книги печатаются именно таким текстом.

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

Выбор масштаба шрифта

Остается найти ответ на вопрос, а как подобрать масштаб? Все довольно просто!

Необходимо на область размером с лист А4 уместить не менее 2000 символов и не более 2800. Автоматически шрифт получится пропорциональный и удобочитаемый.

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

Выбор геометрии шрифта

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

  • высота букв,
  • жирность,
  • контрастность цвета
  • и кернинг.

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

Подписывайтесь на обновления блога «Дизайн в жизни»

и мы обязательно опубликуем для вас еще больше полезных уроков!

Обзор классических и трендовых шрифтов

Bodoni

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

Meta

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

Headline News

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

Futura

Futura — это классический геометрический гротеск и двадцатые годы, когда эстетизировалось промышленное производство. До этого в шрифтах прослеживались следы пера, а здесь пера не осталось: все формы и линии — это либо идеальный круг, либо прямая линия. Даже в сравнении с Gill Sans она выглядит более строгой и геометричной, если сравнить по буквам «a».

Альтернатива Roboto, меняющая представление о том, что такое типовой шрифт.

San Francisco

Первый шрифт от Apple за последние 20 лет, пришедший на смену Helvetica.

Обязательно посмотрите презентацию Apple о том, как его создавали, чтобы понять, что такое типографика.

IBM Plex

IBM Plex — это Helvetica XXI века. Стильный шрифт со своим настроением, комбинирующий плавные рукописные и жесткие «машинные» линии.

Рекомендации по выбору шрифтов в Figma

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

Какие же шрифты использовать в Figma в вашей конкретной системе? Тут следует принимать во внимание следующее:

  • Показатель производительности. Есть ли какое-то ограничение производительности? Сколько шрифтов в вашем случае вы можете загрузить в Figma? Планируете ли вы использовать шрифты с других платформ (разумеется, доступные для применения)?
  • Индивидуальные параметры. Имеются ли фирменные шрифты компании, которые необходимо будет применять?
  • Есть ли необходимость в дополнительной системе шрифтов. Хватит вам единой системы, или нужно несколько стратегий? К примеру, при создании маркетингового сайта, большое значение может иметь узнаваемость бренда (в том числе и по шрифтам).
  • Сочетание шрифтов парами. Позволит ли одно семейство шрифтов иметь достаточный типографический диапазон? Что касается сочетания, то большие тексты, например, можно выполнять декоративными шрифтами (не слишком ими злоупотребляя), а для основного текста применять разборчивые шрифты.

Засечки и бруски

Наличие засечек (Serif) у шрифта – самый важный признак в любой классификации шрифтов. Форма засечки зависит от общей логики построения шрифта, а эта логика развивалась с Древнего Рима до наших дней. Из-за древнего происхождения шрифты с засечками называют антиквами. Шрифтами с засечками можно наслаждаться, как хорошим вином, на эту тему пишут целые книги, а здесь речь пойдет о том, в чем смысл засечек вообще и как их правильно использовать.

Вогнутые засечки – шрифт Lazurski, линейные засечки – шрифт Petersburg, брусковые засечки – шрифт Pragmatica Slabserif.

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

В крупном же размере шрифты с засечками становятся историческим костюмом на персонаже, отправляют зрителя в нужное время и место. Венецианская антиква, Итало-Французская антиква, Английская антиква, Классицистическая антиква – все это порталы в свою страну и историческую эпоху. Чем выше уровень культурной искушенности зрителя, тем точнее он переместится. Даже массовый потребитель, не знающий тонкостей, решит, что перед ним классический, исторический шрифт, а эти ассоциации вызывают доверие. Все шрифты с засечками, кроме брусковых, в той или иной степени несут пафос их Великого предка – римского капитального шрифта с колонны Траяна. Это понимают голливудские продюсеры и все, кто им подражает, поэтому Trajan является самым распространенным шрифтом в кино.

Шрифт Trajan в кино

Бруски сильно отличаются от других форм засечек, поэтому для брусковых шрифтов часто выделяют отдельное место в классификации. Засечка считается бруском, если она достаточно ровная, прямоугольная и по толщине сравнима с основным штрихом шрифта. Такие буквы неудобно писать каллиграфическими инструментами, их лучше чертить, штамповать или вырезать. Такая форма не способствует комфортному чтению, но зато может переносить зрителя в разные места, от Дикого Запада до Германии 1930-х годов. Главная черта брусковых шрифтов – патриархальная суровость, поэтому они органично смотрятся в заводских цехах, магазинах инструментов или стейк-хаусах.

Семейства шрифтов CSS

В CSS существует два типа имен семейств шрифтов:

  • родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
  • семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)
Generic family Font family Описание
Serif Times New RomanGeorgia Шрифты с засечками имеют небольшие линии на концах на некоторых символах
Sans-serif ArialVerdana «Sans» означает без-эти шрифты не имеют линий на концах символов
Monospace Courier NewLucida Console Все одноместные символы имеют одинаковую ширину

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

Открытость

Разомкнутые буквы, например c, могут быть сильно открыты, умеренно открыты, или практически закрыты. Открытость (апертура), влияет на форму букв: c, a, e, s, з, э, є. Очень открытые буквы компактнее, чем закрытые, от их ширины во многом зависит емкость шрифта. Частотный анализ языков показывает, что буквы e, a, s, c составляют более 30% английского языка, а буквы е, а, с, з – это почти 25% русского. Поэтому, за счет большей апертуры и легкого спрямления овальных элементов: о, p, d, b, q можно получить очень компактный шрифт, который не будет выглядеть сжатым и сохранит хорошую читабельность, например как PT Sans.

Открытый шрифт – PT Sans, средняя апертура – шрифт Textbook New, закрытый шрифт – Helvetica.

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

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

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

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
3D-тест
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: