Дизайн
Net Lab
1634

Гайд для веб-дизайнера: 5 шагов к идеальной типографике

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

В закладки

1. Где вообще искать шрифт и сколько это стоит

Прежде чем купить шрифт, следует знать где он будет использоваться. Существует несколько лицензий при покупке шрифта, рассмотрим 2 наиболее популярные: Desktop и Web.

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

На данный момент есть 2 основных ресурса:

Их лицензия предполагает 10 000 просмотров в месяц. Также можно посмотреть шрифт на сайте шрифтового дизайнера, там он может стоить дешевле.

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

Если вы пользуетесь Creative Cloud и продуктами компании Adobe , то наверняка знакомы с fonts.adobe.com. Пока нет? Вы можете подписаться на этот сервис за 49.99$ в месяц.

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

Следующая система typography.com – как пример того, чем не надо пользоваться. В ней всего 2 кириллических шрифта (Gotham и Whitney) при стоимости подписки 100 долларов в месяц. Хотя, если они вам принципиально нужны, можете заплатить, имея при этом вдвое меньше просмотров

monotype.com - отличный сервис всего за 15 долларов в месяц с доступом к гигантской библиотеке, где много кириллицы.

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

Открываете каталог одного из сервисов:

Выбираете шрифт, который вам нужен, платите небольшую сумму и берете шрифт в аренду на определенный срок (от минуты до недели).

И, конечно, есть бесплатные сервисы:

2. Прежде, смотри на атаномию буквы

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

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

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

Существует 2 основных истока таких инструментов – широкое перо и узкое перо.

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

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

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

3. С засечками или без?

Как вы знаете, шрифты бывают трех типов:

  • Гротеск (без засечек)

Шрифт без засечек в свою очередь разделяют на 2 категории: гуманистические и геометрические.

Самый яркий пример гуманистического гротеска - Gill Sans

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

Примеры - Pt Sans, Mediator

Самый яркий пример геометрического гротеска Futura

Характеризуется низкой динамикой, минимальным контрастом шрихов, правильными формами.

Примеры - GT Walsheim, Proxima Nova, Graphik

  • Шрифты с засечками - Антиква

Классифицируются на 3 типа:

Гуманистическая (старого стиля) - ширококонечное перо

Самый яркий пример Garamond

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

Примеры Minion, Arno

Контрастная (Классицистическая) - остроконечное перо.

Яркий пример Bodoni, Didona

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

Для сравнения:

Переходная - нечто среднее между ними

Характеризуется слабым влиянием ширококонечного пера, слабым наклоном оси овалов, умеренным контрастом штрихов

Примеры - Georgia, GT Sectra

Определить то перед вами за шрифт помогут ответы на следующие вопросы:

  • Какой у него наклон оси?
  • Какой у него скелет?
  • Какой контраст штрихов?

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

4. Без чего шрифт нельзя считать идеальным

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

Какими качествами должен обладать идеальный шрифт?

Во-первых, должен четко отображаться на экране.

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

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

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

Что делает шрифт читабельным?

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

Open Sans более читабельный, чем Pt Sans. А Verdana более читабельный, чем Open Sans.

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

Игорь
Дизайнер

5. Не рекомендую работать с шрифтами в Photoshop

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

В чем разница этих технологий?

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

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

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

Игорь
Дизайнер

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

есть те, кто не видит мыло?
Не надо так!)

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

_______________________________________________________________________

На написание статьи вдохновил Филипп Нуруллин.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Net Lab", "author_type": "self", "tags": [], "comments": 10, "likes": 13, "favorites": 68, "is_advertisement": false, "subsite_label": "design", "id": 53903, "is_wide": false, "is_ugc": true, "date": "Thu, 20 Dec 2018 13:13:42 +0300", "is_special": false }
0
{ "id": 53903, "author_id": 215305, "diff_limit": 1000, "urls": {"diff":"\/comments\/53903\/get","add":"\/comments\/53903\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/53903"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
10 комментариев
Популярные
По порядку
Написать комментарий...
1

Если верить wiki, то типографика не только шрифт

Типогра́фика (от греч. τύπος — отпечаток + γράφω — пишу) — искусство оформления печатного текста[1], базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки. Типографика, с одной стороны, представляет собой одну из отраслей графического дизайна, с другой – свод строгих правил, определяющих использование шрифтов в целях создания наиболее понятного для восприятия читателя текст.

И если говорить про веб-дизайн, то почему фотошоп и скетч?

Ответить
0

Все понял, кроме того, что такое "рендор" 🤔

Ответить
1

Очепятались, исправились))
спасибо

Ответить
1

👍

Ответить
0

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

Ответить
1

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

Ответить
0

Конечно 100500 тонкостей влияют)) тут только одну из них расписали)
Лучше, когда все в комплексе сделано с нормальным подходом и знаниями)
p.s. Отпуск близко, крепитесь! Мы тоже ждем)

Ответить
0

данные по ценам typekit устарели

Ответить
1

оу, не знали, спасибо!

Ответить
0

со шрифтами в таблице проиграли

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }