Как подобрать универсальный текстовый шрифт для сайтов, печати, интерфейсов и айдентики – Паратайп
На что обратить внимание в рисунке, знаковом составе и начертаниях — рассказываем на примере шрифта PT Root.
Часто для проекта нужен нейтральный шрифт, чтобы он не привлекал внимания, а просто хорошо смотрелся и передавал информацию. А ещё чтобы работал в совершенно разных текстах: от блога на сайте до печатного каталога или логотипа мобильного приложения.
Мы недавно выпустили PT Root — как раз такой универсальный шрифт, который подойдёт и для книги о копирайтинге, и для сайта магазина электроники. На примере Рута расскажем, как выбрать спокойный рабочий шрифт.
Рут в каталоге шрифтовХарактер и рисунок шрифтаУниверсальный шрифт должен быть незаметным. Тогда вы сможете использовать его где угодно, а пользователи будут спокойно читать текст и не спотыкаться о необычный шрифт. Вот как Виталий Кузьмин, автор Рута, описывает, каким должен быть нейтральный шрифт:
Это должен быть шрифт в духе «поставил и забыл», незаметный глазу.
Нормальные пропорции и контраст, ожидаемый рисунок знаков. Только если начнёшь всматриваться в детали, поймёшь, что именно это за шрифт.
Чтобы понять наверняка, перед вами нейтральный шрифт или нет, можно сравнить его с Гельветикой, Ариалом, Робото или Сан Франциско. Если выбранный шрифт привлекает внимание не больше, чем эти шрифты, то он нейтральный.
Для сравнения: нейтральные и акцидентные шрифты
При этом необязательно, чтобы шрифт был вовсе лишён характерных особенностей. Например, у Рута самая простая форма из спокойно-текстовых шрифтов. Там, где возможны варианты, например, У с хвостиком или без, Виталий выбирал самый лаконичный. Ещё у Рута узковатые пропорции и небольшая «оквадраченность» круглых знаков, за счёт которой буквы выглядят чуть крупнее. В результате Рут вышел немного брутальным, хотя в наборе, особенно в некрупном кегле, это почти незаметно.
Варианты А и УПосмотреть Рут во всех деталях
Параметры шрифтаУниверсальные шрифты используют для передачи информации, а не привлечения внимания (для этого существуют акцидентные шрифты).
Чтобы передать информацию эффективно, важно понять, что помешает читателю прочитать текст. Вот основные ограничения, с которыми сталкиваются читатели:
Когда мы выбираем шрифт, важно, чтобы его параметры компенсировали те ограничения, которые есть в проекте. Например, если вы делаете навигационные таблички, то сталкиваетесь сразу с тремя ограничениями: мало места для надписи, мало времени на чтение, а ещё и текст далеко.
Вот несколько параметров, на которые стоит обратить внимание, при выборе нейтрального рабочего шрифта:
Узкие пропорции и короткие выносные элементы делают шрифт компактнее. Такие шрифты особенно хороши, когда есть ограничения по длине текста: на сайте, в мобильном приложении или навигации.
Униширинные шрифты (например, бесплатный компаньон Рута PT Root UI) подходят для интерфейсов. В таких шрифтах ширина площадки знака не меняется от начертания к начертанию, что удобно при вёрстке.
Скажем, дизайнер подготовил макет мобильного приложения, а заказчик попросил сделать пункты меню пожирнее. С униширинным шрифтом, даже если поменять начертание на более жирное, буквы останутся на тех же местах и строка не «поедет».
Высокие строчные буквы. Для сложных условий чтения, особенно текстов в мелком кегле (например, инструкций на упаковке), лучше выбрать шрифт с высокими строчными буквами с короткими выносными элементами. Так знаки займут меньше места, но их всё равно будет легко разглядеть.
Просторные межбуквенные расстояния. Для длинных текстов, мелких подписей и других сложных условий для чтения стоит брать шрифты с более свободными промежутками между буквами. Это известный оптический эффект: если шрифт мелкий — то промежутки кажутся меньше и буквы начинают слипаться.
В общем, чтобы ничто не отвлекало аудиторию от чтения текста, лучше выбирать шрифты с нейтральными и привычными параметрами: равноширинные, с достаточно высокими строчными буквами и достаточными межбуквенными расстояниями.
Для универсальных шрифтов важен широкий знаковый состав. Так будет выше шанс, что не придётся подбирать дополнительный шрифт, если понадобится локализировать сайт или срочно добавить стрелочек в дизайн.
Поддержка языков и типографики в PT Root
Вот что полезно и, скорее всего, пригодится в универсальном рабочем шрифте:
- расширенная кириллица и латиница — это значит, что шрифт поддерживает большинство языков России, СНГ и Европы, что значительно упростит локализацию продукта;
- неалфавитные знаки — стрелки, табличные и пропорциональные цифры, геометрические фигуры, звёздочки, математические символы (в Root даже есть знак диаметра) и так далее.
Есть отдельные шрифты — наборы символов, но они часто не подходят к основному шрифту по каким-то параметрам, например, по контрасту.
Поэтому удобно, когда в шрифте уже есть нужные неалфавитные символы, чтобы дизайнеру не пришлось их отрисовывать от руки, — Виталий Кузьмин.
Знаковый состав можно посмотреть на странице шрифта на сайте: в аннотации или отдельном разделе (например, на страничке конкретного начертания).
НачертанияНачертание — один стиль внутри шрифта. Это комплект знаков шрифта одного определённого рисунка, наклона, пропорций, контраста и насыщенности. Например, курсив — это начертание.
Чем больше начертаний в шрифте, тем больше возможностей для его использования. Так, один шрифт можно использовать для текстов разной иерархии: заголовков, подписей, выделений внутри текста или колонтитулов. А ещё на разных площадках — скажем, регулярное начертание для сайта, а зауженное в интерфейсе мобильного приложения. В общем, чем у шрифта больше начертаний, тем он функциональнее, но и тем легче в них запутаться.
Начертания в PT Root
В Руте десять начертаний с градацией по жирности от Hairline до Black — как раз такая градация в самых популярных шрифтах для веба.
Начертания от Thin до Black удобно обозначать в CSS числами от 100 до 900. Давайте на примера Рута посмотрим, для чего какое начертание.
Hairline — сверхтонкое начертание для акциденции и айдентики, хорошо смотрится в крупном кегле.
Thin и Extra Light — тонкие начертания, тоже для заголовков и крупного кегля.
Light — может заменить Regular в крупном кегле или при инверсии на экране (например, для тёмной темы в мобильном приложении).
Regular — регулярное начертание для длинных текстов на экране и в печати.
Medium и DemiBold — хороши для навигации и для выделений в тексте — когда хочется пожирнее регулярного, но Bold — уже слишком.
Bold — жирное начертания для выделений в тексте, заголовков и подзаголовков.
Extra Bold, Black — сверхжирные начертания для акциденции.
Все начертания объединены в вариативную версию.
В ней можно плавно переключаться между начертаниями и выбрать любую насыщенность. При этом небольшой вес вариативной версии ускоряет загрузку сайта.
Я долго подбирал линейку начертаний — добивался того, чтобы насыщенность увеличивались гармонично, но делал это не просто на глаз, а пытался найти закономерность. Линейная интерполяция не подходила, поэтому пробовал разные варианты (например, формулы Лукаса де Гроота и Пабло Импаллари).
В итоге я пришёл к некоему ряду коэффициентов и скорости их наращивания — своему варианту распределения насыщенностей, который меня устроил и по визуальной составляющей самих начертаний, и по логике чисел, — Виталий Кузьмин.
Формулы и подсчётыКачество шрифтаЧтобы шрифт хорошо смотрелся в любом тексте на любом экране или операционной системе, ему нужны аккуратный контур, визуально одинаковые межбуквенные расстояния, хороший кернинг и хинтинг. Бывают шрифты, где контур хороший, но кернинг не очень, и это всё портит.
Контур — граница изображения знака, граница между белым пространством и чёрным знаком.
Порой шрифт издалека кажется красивым, а приблизишь — видно, что границы неровные. Шрифты с неаккуратным контуром могут более-менее работать в мелком тексте, но для заголовков уже не подойдут.
Межбуквенные расстояния — промежутки между соседними буквами. Их ещё называют апрошами, а белое пространство с одной стороны буквы — полуапрошем. Чтобы шрифт было комфортно читать, нужно «серебро набора» — визуально одинаковые межбуквенные пробелы в строке.
Апроши и полуапроши
Кернинг — корректировка межбуквенных расстояний для конкретных сочетаний букв. Существуют такие пары знаков, между которыми даже при хорошо расставленных межбуквенных расстояниях возникают «дырки», и это режет глаз. Кернинг как раз нужен, чтобы визуально этих «дырок» в тексте не было и ритм строки оставался ровным.
Например, буквы Г и А обычно двигают ближе друг к другу, потому что иначе между ними слишком много белого пространства.
Хинтинг — как и кернинг, часть технологического процесса обработки шрифта перед выпуском. Он помогает оптимизировать отображение шрифта на экране.
На современных мониторах разница между нехинтованным и хинтованным шрифтом меньше, чем на старых, но она есть
В MacOS и iOS все шрифты отображаются одинаково хорошо, потому что в них встроен очень умный алгоритм рендеринга шрифтов. А вот компьютерам с Windows и Linux с этим нужна помощь: если не встроить в шрифт специальные инструкции для операционной системы, он может отображаться плохо, например, некоторые буквы будут «подскакивать» в строке или казаться жирнее других. Поэтому всегда стоит проверять, как выбранный шрифт смотрится на разных мониторах и в операционных системах. Подробнее о шрифте на экране и хинтинге можно прочитать здесь.
Галина Кунарёва, технолог шрифта, рассказала, как работала над Рутом и на что обращала внимание при хинтинге:
Сейчас требования к обработке шрифта под современные операционные системы меняются. Например, в формате TrueType хинтинг стал менее агрессивным (нет жёсткой привязки к пиксельной сетке), но при этом он помогает добиться достаточной чёткости контура даже в малых размерах и при низком разрешении экрана.
Рут хинтовался новым способом, который позволил максимально точно передать рисунок шрифта, выдержать равномерность нарастания насыщенности с увеличением размера и избежать искажения форм и пропорций знаков при хинтинге.
На современных мониторах разница между нехинтованным и хинтованным шрифтом меньше, чем на старых, но она есть
Самый простой способ протестировать Рут и другие наши шрифты — тайп-тестер на сайте магазина, он поддерживает все технические возможности шрифтов и не требует регистрации. А ещё у нас есть расширение для Хрома Fontoscope, с которым можно попробовать шрифт на любом сайте, и приложение Fontoscope — оно устанавливает тестовую версию шрифта прямо на ваш компьютер и позволяет работать с ним в любой программе — от Figma до AfterEffects.
Интернет-агентство BINN » Как выбрать идеальный шрифт для заголовков
Шрифт для заголовков на вашем сайте может значительно повлиять на его визуальную привлекательность, адаптивность и доступность. Идеально подобранный шрифт заголовка может привлечь внимание вашей аудитории, установить иерархию и четко передать настроение вашего бренда.
В этой статье мы поделимся с вами советами по выбору идеального шрифта для заголовков, а также рассмотрим несколько удачных примеров.
Что такое шрифт заголовкаШрифт заголовка — это шрифт, который используется для больших и выделяющихся текстовых элементов дизайна, таких как заголовки. Эти шрифты разработаны таким образом, чтобы они одновременно легко читались, а также привлекали внимание аудитории.
Такие шрифты часто имеют отличительные характеристики — толстое начертание, уникальные формы букв, а также сильный контраст, который помогает им выделяться на сайте.
Советы по выбору шрифта заголовка1.
Разборчивость и читабельностьОсновная цель заголовка — привлечь внимание пользователя и донести до него нужный месседж. Поэтому крайне важно выбрать шрифт, который легко читается даже на расстоянии или, если он маленького размера. Ищите шрифты с четкими формами букв, достаточным интервалом и хорошим контрастом между штрихами.
2. Визуальная иерархияЧтобы создать визуальную иерархию для заголовков и основного текста, используйте одновременно два разных шрифта, желательно разного размера. С помощью этой техники вы сможете управлять вниманием ваших пользователей. Более смелый, привлекающий внимание шрифт для заголовка эффектно выделит его среди остального контента.
3. Настроение и тонВыбирайте шрифт, который отражает настроение вашего дизайна или бренда в целом. Например, для официально-делового сайта нужен более классический шрифт с засечками, а для игривого или повседневного вы можете использовать необычный и декоративный шрифт.
При выборе шрифта также учитывайте настроение и предпочтения вашей аудитории.
Выбирайте шрифт, у которого в наборе есть различные веса и стили, например, полужирный, курсив или сжатые версии. Это поможет вам быть гибкими и адаптивными в работе над дизайном, а также вы сможете сохранить согласованность между элементами на сайте.
5. Комбинирование с другими шрифтамиПри комбинировании шрифтов в дизайне очень важно, как шрифт заголовка будет работать вместе с основным шрифтом. Стремитесь к гармоничному балансу между ними — важно, чтобы они не конфликтовали между собой.
Самые знаменитые заголовки и шрифтыThe New York TimesThe New York Times использует для своих заголовков специальный шрифт NYT Cheltenham. Этот элегантный шрифт с засечками создан Мэтью Картером. Шрифт выглядит очень строго, официально и традиционно, при этом он очень универсальный и разборчивый.
The GuardianГазета The Guardian использует для заголовков специальный шрифт Guardian Egypt, который разработан Полом Барнсом и Кристианом Шварцем.
У шрифта смелая форма букв и высокая контрастность — это идеальный вариант, чтобы привлечь внимание аудитории и передать современный и актуальный стиль.
Источник: designshack.net
Unusual Fonts — Etsy Turkey
Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.
Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.
( 63 релевантных результата, с рекламой Продавцы, желающие расширить свой бизнес и привлечь больше заинтересованных покупателей, могут использовать рекламную платформу Etsy для продвижения своих товаров. Вы увидите результаты объявлений, основанные на таких факторах, как релевантность и сумма, которую продавцы платят за клик. Узнать больше. )РЕДКИЕ ПТИЦЫ КУПИЛИ
Свиток
ШРИФТЫ РЕДКИХ ПТИЦ
I.
II. III. IV. В. VI.
экземпляр я | Художник: Мейбель Имаса-стукулс
Мы представляем вам Образец I от старейшины современной каллиграфии Мэйбель Имаса-Стукулс, очаровательный шрифт, написанный подписью мисс Имаса-Стукулс.
НАБЛЮДЕНИЯ
Образец I стоит самостоятельно. Его тонкие нюансы выделяют его среди множества шрифтов. Его легко узнать, но он никогда не будет слишком эффектным. Оставьте в Образце I достаточно свободного места, чтобы можно было отметить каждую причуду и изгиб.
ОПРЕДЕЛЯЮЩИЕ ХАРАКТЕРИСТИКИ
Программирование открытого типа, цифры в старом стиле, формы букв со штрихом в начале и конце слов, шесть чередующихся строчных букв t, римские цифры, бесшовное соединение лигатур, альтернативные строчные буквы, реалистичность двухбуквенные лигатуры, базовая латинская кодировка.
ПОТЕНЦИАЛЬНЫЕ ОБЪЕКТЫ
Обложки книг, детская литература, названия для передач, уникальный дизайн продуктов, названия веб-сайтов, логотипы, меню ресторанов и этикетки для деликатесов.
100 долларов США
Из-за характера цифровых товаров все продажи являются окончательными.
ПОКУПКА
Великобритания + покупатели из ЕС Пожалуйста, приобретайте здесь
образец II | художник: Карла Лим
Образец II — элегантный почерк Карлы Лим из Written Word Calligraphy. Он плывет по странице на тонких крыльях. Образец II хорошо сочетается с классическими шрифтами, такими как Baskerville, Garamond и Bodoni.
НАБЛЮДЕНИЯ
Образец II очень тонкий, но не хрупкий. Лучше всего подходит для незабываемых дел.
ОПРЕДЕЛЯЮЩИЕ ХАРАКТЕРИСТИКИ
Программирование открытого типа, формальное заглавие и предлог, 7 альтернативных вариантов «и», римские цифры, буквы в начале и в конце слов, перечеркнутые строчные буквы t, множественные чередующиеся строчные буквы t, реалистичные двойные штрихи -буквенные лигатуры, бесшовное соединение каллиграфических букв, альтернативные заглавные буквы, цифры старого стиля, базовая латинская кодировка.
ПОТЕНЦИАЛЬНЫЕ ОБЪЕКТЫ
Свадебные канцтовары, дизайн логотипа, упаковка элитных товаров, парфюмерия, винные этикетки.
100 долларов США
Из-за характера цифровых товаров все продажи являются окончательными.
ПОКУПКА
Великобритания + покупатели из ЕС Пожалуйста, приобретайте здесь
ОБРАЗЕЦ III | ИСПОЛНИТЕЛЬ: КАРЛА ЛИМ
Редкий образец птицы III, изящная рука Карлы Лим из письменной каллиграфии. Этот строчный шрифт выглядит одновременно современным и женственным. Хотя прописные буквы по-прежнему имеют строчную форму, они больше и читаются как прописные.
НАБЛЮДЕНИЯ
Образец III имеет форму танцора; податливая и гибкая. Буквы Willowy проворны и гибки, довольствуются в одиночку или в паре с более сильным, более мужественным экземпляром.
ОПРЕДЕЛЯЮЩИЕ ХАРАКТЕРИСТИКИ
Программирование открытого типа, формальное заглавие и предлог, 7 альтернативных строчных букв t, поперечные штрихи, римские цифры, цифры в старом стиле, бесшовные полусоединяющиеся каллиграфические буквы, реалистичные двухбуквенные лигатуры, буквы со штрихом внутри и снаружи начало и конец слов, где это уместно, базовая латинская кодировка.
ПОТЕНЦИАЛЬНЫЕ ОБЪЕКТЫ
Канцелярские принадлежности для новобрачных и детского душа, дизайн логотипа, упаковка для деликатесов, этикетки для одежды.
100 долларов США 9 долларов США0003
Из-за характера цифровых товаров все продажи являются окончательными.
ПОКУПКА
Великобритания + ПОКУПАТЕЛИ ЕС ПОЖАЛУЙСТА, ПРИОБРЕТАЙТЕ ЗДЕСЬ
ОБРАЗЕЦ IV | ХУДОЖНИК: ЛИЗА МАВИАН
Этот скромный шрифт без засечек, написанный художницей из Торонто Лизой Мавиан из Post Calligraphy, наполнен яркими и очаровательными элементами и иллюстрациями.
НАБЛЮДЕНИЯ
Образец IV — это чистый, написанный от руки гротеск с причудливым характером, который не воспринимает себя слишком серьезно. Эти скромные и обаятельные персонажи обязательно станут выигрышным дополнением к вашей коллекции шрифтов.
ОПРЕДЕЛЯЮЩИЕ ХАРАКТЕРИСТИКИ
Программирование открытого типа, официальное заглавие и препозиция, римские цифры, цифры в старом стиле, реалистичные двухбуквенные лигатуры, полный набор заглавных букв с перечеркнутыми буквами, выбор строчных букв с перечеркнутыми буквами, полный набор перечеркнутых цифр, выберите парящие альтернативы desecender, 7 полных наборов альтернативных заглавных букв, 52 альтернативных графических символа.
ПОТЕНЦИАЛЬНЫЕ ОБЪЕКТЫ
Свадебные меню, вывески, логотипы, упаковка для шоколада, детская литература, мобильные приложения. Обратите внимание, что это только возможные наблюдения, так как эти экземпляры находят в новых местах каждый день!
50 долларов США
Из-за характера цифровых товаров все продажи являются окончательными.
ПОКУПКА
Великобритания + ПОКУПАТЕЛИ ЕС ПОЖАЛУЙСТА, ПРИОБРЕТАЙТЕ ЗДЕСЬ
ОБРАЗЕЦ V | ИСПОЛНИТЕЛЬ: МЕЙБЕЛЬ ИМАСА-СТУКУЛС
Из невероятного кладезя творчества Мэйбель Имаса-Стукулс мы представляем вам Образец V. Причудливое семейство шрифтов с засечками в сочетании с иллюстрациями, вдохновленными естествознанием.
OBSERVATIONS
Образец V — это нарисованный от руки шрифт, вдохновленный классическими засечками. Созданный со всеми причудами и шармом, которые вы ожидаете от Maybelle Imasa-Stukuls. Нет предела возможностям этого проворного шрифта.
ОПРЕДЕЛЯЮЩИЕ ХАРАКТЕРИСТИКИ
Образец V представлен в трех вариантах: стандартный, совершенно несовершенный и гладкий. Он имеет программирование Opentype и цифры старого стиля. Семейство включает в себя набор из 13 векторных иллюстраций, вдохновленных естествознанием, + PNG высокого разрешения, созданных нашими штатными иллюстраторами Rare Bird.
ПОТЕНЦИАЛЬНЫЕ НАБЛЮДЕНИЯ
Вы мельком увидите Образец V в новом милом бутике по соседству, в местном книжном магазине и на свадебных приглашениях вашего самого эксцентричного дяди. Подойдут только самые очаровательные приложения!
50 долларов США
Из-за характера цифровых товаров все продажи являются окончательными.
ПОКУПКА
ПОКУПАТЕЛИ В ВЕЛИКОБРИТАНИЯХ И ЕС ПОЖАЛУЙСТА, ПРИОБРЕТАЙТЕ ЗДЕСЬ
Образец vi | Художник: Эйлин Фрец
Образец VI — изысканный почерк художницы Эйлин Фрец из Plume Calligraphy: совершенно современный, но абсолютно вневременной. Мы нацелились на то, чтобы он мгновенно стал классикой.
НАБЛЮДЕНИЯ
Образец VI черпает вдохновение из старого мира, оставаясь при этом совершенно современным. Он уникален при сохранении удобочитаемости.
ОПРЕДЕЛЯЮЩИЕ ХАРАКТЕРИСТИКИ
Осмелимся сказать, что при 2580 символах это один из самых надежных рукописных шрифтов на рынке сегодня. Шрифт включает обширное программирование Opentype, которое достоверно воспроизводит уникальный рисунок почерка Эйлин. По мере ввода наблюдайте, как буквы автоматически меняются между подключенными и отключенными формами. Образец VI также содержит формальные заголовки, предлоги, текстовый рисунок в социальных сетях и веб-навигацию, римские цифры с засечками и без засечек, формы букв со штрихами и штрихами в начале и в конце слов, несколько чередующихся строчных букв t крест-накрест; реалистичные двухбуквенные лигатуры, плавно соединяющие каллиграфические буквы, несколько стилей альтернативных заглавных букв, включая росчерки, и базовое латинское кодирование. Образец VI — мечта наборщиков.
ПОТЕНЦИАЛЬНЫЕ НАБЛЮДЕНИЯ
На страницах вашего любимого свадебного тома; вывески, вышивка халатов и меню ужина этого желанного бутик-отеля на Итальянской Ривьере, этикетки ручной линии свечей, ваше новое любимое розовое масло, бельгийские шоколадные трюфели ручной работы, инди-косметическая линия, подходящая для королевской семьи, в любом случае, если вам может понадобиться изысканный современный сценарий.