,

Какие шрифты на сайт выбрать

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 1

Начнем с того, что — любые… Именно любые, какие нравятся. Мы сейчас, с помощью математики, музыки и магии постараемся вписать любой шрифт играясь зависимостями и пропорциями.

Типографская шкала

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

Это классический типографский масштаб, записанный г-ном Брингхёрстом в «Элементах типографского стиля» :

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 3
Классическая типографская шкала из «Элементов типографского стиля» .

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

Классический типографский масштаб — это масштаб , поэтому он должен подчиняться свойству масштабирования: если f — размер в масштабе, то rf также должен быть размером в масштабе, где r — отношение масштаба.

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

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

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

Третьим и последним свойством любой шкалы является ее основная частота 0 . В хроматической гамме это штутгартская высота тона. В классической типографской шкале основной частотой является пика . Это значение, 1 пика = 12 пунктов, является базовым размером шрифта, используемым в печатной типографике.

Общая формула для частоты i i — й ноты гаммы:

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 7

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

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 9
Классическая типографская шкала. Это точные математические значения.

а

И теперь мы можем сравнить точные математические значения с первоначальными историческими значениями, угаданными ранними типографами:

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 11
Классическая типографская шкала. Это исторические ценности. Отклонения от математических значений отмечены красным цветом.

Человеческая интуиция была почти в точности верной, за исключением трех важных моментов:

Во-первых, есть потерянная записка . Отсутствует размер шрифта 42 pt , несмотря на то, что он полностью соответствует остальной шкале. Потерянная заметка необходима для завершения прогрессии шрифта 10 , 21 pt, _, 84 pt, но ее просто нет.

Во-вторых, есть дополнительное примечание . Каждый интервал классической типографской шкалы имеет пять нот, но оригинальные типографские схемы имеют шесть нот в первом интервале. Есть дополнительная заметка! Размер шрифта 11 pt не подходит для других примечаний.

В-третьих, одна из нот (30 pt) на самом деле является полутоном : она находится посередине между двумя нотами (28 pt и 32 pt). Первые два интервала правильные, потом появляется ошибка, а потом она удваивается и в следующем интервале (60 pt).

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

Приложения в дизайне

Пункт (pt) — стандартная единица печатной типографии. Однако некоторые средства массовой информации лучше подходят для других единиц измерения, таких как веб-типографика с ее единицами em и px. Было бы полезно, если бы мы могли адаптировать классическую типографскую шкалу ко всем средствам массовой информации.

Из музыки мы знаем, что изменение масштаба может изменить «ощущение» композиции: возможно, что-то подобное было бы возможно в типографской композиции?

Есть три способа изменить гамму: вы можете изменить основную частоту 0 , количество нот n в интервале или отношение r гаммы.

Изменяя основную частоту 0 , вы можете адаптировать существующую шкалу к новой среде. Например, 0 = 12 pt создает размеры шрифта для печатной типографики, тогда как 0 = 1 em создает размеры шрифта для веб-типографики.

Изменяя количество нот в интервале n , вы можете изменить количество доступных размеров шрифта. Например, музыкальная типографская шкала с n нотами обеспечивает n + 2 полезных размера шрифта: основной размер основного текста, размер «мелкого шрифта» и серию из n размеров заголовка. Классическая типографская шкала имеет высокое значение n , поэтому она обеспечивает большую палитру размеров шрифта.

Изменяя соотношение , r , вы можете изменить скорость, с которой увеличиваются размеры шрифта. Два убедительных выбора — это музыкальное соотношение ( r = 2 ) и золотое сечение ( r = ϕ ≈ 1,618034 ). При усреднении по многим веб-сайтам основной заголовок веб-сайта почти вдвое превышает размер основного текста. Это означает, что любой дизайн, основанный на музыкальной гамме, обладает прекрасным свойством: заголовок и основной текст представляют собой одну и ту же ноту, разделенную интервалом.

Вот некоторые из самых красивых музыкальных гамм:

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 13
музыкальная тритоника
Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 15
музыкальная тетратоническая гамма
Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 17
классическая типографская шкала

Однако есть альтернативы музыкальным типографским шкалам: некоторые дизайны основаны на золотом сечении . Эти дизайны будут наиболее красивыми, если они будут выполнены в золотой типографской шкале:

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 19
золотая дитоническая гамма

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

И вот облегченная версия, если вы предпочитаете простоту:

Какие шрифты на сайт выбрать - статьи Веб студия "July 31" 21
классическая типографская шкала

0 ответы

Ответить

Хотите присоединиться к обсуждению?
Не стесняйтесь вносить свой вклад!

Добавить комментарий