Шрифты названия и виды: Attention Required!

Содержание

Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты / Хабр

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (

browser safe fonts

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

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены

в его

операционной системе (

прим. переводчика:

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

используя CSS 3

и его новое свойство

@font-face

; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что

каждый

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

CSS

есть свойство

@font-family

, облегчающее эту задачу.

Также Вам может быть интересен список шрифтов, включённых в каждую версию Windows.

Список

Значение @font-family	Windows	Mac	Семейство
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	sans-serif
«Arial Black», Gadget, sans-serif	Arial Black	Arial Black, Gadget	sans-serif
«Comic Sans MS», cursive	Comic Sans MS	Comic Sans MS⁵	cursive
«Courier New», Courier, monospace	Courier New	Courier New, Courier⁶	monospace
Georgia, serif	Georgia¹	Georgia	serif
Impact,Charcoal, sans-serif	Impact	Impact⁵, Charcoal⁶	sans-serif
«Lucida Console», Monaco, monospace	Lucida Console	Monaco⁵	monospace
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Lucida Sans Unicode	Lucida Grande	sans-serif
«Palatino Linotype», «Book Antiqua», Palatino, serif	Palatino Linotype, Book Antiqua³	Palatino⁶	serif
Tahoma, Geneva, sans-serif	Tahoma	Geneva	sans-serif
«Times New Roman», Times, serif	Times New Roman	Times	serif
«Trebuchet MS», Helvetica, sans-serif	Trebuchet MS¹	Helvetica	sans-serif
Verdana, Geneva, sans-serif	Verdana	Verdana, Geneva	sans-serif
Symbol	Symbol²	Symbol²	—
Webdings	Webdings²	Webdings²	—
Wingdings, «Zapf Dingbats»	Wingdings²	Zapf Dingbats²	—
«MS Sans Serif», Geneva, sans-serif	MS Sans Serif⁴	Geneva	sans-serif
«MS Serif», «New York», serif	MS Serif⁴	New York⁶	serif

¹ Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

² Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

³ Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

⁴ Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

⁵ Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

⁶ Эти шрифты установливаются в Mac только при Classic-инсталляции

Скриншоты

Mac OS X 10. 4.8, Firefox 2.0, ClearType включён (за скриншот спасибо Juris Vecvanags)
Mac OS X 10.4.4, Firefox 1.5, ClearType включён (за скриншот спасибо Eric Zavesky)

Mac OS X 10.4.11, Safari 3.0.4, ClearType включён (за скриншот спасибо Nolan Gladius)
Mac OS X 10.4.4, Safari 2.0.3, ClearType включён (за скриншот спасибо Eric Zavesky)
Windows Vista, Internet Explorer 7, ClearType включён (за скриншот спасибо Michiel Bijl)
Windows Vista, Firefox 2.0, ClearType включён (за скриншот спасибо Michiel Bijl)
Windows XP, Internet Explorer 6, ClearType включён
Windows XP, Firefox 1.0.7, ClearType включён
Windows XP, Internet Explorer 6, Сглаживание шрифтов включено
Windows XP, Firefox 1.0.7, Сглаживание шрифтов включено
Windows 2000, Internet Explorer 6, Сглаживание шрифтов включено
Windows 2000, Firefox 1.0.7, Сглаживание шрифтов включено
Linux (Ubuntu 7. 04 + Gnome), Firefox 2.0 (за скриншот спасибо Juris Vecvanags)

Несколько примеров из скриншотов (по одному на каждую операционную систему)

Mac OS X 10.4.8, Firefox 2.0, ClearType включён

Windows Vista, Internet Explorer 7, ClearType включён

Windows XP, Internet Explorer 6, ClearType включён

Windows 2000, Internet Explorer 6, Сглажмвание шрифтов включёно

Linux (Ubuntu 7.04 + Gnome), Firefox 2.0

Прим. переводчика: статью пришлось немного переделать, т.к. Хабр не разрешает добавлять собственные стили к тексту 🙁

Виды шрифтов и их классификация. Использование разных видов шрифтов

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

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

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

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

Древний мир и Европа

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

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

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

В дальнейшем, ради ускорения написания, появился курсивный вариант написания (что с латыни переводится как «наклонный»). Скорость написания не совсем пошли на пользу — красота букв потерялась, а удобочитаемость снизилась.

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

В конце 11 — начале 12 века стал складываться новый по форме букв шрифт с острыми штрихами под названием готический. Он существовал в эпоху господства готики в архитектуре и искусстве. Готический шрифт получил широкое распространение по всей Европе, и в целом существует до сих пор. Немецкий изобретатель Иоганн Гутенберг, который изобрёл книгопечатание, в своих книгах использовал именно готический шрифт.

В эпоху Возрождения (в 14-15 веке) учёные умы Италии и Франции явили свету нечто, совсем не похожее на готический шрифт — Ренессанс-антиква . Этому шрифту художники и учёные Возрождения пытались придать логическую обоснованность, играя с формами и пропорциями букв. Например, ученик Леонардо да Винчи, Лука Пачоли в 1509 году опубликовал первые правила построения латинского шрифта — буквы предлагалось строить буквы на основе квадрата, используя для этого его диагонали и вписанную в него окружность. Правда, получалось однообразно и не хватало драйва. Более интересный вариант начертания предложил немецкий художник и геометр Альбрехт Дюрер — он не стал изобретать велосипед и также вписывал буквы в квадрат, но стороны основного квадрата он разделил на 10 равных частей, и строил сетку, состоящую из квадратов. За толщину основного штриха брал размер шириной одной клетки, толщину соединительных штрихов тоньше основных на одну треть.

Переход в эпоху классицизма также породил новый вид шрифта, который называется Классическая Антиква . Над его созданием работали многие художники, но отдельно можно выделить Джамбатиста Бодони, Фирмена Дидо и Вальбаума (имя потерялось на просторах немецких земель). Шрифт отличает большая контрастность (примерно 1/10), наплывы округленных элементов, тонкие засечки. Шрифты, которые появились на основе антиквы, достаточно широко применяются в оформительских работах.

На рубеже 19-20 веков появляется целый ряд видов шрифтов — египетский, гротеск или рубленый, антиква-гротеск, ленточная антиква. Египетский шрифт отличался одинаковой толщиной всех линий и засечек. Гротеск (или ещё «рубленый») имеет одинаковой толщины линии литер, но без засечек. На его основе было разработано целое семейство гротескных шрифтов.

20 век явил миру новые гротескные и рубленые шрифты, которые подчёркивали новый стиль в архитектуре и искусстве — конструктивизм. Среди новых шрифтов пользуются популярностью футура Поля Реннера, пеньо Кассандра, эрбар-гротеск Якова Эрбара и гилл-гротеск Эрика Гилла.

Шрифты земли русской

Если не брать различные версии о Великой тысячелетней истории Руси, в которых волхвы летали на Сириус и научили все остальные народы писать, а использовать классическую версию учёных (которые, конечно, всё скрывают), то создателями славянской азбуки были братья-монахи Кирилл и Мефодий. Он был основан на греческой письменности, а сами буквы получили достаточно ясную и чёткую графику. Всё это получило название кириллица . Древнейшие русские рукописи 11 века были написаны по особым правилам, получившим название устав . Позже, за необходимостью более быстрого письма сформировался полуустав . Но скорости для переписки книг или составления корреспонденции всё равно не хватало, и появился новый, более быстрый вариант с говорящим названием — скоропись .

С 15 века начал появляться особый, декоративный шрифт — вязь . Им оформляли заголовки, и наиболее сильный расцвет пришёлся на царствование Ивана Грозного — первые книги, отпечатанные Иваном Фёдоровым, имею красивык вязь, выгравированную на дереве. Но начиная с 17 века искусство оформления книги вязью постепенно стало приходить в упадок.

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

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

СССР с самого начала своего существования взялась за реформу русского правописания: буквы, которые затрудняли изучение русского языка, были изъяты, а грамматика стала более упрощенной и доступной. Одновременно проводилась работа по разработке типографских гарнитур — все их приводили к соответствию Государственному общесоюзному стандарту (ГОСТу), исключая только рукописные и рисованные шрифты, выступавшие элементом оформления или декора.

Современные шрифты

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

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

Современный шрифт — это файл, который содержит в себе векторные и растровые начертания ПРОПИСНЫХ и строчных букв, цифр (от 0 до 9) знаков пунктуации (точки, запятые и их совместные комбинации, знаки вопроса и ударения) и прочие знаки. Существует специальный стандарт кодирования всех этих знаков — Юникод , который на сегодняшний момент имеет в своём составе 136 690 символов для 123 разновидностей писменностей на планете Земля — чтобы никто не чувствовал себя обиженным и обделённым. Но стандартно шрифт обычно имеет 1-2 языка (латиница + кириллица) и набор знаков препинания и букв. Правда, стоит отметить, что некоторые шрифты вообще не имею букв, цифр и знаков, а сплошь состоят из изображений.

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

Mono (он же моноширинный шрифт)
Serif (шрифт с засечками)
Sans или sans serif (шрифт без засечек)

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

Шрифты Serif (с засечками) обычно применяются в массивных текстах — в книгах, журналах и вообще везде, где «многа букаф». Засечки облегчают связывание букв в единую линию, тем самым повышая удобство при чтении текста, что в общем и является главным. Вот, самый популярный — и удобный для чтения само собой — шрифт Times New Roman является типичным представителем шрифта Serif.

Шрифты Sans — прямая противоположность Serif и указанных засечек на знаках не имеют. Их основное предназначение — небольшие массивы текста, такие как заголовки и подписи. Редко используются для основного текста, но при условии что он небольшого размера, потому что шрифты Sans имеют более низкое удобство для чтения при нахождении в большом массиве.

Раз уж мы упомянули о шрифтах Sans, нельзя обойти стороной и один шрифт-изгой, имя которому — Comic Sans. Основное правило этого шрифта — никогда не использовать этот шрифт ☺. На самом деле шутка, поскольку этот шрифт использовался в играх The Sims и Undertale, компанией Apple в рекламе iCards, и в оформлении коллекционных 25-центовых монет Канады, выпущенных в 2004 году. Шах и мат, хейтеры Comis Sans. Однако же, неумелое использование этого шрифта часто подвергается критике. Но неумелое использование шрифта даже Helvetica не очень спасёт — типографика это искусство.

Шрифт – это один из основных изобразительных элементов текстового печатного издания.

Классификация шрифтов

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

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

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

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

Начертание шрифтов (насыщенность и толщина штрихов, высота знаков и характер заполнения): светлые, полужирные и жирные.

Наклон основных шрифтов (отклонение основных штрихов от вертикального положения): прямые, курсивные.

Размер шрифта (в нормальных шрифтах отношение ширины очка к высоте составляет приблизительно 3:4. в узких – 1:2, в широких – 1:1): сверхузкие, узкие, нормальные, широкие и сверхширокие.

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

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

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

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

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

Под гигиеническими требованиями к шрифту понимается его удобочитаемость. исследования показали, что важно подбирать правильно и длину строки и размеры пробелов между словами. Так, например, для детей дошкольного и младшего школьного возраста необходимы четкие, простые по рисунку шрифты 12-16 пунктов, для взрослого читателя — шрифты 8-10 пунктов, в справочных изданиях — кегль шрифта может быть снижен.

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

Относительно восприятия трудно рекомендовать что-либо конкретное. История шрифта, его эстетика, «настроение» текста, возраст и социальный статус аудитории, вкус дизайнера — всё может влиять на выбор шрифта. Однако есть и некоторые закономерности. Так, результаты исследований показали:

Текст, набранный прописными буквами, замедляет скорость чтения, а кроме того, занимает больше места, порой на 50 процентов;

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

Изменить значение слов или весь дизайн? Конечно!

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

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

Настроение и сообщение, которое вы хотите донести должны соответствовать друг-другу

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

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

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

Сравните сообщения

Вы имели ввиду это?

Или пытались сказать это?

Единственная разница здесь в шрифтах. Видите, насколько разные эти сообщения?

Настроение шрифтов для начинающих

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

Вот некоторые примеры, чтобы начать работу с разными стилями типографики:

Шрифт с засечками (Serif): вечность, формальность
Новостильная антиква (Modern serif): глянец, высокая мода
Брусковый (Slab serif): важность, внимание
Шрифт без засечек (Sans serif): нейтральный, простой
Сжатый (Condensed): авторитетный, интенсивный
Жирный (Black or bold): важность, стоп
Рукописный (Script): элегантный, характерный
Геометрический (Geometric): ретро, детский
Моноширинный (Monospaced): на основе кода, резкий
Округлый (Bubble or rounded): дружелюбный, живой
Винтажный (Vintage): модный, крутой
Гранжевый (Grunge): грубый, мистический

Избегайте клише

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

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

Учитывайте окружение

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

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

Кто ваша аудитория?

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

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

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

Пользователи будут подходить к дизайну с разных точек зрения. Заранее примем во внимание вашу аудиторию и попытаемся предсказать, как они воспримут дизайн. Что они подумают о вашем выборе типографики? Можете ли вы принимать решения, которые совпадут с тем, чего они хотят или ждут от проекта?

5 шрифтов, которые ни один уважающий себя дизайнер не станет использовать

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

● Papyrus: Он сложно вписывается в любой дизайн и при этом у него серьезные проблемы с читаемостью.

● Jokerman: Любой шрифт, в котором есть горошек, шипы или завитушки откровенно смешной.

● Times New Roman: Шрифт по умолчанию из текстовых редакторов и экзаменационных тестов за 10 класс. Это нормальный шрифт, но может иметь легкий оттенок лени.

● Impact: Если вы хотите кричать своим пользователям: «Это очень важно, нужно прочитать это сейчас!» тогда выбирайте его. (Это был очень хороший шрифт… пока мемы не испортили его).

● Comic Sans: Слишком много о нем уже сказано.

Заключение

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

При планировании проекта и работе над его созданием, не забудьте принять во внимание настроение вашей аудитории. И если вы споткнулись по пути — не волнуйтесь, так бывает. Извлеките уроки из этих ошибок и переосмыслите процесс со следующим проектом.

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

Гарнитура определяет рисунок шрифта, отличающий данный шрифт от другого. Каждая гарнитура имеет определенное название, например, Courier. Приведем фрагменты текстов различной гарнитуры. Данный фрагмент текста набран гарнитурой Arial Суг. Этот — гарнитурой Courier New Cyr. Слово Cyr в названии гарнитуры указывает на то, что шрифт включает в свой состав символы русского алфавита.

Кегль задает размер шрифта в пунктах, равных 1/72 доле дюйма, например:

18 КеГЛЬ, 16 кегль, 14 кегль, 12 кегль, 10 кегль, 8 кегль. Шрифты одной и той же гарнитуры различаются по начертанию: прямое начертание, курсивное начертание, полужирное начертание, полужирный курсив одной и той се гарнитуры Times New Roman Cyr. По способу описания символов различают следующие типы шрифтов:

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

2. Штриховые (векторные ) шрифты, кодирующие изображение символа в виде набора векторов заполнения его пространства.

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

Векторные и контурные шрифты еще называют масштабируемыми .

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

Основными форматами контурных шрифтов (фактически — стандартами) являются шрифты PostScript и TrueType.

Шрифты формата PostScript (или Type 1) представляют собой разработку фирмы Аdobe, ориентированную на получение высококачественной печати с помощью специализированных полиграфических устройств — PostScript-устройства. С форматом Type 1 связан язык описания страниц Post-Script, признанный международным техническим стандартом описания внешнего вида документов.

В среде Windows основными являются TrueType-шрифты, представляющие собой совместную разработку фирм Apple и Microsoft. Название шрифтов («Истинная печать») обусловлено тем, что на экране символы видны в том виде, как они будут отпечатаны. В списках выбора их помечают знаком Тт. Шрифты TrueType предпочтительны при печати документов с помощью лазерных и струйных принтеров. Кроме того, документы с TrueType-шрифтами можно использовать и в PostScript-принтерах, некоторые из которых допускают непосредственную работу такими шрифтами, а остальные выполняют предварительное преобразование в формат Туре 1.

Владимир Фаворский

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

Горизонталь составляет основу строки, функция движения по тексту, в частности по строке, использует свойства горизонтали, её равномерное движение, и естественно и увлекательно вместе с буквами идёт по ней. С другой стороны, вертикаль столбца даёт нам и цельность этого столбца, когда мы его воспринимаем статически, и, читая строку за строкой, мы спускаемся по ней все ниже и ниже, и, между прочим, это движение вниз по вертикали, идя как бы против течения, идущего снизу, и имея тем самым всё время упор, может быть всегда остановлено. (Это подобно тому, как пароход, положим, на реке Оке, идя против течения, легко останавливается и задерживает ход и ссаживает пассажира, а идя по течению, часто отказывается это сделать.)

Но вертикаль со всеми её свойствами как ограниченной и масштабной линии работает в шрифте главным образом как остановка. И в книге вертикаль титула и вертикаль столбца, и в букве вертикаль штамба буквы работает как остановка.

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

В. Фаворский. «Шрифт, его типы и связь иллюстрации со шрифтом». Обложка. 1925. Ксилография.

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

Не являются ли буквы тоже сколько-то подлинным изображением тех голосовых жестов, которыми мы при помощи горла, нёба, зубов и языка произносим нужный нам звук?

В этом отношении можно по-разному расценивать гласные и согласные звуки. Гласные гораздо проще по мускульному жесту; тут участвует главным образом голосовая труба, которая либо сжимается, как в звуке «И», либо берётся открытая в самой своей глубине, как в звуке «А», либо удлиняется ртом в звуке «О», либо удлиняется губами в звуке «У». Поэтому естественно, что в буквах это отражается.

В. Лазарев. «Никодим Павлович Кондаков». Обложка. 1925. Ксилография.

В буквах, обозначающих гласные звуки, изображается как бы голосовой жест это ясно в «О», ясно в «У», ясно в «И», если бы изображать его однопалочным; несколько менее ясно в букве «А», а в букве «Е», особенно если нарисовать её, как «Э» оборотное, как бы в профиль, изображается весь голосовой аппарат и рот, и язык.

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

«Революционная поэзия современного Запада». Антология. Обложка. 1928. Ксилография.

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

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

«Слово о полку Игореве». Заглавие для переплёта. 1938. Ксилография.

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

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

Наши согласные знаки вносят в шрифт массу штамбов вертикальных мачт. У нас много букв с одной мачтой, но есть и с двумя, есть даже с тремя как «Ш» и «Щ»; и даже в гласных мачта занимает некоторое место как в «И» и в «Ы» и «Е»; и в мягком и твёрдом знаке, и в двугласных как в «Ю» и «Я».

Тем более для моделировки строки необходимо использовать зияние гласных в контраст с вертикализмом согласных.

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

Н. Бромлей. «Потомок Гаргантюа». Обложка. 1930. Ксилография.

Если мы возьмём букву «К», то на ней очень ясно можно видеть использование мачты как остановки и идущих от неё вверх и вниз жестов ветвей. Композиционное значение этой конструкции в том, что мы, укрепившись по вертикали, в то же время движемся дальше.

Жесты идут в диагональном направлении вверх и вниз, буква как бы шагает и подымает руку. Жесты подобны жестам дерева или человека, и диагональное их направление сохраняет за буквой цельность, а горизонтальное движение выполняется сложно, а не примитивно. Если мы к этому знаку присоединим знак гласной «О», а после «У», то это как бы продолжит жест буквы «К». Жест будет идти как бы от того же штамба и тем самым сделает слог единым организмом. То же можно представить себе и с другими согласными. С некоторыми единство слога будет удачно строиться, с некоторыми менее удачно, но тем не менее, достигнув слоговой выразительности начертания слова, можно добиться и графического ритма, соответственного словесному ритму.

«Четвёртая выставка скульптуры ОРС». 1931. Ксилография.

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

Буква тонет в белом и возникает из белого (буква как бы похожа на муху в молоке). Иначе буква сухо лежала бы на листе в цветовом отношении и как бы могла быть сброшена с листа бумаги.

Марка русско-германского общества «Культура и техника». 1929. Ксилография.

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

Не уходя слишком далеко в историю шрифта, начнем с XVI века. Книга иллюстрацией тогда имела продольную линейную гравюру пли потом медную гравюру, и буква сама часто резалась на дереве или гравировалась на меди. Основой шрифта были штамбы и дуги; штамбы делались с подсечками , что вообще очень существенно в шрифте, так как ограничивает вертикаль, делает её предметной, не позволяет ей тонуть в белом и превращает штамб как бы в колонну. Причём форма подсечек в это время оканчивалась довольно остро. Штамб как бы вдавливался сколько-то в белый цвет. Такие тонко оканчивающиеся подсечки при не очень толстом штамбе делали некоторый контраст цвета, правда, скрадывающийся при печати, когда при вдавливании буквы в бумагу острые края несколько закруглялись.

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

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

Подобный шрифт и дуги строит более или менее правильно, подобно тому как сгибалась бы стальная пружина, и поэтому малые дуги, как, например, в «В» и «Б» и др., займут гораздо меньше места, чем большая дуга «С» или «О».

Моделировка дуг тоже не должна быть очень контрастной, так как тогда, естественно, нарушится единство локального цвета буквы.

Существенно, конечно, где мы прикрепляем дуги или ветки к штамбу. Прикрепляя выше или ниже, мы букве даём определённый масштаб.

Пример «объёмного» шрифта по классификации Фаворского гарнитура Академическая. Каталог ручных и машинных шрифтов. Изд. «Книга». Москва. 1966.

Где должна быть талия у буквы «В» и др.?

По-видимому, только не на геометрической середине, так как таковой для вертикали зрительно, собственно, не существует. Талия буквы «В» должна быть выше середины, и, следовательно, верхняя дуга будет меньше, чем нижняя. Момент, насколько выше середины штамба даёт, так сказать, талию буквы, решит масштаб буквы, её стройность или приземистость. И если это определено, то во всех буквах, где талия есть, она должна быть дана на той же высоте. Так, в «В», «Б», «З», «Я», «Ъ», «Ь», «X» и, возможно, в перемычке букв «Н» и «Ю», но в «Е», «Р» и «Ч» она может быть ниже середины, так как иначе дуги будут очень малы, а язычок в букве «Е», если он ниже, то выразительнее звучит в конструкции буквы.

Журнал «Искусство». Обложка. 1928. Ксилография.

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

Альбрехт Дюрер. Схема построения латинской прописной буквы K. . 1525.

Надо заметить, что в подобном шрифте, то есть объёмном, возможно выделение горизонталей, как, например, в буквах «Н», «Ю», «А»; они могут составлять как бы середину между толщиной штамба и тонкой линией.

Диагональ подъёма и диагональ падения хорошо различаются по цвету, и естественно, что лёгкость соответствует диагонали подъёма, а диагональ падения загружается цветом.

Поэтому очень неприятно звучит в нашем шрифте буква «И», изображаемая как перевёрнутая латинская буква «N».

В объёмном шрифте, который можно назвать также классическим, вертикаль и горизонталь соизмеримы. Это подчёркивает особенно строение дуг в таких буквах, как «О» или «С». Надо тоже сказать, что «О», стремясь к кругу, строится всё-таки только как широкий овал, а не как круг. И, кроме того, «О» и «С» делаются немного выше других букв, а также «А», если кончается вверху остро.

Г. Шторм. «Труды и дни Михаила Ломоносова». Титульный лист. 1932. Ксилография.

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

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

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

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

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

Иллюстрации Изидора Жерара Гранвиля (Jean Ignace Isidore Gérard Grandville, 18031847) к книге Джонатана Свифта «Путешествие Гулливера» (1838).

Иллюстрации Изидора Жерара Гранвиля (Jean Ignace Isidore Gérard Grandville, 18031847).

Объёмная буква (А ) очень предметна. Не то с романтической буквой (Б ): она пространственна, она часто очень сжата; её вертикализм в строении её дуг делает её как бы элементом пространственного ряда, а не самостоятельным предметом.

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

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

Пример «романтического» шрифта по классификации Фаворского гарнитура Елизаветинская. Каталог ручных и машинных шрифтов. Изд. «Книга». Москва. 1966.

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

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

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

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

В этих двух типах шрифта дуги часто теряют всякое воспоминание о пружине и часто квадратятся.

Журнал «СССР на стройке», № 10, 1935. Художник В.А. Фаворский

Акцидентная Тагирова. Экспериментальный шрифт, разработанный на основе теории Фаворского. «В проекте шрифта учтены высказывания В.А. Фаворского о возможности существования наборных полос с неровной цветовой насыщенностью знаков». Фаик Тагиров. «Искусство шрифта. Работы московских художников книги». 19591974. М.: «Кни-га», 1977.

Борис Грозевский, ассистент Владимира Фаворского во ВХУТЕИНе (19221930). Оформление обложки издания Международного аграрного института, М., 1928

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

Вот, собственно, основные типы шрифта. Возможны какие-то средние между ними, как бы гибридные типы.

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

Образцы шрифтов типографии Можайского УИКа. Можайск. 1926.

Отсюда может возникнуть вопрос: можно ли соединять разные гарнитуры, как в архитектуре разные ордера? По-видимому, возможно, но родственные.

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

Б. Бернсон. «Флорентийские живописцы Возрождения». Обложка. 1923. Ксилография.

Я уже говорил о связи шрифта с иллюстрацией. Можно ещё подробнее остановиться на этом вопросе.

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

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

А. Пушкин. Собрание сочинений. Шмуцтитул. 1949. Ксилография.

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

Инициалы к повести Анатоля Франса «Суждения аббата Жерома Куаньяра». 1918. Ксилография.

Прежде всего, как строить отдельное слово? Слово часто в титуле составляет всю строку, а иногда и всё содержание титула. Это обусловливает к нему особый подход. Мы, рисуя слово, можем учесть в нём корень, подъемную гласную или предлог и окончание. И, учитывая всё это, можем отчасти усилить нагрузку цвета и теснее построить буквы, дающие корень слова, а начало и особенно конец разрядить и облегчить в цвете, а иногда развить это так, что слово уже не будет держаться только строки, но жить на всём листе, как жил бы вензель или что-либо подобное.

Такое же отношение может быть к слову и в строке, где оно входит в целую фразу, но более осторожное.

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

В. Шекспир. «Гамлет». 1940. Титульный лист. Ксилография.

Это всё, по-видимому, что могу я вкратце сказать о шрифте, о том, как я его понимаю и как я его практически осуществлял.

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

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

В. Фаворский. Приглашение на вечер памяти П. М. Третьякова. Москва. 1923.

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

Опуб-ли-ко-ва-но с со-кра-ще-ни-ем по из-да-нию: Фа-вор-ский В. А. Об ис-кус-стве, о кни-ге, о гра-вю-ре. М., 1986. Пер-вая пуб-ли-ка-ция: О гра-фи-ке как об осно-ве книж-но-го ис-кус-ства. 19541960 // Ис-кус-ство кни-ги. М., 1961. Вып. 2. Ре-дак-ция бла-го-да-рит за по-мощь в под-го-тов-ке пуб-ли-ка-ции Ива-на Ша-хов-ско-го и Ми-шу Бе-лец-ко-го. Ини-ци-ал Ан-дрей Бе-ло-но-гов, Яна Кутьи-на.

То же, что основной штрих — доминирующий вертикальный или наклонный штрих в основе знака. В округлых знаках основной штрих называется наплыв (максимальное утолщение штриха). — Прим. ред.

В. А. Фаворский так называет засечки . — Прим. ред.

44 невероятных шрифтов для тату

Неважно, присматриваете ли вы себе татуировку впервые или вы — тату-сноб, выбор правильного шрифта требует терпения. Поэтому сегодня мы представим вам 44 сумасшедше прекрасных шрифтов, которые вам обязательно понравятся.

С подборкой шрифтов по рекомендациям GraphicRiver и Envato Elements, эта коллекция включает в себя 44 прекрасных шрифтов, которые вам определённо захочется внедрить в свою следующую работу.

Хотите особый, индивидуальный подход? Заручитесь помощью профессиональных дизайнеров Envato Studio для создания авторского дизайна тату, разработанного специально для вас!

44 сумасшедше невероятных шрифтов для тату

Вам нравится дизайн татуировок? Нам — определённо! От диких декоративных шрифтов до великолепных рукописных шрифтов — у нас есть всё, что может вам понадобиться.

Насладитесь этой разнородной коллекцией, представленной ниже, и напишите в комментариях, что вам понравилось больше!

Рукописный шрифт

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

Шрифт «Тату Капитана Кука»

Назван в честь знаменитого Капитана Джеймса Кука, который случайно наткнулся на удивительных татуированных людей в Южной части Тихого океана. Этот шрифт сочетает крутой декоративный стиль, идеальный для моряка или пирата. Его рекомендуемый размер для прекрасного дизайна вашего следующего тату-проекта — 36 точек или больше.

Шрифт Aseina

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

Шрифт Conchita

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

Шрифт BloodOnMyBlade

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

Шрифт Black Vision

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

Шрифт November

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

Шрифт Bodega

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

Шрифт Alitide

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

Шрифт Brushgyo

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

Шрифт Victorian Parlor

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

Машинописный шрифт

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

Шрифт Victoriandeco

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

Шрифт Black Heat

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

Шрифт Stay High

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

Рукописный шрифт Marchy

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

Шрифт Sekatoan

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

Шрифт Bekelakar

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

Шрифт Dramaga

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

Шрифт Sadis

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

Шрифт Stiquez

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

Шрифт Annabel

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

Шрифт Einstein

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

Шрифт Twenty Nine

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

Дуэт шрифта Jimmy

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

Шрифт SokaQola

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

Семейство шрифтов Amorie Modella

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

Шрифт Rude Cookie

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

Шрифт Hello Lary

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

Три шрифта Reckless

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

Шрифт Balham to Brooklyn

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

Шрифт Roadhouse Blues

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

Шрифт Petit Jardin

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

Шрифт Food Craft

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

Шрифт Sacred Geometry

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

Шрифт Glamour

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

Шрифт Adorabelle

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

Шрифт Stay Alive

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

Рукописный шрифт Beautylove

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

Шрифт Zenzero Sans

Если вы в поисках чёткого дизайна, рассмотрите этот шрифт в качестве варианта. Промышленно ориентированный шрифт был создан в стандартном, круглом стиле, что даёт вам бесконечные возможности.

Базовый шрифт Haext

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

Рукописный шрифт Growler

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

Шрифт Honeycomb

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

Рукописный шрифт Mochafloat

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

10 потрясающих обучающих материалов по татуировкам на Envato Tuts+

Вдохновлены этой замечательной коллекцией? Проверьте свои навыки с этими замечательными обучающими материалами на Envato Tuts+.

Вывод

Этот список полон отличных ресурсов для жаждущего дизайнера, знакомого с OpenType и т.д. Если нужна дополнительная помощь в создании индивидуального тату-дизайна, доверьтесь талантливым профессионалам, одного из которых вы можете выбрать среди потрясающих дизайнеров в Envato Studio.

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

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

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

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

Безопасные веб-шрифты

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

p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}

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

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

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

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Свойство font-family</title>
<style> 
.times {
font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный  serif (с засечками)*/
}
.courier {
font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */
}
</style>
</head>
	<body>
		<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
		<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
	</body>
</html>

В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).

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

Результат нашего примера:

Рис. 34 Пример использования свойства font-family.

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

sans-serif (без засечек)
Семейство шрифта (font-family)	Пример
Arial, Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serif	Съешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serif	Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif	Съешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.

serif (с засечками)
Семейство шрифта (font-family)	Пример
Georgia, serif	Съешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif	Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif	Съешь же еще этих сочных мандаринов.

monospace (моноширинные)
Семейство шрифта (font-family)	Пример
«Courier New», Courier, monospace	Съешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospace	Съешь же еще этих сочных мандаринов.

Типы веб-шрифтов и их поддержка браузерами

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

TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Ответственность и поиск веб-шрифтов

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

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

Добавление веб-шрифта на страницу

Для добавления шрифта на страницу Вам необходимо:

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

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

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

После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):

После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:

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

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

одну плотность шрифта.
один стиль для этого шрифта.

Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!

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

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования правила @font-face</title>
<style> 
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Regular.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
 /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться.  IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор  */
src: url("/fonts/Roboto-Bold.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: bold;  /* определяет жирное начертание символов */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Italic.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: italic;  /* указываем, что стиль шрифта курсивный */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family: "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
<body>
	<h3>Немного о пандах</h3>
	<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>). </p>
</body>
</html>

И так, что мы сделали в этом примере:

Добавили три правила @font-face в начало наших CSS стилей (это важно).
В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.

Результат нашего примера:

Рис.38 Пример использования правила @font-face.

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: 
	local("font");  /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
	url("/fonts/font. woff2") format('woff2');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.woff") format('woff');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format) */
}

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

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

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

Добавление веб-шрифта со стороннего ресурса

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

Переходим на сайт службы Google Fonts.
Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»
Например, меня интересуют следующие:

Для заголовков (элемент <h3>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).

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

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

Далее на вкладке «Embed» нам будет предложено два варианта подключения (Standart и @import):

Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).

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

Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).

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

Рассмотрим пример подключения, выбранных нами шрифтов:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя тег <link></title>
<link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */
<style>
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о верблюдах</h3>
		<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>).  Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p>
	</body>
</html>

Результат:

Рис.44 Пример подключение веб-шрифтов, используя тег <link>.

Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.

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

@import url("path/to/file.css");

Предлагаемый вариант импортирования на страницу:

Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя правило @import</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о пингвинах</h3>
		<p><b>Пингвиновые</b> или <b>пингвины</b> (лат.  <i>Spheniscidae</i>) —  семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p>
	</body>
</html>

Результат нашего примера:

Рис.46 Пример подключение веб-шрифтов, используя правило @import.

Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты: для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега <link> подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.

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

Гармоничная типографика и сетки, руководство

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

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

Гармоничная типографическая и сеточная система внутренне непротиворечива. Такие системы помогают убедиться, что все макеты и компоненты соответствуют друг другу, по аналогии с конструктором – любой кирпичик Lego совместим с другим кирпичиком Lego.

Почему это важно

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

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

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

Последовательность

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

Шпаргалка по дизайну гармонической сеточной и типографической системы.

1 Цели
Каковы принципы вашего бренда и дизайна? Как вы узнаете, что достигли успеха в выбранном решении?

2 Иерархия
Понимание контента. Что является основным, а что вторичным, Убедитесь, что дизайн подходит под все нужные формы текста.

3 Шрифты
Выберите 2 шрифта, один для body и один для заголовков. Ищите хороший контраст между этими двумя шрифтами.

4 Размер и пропорции шрифта
Выберите базовый размер для основного шрифта и пропорцию для высоты строки. Самое удачное соотношение обычно между 1.2 и 1.5.

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

6 Горизонтальное расстояние
Определите оптимальную длину строки для своего макета – обычно лучше выбирать 65 – 85 символов.

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

8 Горизонтальная сетка
Установите 12-колоночную макетную сетку, чтобы распределять элементы по горизонтали, используя базовую высоту строки в качестве интервала между колонками.

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

1 Определите свои цели

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

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

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

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

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

Несколько вдохновляющих идей (от талантливых иллюстраторов, художников-шрифтовиков и дизайнеров на Dribbble), в паре с некоторыми определениями бренда.

2 Иерархия контента

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

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

Избегайте Lorem Ipsum

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

Если вы вынуждены сделать дизайн без реального контента, хотя бы используйте текст в нужном языке, подходящий по тематике к бренду. Пример текста, который я выбрал, “Алиса в стране чудес”, – уместный выбор для детского бренда, но он явно не подойдет, если я создаю дизайн для юридической конторы.

Макетируйте все типы контента

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

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

Заголовок(h2)
Подзаголовки (h3 — H6, хотя на практике вам, скорее всего, пригодятся только h3 и h4)
Основной текст
Цитаты и врезы
Списки (нумерованные и ненумерованные)
Ссылки (состояние по умолчанию, на ховере, активное/нажатое)
Метки полей ввода формы
Подписи к изображениям, мелкий текст и приглушенный текст

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

Больше примеров текста вы найдете на проекте Gutenberg Project: https://www.gutenberg.org/

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

3 Выбор шрифтов

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

При выборе типографики, есть несколько вопросов, на которые нужно ответить:

Каков ваш бюджет?

За типографику, как и за большинство вещей в мире, придется платить. Из этого правила есть несколько исключений, но начните с того, сколько вы готовы потратить. Если у вас есть бюджет, начните искать шрифтовые студии, такие как House Industries и Hoefler & Co., или каталоги профессиональных шрифтов вроде Typekit (отличный вариант, если вы уже платите за Adobe CC) и MyFonts.

Если у вас нет бюджета – не беспокойтесь! Вы можете найти массу отличных шрифтов в Google fonts, как для скачивания, так и для использования в вебе. Избегайте использования огромных бесплатных репозиториев шрифтов, если только не найдете в нем конкретный шрифт, созданный профессиональным шрифтовым дизайнером. Аматорские шрифты могут выглядеть интересно, но в них может не быть множества важных деталей и профессиональной отшлифовки.

Где это будет использоваться?

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

Выберите стиль заголовков

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

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

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

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

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

Сверху по порядку: Kabel, Raleway, Source Serif, Abril Titling

Выберите пару для основного текста

После того, как вы выбрали 3-5 шрифтов для заголовков, настало время выбрать хороший шрифт в пару для основного текста.

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

Здесь решение должно быть продиктовано контрастом. Если для заголовка вы выбрали броский serif, попробуйте геометрический sans-serif для основного текста. Сайт fontpair.co может помочь вам принять решение насчет выбора нужного контраста. Вы также можете использовать один и тот же шрифт для ваших заголовков и основного текста, достичь контраста, играясь с насыщенностью (например, жирный вариант для заголовков и обычный для основного текста).

Мне также нравится гуглить “font pairing” + название выбранного сервиса (например, “font pairing google fonts”). Есть масса сайтов для вдохновения, которые покажут пары шрифтов в действии. Например, couple favorites.

Мне нравится сокращать выбор шрифтов основного текста максимум до 2-3 вариантов (в сумме, а не 2-3 на каждый шрифт заголовка).

По порядку сверху: Source Serif, Open Sans, Abril Text

Протестируйте выбор на артборде

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

Решайте

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

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

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

Для примера с Алисой в Стране чудес, я выбрал такой вариант:

Заголовок: Abril Titling Narrow; Основной текст: Source Serif Regular

4 Базовый размер шрифта и высота строки (соотношение)

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

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

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

Лучше всего начать с базовых параметров для устройства, под которое вы создаете дизайн, и отталкиваться отсюда. Если вы создаете дизайн под веб, размер по умолчанию – 16px. Для iOS – 17pt, для Android – 13sp.

Технические отклонения: хотя есть разные единицы измерения, и они по-хитрому отличаются, на этом этапе разница не очень важна. Sketch измеряет шрифты в точках (pt), и это можно перевести в единицы, используемые для веба и Android. Если вдруг на вас нападет бессонница, можете нагуглить разницу между точками, пикселями и относительными пикселями для веба, и sp/dp на Android.

Когда определен размер по умолчанию, настраивайте остальные размеры под свои нужды. Неплохо использовать решение типа font face ninja, чтобы понять, какие размеры используются на других сайтах. Например, NY Times использует 13 px для основного текста, а Medium – 21px. Эти измерения отлично подходят под определение верхней и нижней границы допустимых размеров.

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

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

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

На данном этапе вам нужно беспокоиться только о базовом размере для основного контента – мы побеспокоимся о размерах остальной типографики в шаге 5.

Перед тем, как вы окончательно выберите размер, создайте несколько вариаций на артбордах размером с ваше мобильное устройство, и протестируйте их “наживо”. Для этого можно воспользоваться Sketch Mirror, или экспортировать эти тестовые артборды в PNG-файлы, а затем просмотреть их на вашем устройстве.

Слева: основной текст размером 20px; Справа: основной текст размером 18px

Выбор базовой высоты строки

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

Проверенное правило: выбирайте высоту строки где-то между 120% – 150% от размера шрифта основного текста. Если у вас есть веская причина, можете нарушить это правило.

Чем больше высота строки (ближе к пропорции 150%), тем больше расстояния будет между строками. Так, возможно, будет проще для глаз отыскать следующую строку текста.

Стилистически большая высота строки смотрится более роскошно, стабильно и уверенно. Более тесный просвет (ближе к пропорции 1.2 или даже меньше) сожмет строки текста ближе друг к другу. Такая плотность может быть на руку, в зависимости от принципов дизайна, которые вы ранее выработали. Тесный просвет позволяет увеличить скорость чтения контента, но нужно выбирать не слишком большую длину строки, иначе скорость чтения замедляется. Мы обсудим длину строки в шаге 6.

Если вам нужна помощь, воспользуйтесь инструментами вроде type scale – в нем можно легко визуализировать различные комбинации размера шрифта и высоты строк. Пропорции соответствуют музыкальным аккордам – спорный, но довольно интересный способ интерпретации пропорций.

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

Используйте целые числа

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

16 / 24 (пропорция: 1.5, или чистый квинтаккорд)
18 / 26 (пропорция: 1.44, или близко к увеличенному квартаккорду)
20 / 30 (пропорция: 1.5)

Для нашего примера я решил остановиться на 18px для основного текста – довольно большой размер, но не слишком крупный, и пропорции 1.333 (эквивалент чистого квартаккорда). Получается высота строки в 23.994, и я округлю ее до 24px. На этом моменте можно изменить изначальный артборд в соответствии с выбранными шрифтами, размерами и просветами. Забудьте пока об интервалах.

Все еще выглядит не очень, но уже лучше, чем то, с чего мы начинали.

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

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

Типографический масштаб – это не что иное, как набор размеров шрифтов, разделяющих одну внутреннюю логику, по аналогии с музыкальной гаммой. Классический масштаб прогрессирует с 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 и т.д. Мы создадим свою собственную типографическую гамму на основе пропорции, выбранной в шаге 4.

Сайт type scale очень поможет на этом этапе. Введите свой базовый размер шрифта, выберите пропорцию и type scale покажет, как будет выглядеть прогрессия размеров. Типографическая шкала показывает размеры в эмах, и проще всего понимать эм как эквивалент базового размера шрифта. Если мой базовый размер – 18px, то 2em=36px (18*2). Чтобы перевести это в Sketch, просто возьмите значение эма из шкалы, и умножьте его на базовый размер шрифта.

Совет от профи: Sketch также позволяет производить вычисления прямо в приложении, очень удобно. Скажем, ваш базовый размер и высота строки 16px / 24px (соотношение: 1.5). Чтобы перейти на следующий шаг в шкале, просто можете ввести “16*1.5”. Чтобы перейти на 2 шага вперед, введите “16*1.5*1.5”. И так далее…

Наложите типографическую шкалу на вашу иерархию контента

Когда вы задали “шаги” своей типографической шкалы, нужно наложить эти шаги на иерархию контента, которую вы задали в шаге 2. Ваш простой текст должен быть в размере 1 эм, или базовый размер шрифта. Ваши подзаголовки/h3 должны быть на шаг больше, а заголовки / h2 – на шаг больше h3. С другой стороны, ваши надписи и маленький текст должны быть на шаг меньше вашего базового размера шрифта.

Особенно при работе с большими пропорциями, или когда вам нужно сделать больше 2 уровней подзаголовков, вам могут понадобиться полушаги. Полушаги можно получить, разделяя расстояние между 1.0 и вашей пропорцией. Если базовый размер 16px, а пропорция 1.5, один полный шаг будет 24px. Один полушаг (с пропорцией 1.25) будет 20px.

6 Горизонтальный интервал (типографическое измерение)

Как только вы настроили корректные размеры для всех элементов, следующим шагом будет определить длину строки (или измерить). Оптимальная длина строки улучшает читабельность и сокращает количество ошибок.

Железное правило: Придерживайтесь длины строки в 65-85 символов для основного текста, что составляет примерно 2,5 длины алфавита. Проще всего нагуглить бесплатный инструмент для подсчета символов.

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

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

7 Вертикальные отступы (вертикальный ритм)

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

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

Проще пояснить на примере. Если размер текста 20px, и ваша пропорция 1.5 – при базовой высоте строки 30px, тогда допустимые высоты строк для большего и меньшего текста в иерархии составляют:

15px (30px * 0.5)3
0px (30px * 1.0)
45px (30px * 1.5)
60px (30px * 2.0)
75px (30px * 2.5)

Для примера из “Алисы в Стране чудес” мы будем использовать величины, кратные 12, так как базовая высота строки 24. Я сделал заголовки более одной строки, чтобы точно увидеть, что высоты строк для всех уровней иерархии хорошо подобраны.

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

8 Горизонтальная сеточная система

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

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

Стандартная макетная сетка Sketch для десктопа обычно очень близка к идеалу. Для тех, кто имеет опыт в разработке под веб, она основана на сеточной системе из bootstrap, которая в свою очередь основана на классической сеточной системе 960.

Есть 2 главных момента в обдумывании горизонтальной макетной сетки. Откройте настройки макета через меню View > Canvas.

Общая ширина макета – общая ширина зависит от ваших целей. Если вы ищете простоты, я бы предложил дизайн с плавающей шириной (или 100% по ширине артборда). Убедитесь, что опция “Gutter on outside” отключена, и задайте общую ширину чуть меньше, чем ширина артборда. Я обычно вычитаю свою базовую высоту или 2-кратную базовую высоту строки, из общей ширины макета, а затем центрирую макет на артборде.
Ширина межстолбцового промежутка – эта ширина должна быть размером с базовую высоту строки для планшета и десктопа, и с половину базовой высоты строки для мобильных артбордов. Это упростит получение одинаковых отступов между элементами, как по горизонтали, так и по вертикали.

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

Сетка для мобильного макета

Для мобильного артборда используется легкая вариация. Так как тут экраны поменьше, ваша сетка должна быть на полную ширину артборда. Но я предпочитаю отнимать высоту строки из общей ширины артборда, что даст равномерные промежутки между колонками и за пределами артборда тоже. В этом случае артборд имеет ширину 375px, откуда я отнял 24px (высота строки), получилось 351px. На каждой стороне сетки остается по 12px, что повторяет ширину промежутка между колонками в 12px. Убедитесь, что отключена опция “Gutter on outside”.

Не пытайтесь УЖЕ макетировать контент. Нужно еще задать вертикальную сетку.

9 Вертикальная сеточная система

Вы почти справились! Последний шаг – нужно задать сетку строк в помощь для замера вертикального расстояния между элементами.

Откройте настройки макета снова, отметьте опцию “Rows” (строки). Высота междустрочного интервала должна составлять половину ширины интервала между колонками, а высота самой строки – 1. Настройки будут идентичными для десктопного и мобильного артбордов.

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

Макет

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

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

Закон близости

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

Например, на иллюстрации ниже я использовал 2 “блока” для разделения большей части элементов. Я удвоил расстояние между элементами, которые должны быть отделены; например, надо моими заголовками h3, а также над и под цитатными блоками. Я также использую единичный разделитель между цитатой и подписью, так как текст мелкий, и я хочу четко дать понять, что цитата и подпись связаны друг с другом.

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

Я нарисовал красные рамки поверх текстовых блоков, чтобы показать близкие связи

Итоги

Конечная версия показана ниже, все вспомогательные линии и обозначения спрятаны:

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

Простой вайрфрейм на базе ранее разработанной сеточной системы 18px/24px

Вы можете лучше?

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

Хотите большего?

Если вас интересует эта тема, и вы бы хотели углубиться, я совместно с автором Learn Python the Hard Way, Зедом Шоу разрабатываю полный курс визуального дизайна. Подписывайтесь, чтобы быть в курсе его релиза: Learn Design the Hard Way

Классификация типов | Шрифты.com

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

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

Классы

Стили с засечками

Старый стиль
переходный
Неоклассика и Дидона
плита
Кларендон
глифический

Шрифты без засечек

Гротеск
Квадратный
Гуманистический
Геометрический

Стили типов сценариев

Формальный
Повседневный
Каллиграфический
Блэклеттер и ломбардский

Декоративный

Гранж
психоделический
Граффити

Стили с засечками

Старый стиль
В эту категорию входят первые римские шрифты, первоначально созданные между концом 15 и серединой 18 веков, а также шрифты, созданные по образцу шрифтов, разработанных в этот более ранний период. Ось изогнутых штрихов в этих конструкциях обычно наклонена влево, так что весовое напряжение приходится примерно на 8:00 и 2:00 часа. Контраст в толщине штриха персонажа невелик, а линии роста волос, как правило, слишком толстые. Засечки почти всегда заключены в квадратные скобки в дизайне старого стиля, а заглавные засечки часто расположены под углом. Некоторые версии, такие как более ранние венецианские рисунки в старом стиле, отличаются диагональным поперечным штрихом строчной буквы e.

Переходные засечки
Английский печатник и типограф Джон Баскервиль создал этот стиль в середине 18 века.Эти шрифты представляют собой переход между старым стилем и неоклассическим дизайном и включают в себя некоторые характеристики каждого из них. Работа Баскервиля с каландрированной бумагой и улучшенные методы печати (оба были разработаны им) позволили воспроизводить гораздо более тонкие штрихи символов и сохранять более тонкие формы символов. В то время как ось кривых штрихов может быть наклонена в переходных конструкциях, штрихи обычно имеют вертикальное напряжение. Контраст веса более выражен, чем в дизайнах старого стиля.Засечки по-прежнему заключены в квадратные скобки, а заглавные засечки наклонены.

Неоклассика и дидонские засечки
Это шрифты, созданные в конце 18 века, или их прямые потомки. Работа Джамбаттисты Бодони олицетворяет этот тип шрифта. При первом выпуске эти шрифты назывались «классическими». Однако на раннем этапе печатникам стало очевидно, что это не обновленные версии классических шрифтов, а совершенно новый дизайн. В результате их классификационное название было изменено на «современные».С середины 20 века их также относят к неоклассическим или дидонским. Контраст между толстыми и тонкими мазками резкий и драматичный. Ось изогнутых штрихов вертикальна, практически без брекетинга. Во многих случаях штриховые терминалы имеют форму «шара», а не вызывают эффект широкого пера. Как правило, это очень манерные рисунки с четко построенными буквами.

Плоские засечки
Шрифты с засечками стали популярны в 19 веке для рекламы. Эти шрифты имеют очень тяжелые засечки с минимальными скобками или без них. Как правило, изменения веса гребка незаметны. Многим читателям шрифты с засечками выглядят как шрифты без засечек с простым добавлением тяжелых (ширина штриха) засечек.

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

Глифические засечки
Гарнитуры этой категории, как правило, имитируют лапидарные надписи, а не текст, нарисованный пером. Контраст в весе штриха обычно минимальный, а ось изогнутых штрихов имеет тенденцию быть вертикальной.Отличительной чертой этих шрифтов является дизайн с засечками треугольной формы или расширение штрихов символов в местах их окончания. В некоторых системах классификации шрифтов эта категория подразделяется на две группы: «глифические» и «латинские». «Латиницы» — это начертания с засечками строго треугольной формы.

Стили шрифтов без засечек

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

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

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

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

Стили типов сценариев

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

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

Blackletter и ломбардские шрифты
Эти шрифты созданы по образцу рукописных букв до изобретения подвижного шрифта.

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

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

6 Типы шрифтов и их использование | Выберите правильный шрифт

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

6 типов шрифтов

1. Шрифты с засечками Шрифты с засечками

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

Сегодня они считаются оригинальными шрифтами и широко используются.

Они часто ассоциируются с традициями, культурой, изысканностью и доверием. Многие известные бренды используют шрифты с засечками, особенно бренды в индустрии моды и финансов. Примеры брендов, использующих шрифты с засечками, включают Vogue, Burberry и J.P. Morgan.

Шрифты

Serif также используются в повседневной жизни, и вы сталкивались с ними раньше. Примерами шрифтов с засечками являются Times New Roman, Georgia, Grammond.

Фото Charisse Kenion на Unsplash

2.Шрифты Slab Serif

Это более жирные и короткие версии шрифтов с засечками. Примеры шрифтов включают rockwell и arvo.

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

Шрифты с засечками

Slab используются многими компаниями, включая Honda, Mozilla и Volvo. Их разборчивость и смелый вид делают их популярными среди компаний, которые имеют наследие и хотят выглядеть современно.

Фото Адама Кая на Unsplash

3. Шрифты без засечек Шрифты без засечек

— это шрифты без засечек или кривых вверху и внизу букв. Они считаются простыми, с линиями одинаковой ширины повсюду. Примеры шрифтов: arial и roboto. Они стали популярными сравнительно позже, чем семейство шрифтов с засечками. Они стали больше появляться на публике с середины 19 века.

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

Фото Morning Brew на Unsplash

4.Скриптовые шрифты Шрифты

Script используют рукописный стиль рукописного ввода. Они могут быть формальными или неформальными, но обычно имеют сильное присутствие. У них есть потенциал быть уникальными. Примеры скриптовых шрифтов включают lucida script и pacifico.

Повседневные стили, основанные на рукописных шрифтах, часто используют тренды. Но некоторым брендам удалось выработать собственный стиль. Бренды с запоминающимися шрифтами — это Johnson & Johnson и Ford. Рукописные шрифты ассоциируются с элегантностью, уникальностью и запоминаемостью.

Фото Джеймса Ли на Unsplash

5. Декоративные шрифты

Декоративные шрифты сочетают в себе различные стили и графику. Дизайнеры также могут экспериментировать и придумывать собственные шрифты. Примеры шрифтов включают bangers и fredericka.

Декоративные шрифты могут быть яркими и выразительными. Примерами брендов, которые освоили отличные декоративные шрифты и владеют ими, являются Disney и Lego. Однако следует помнить об одном риске, связанном с этим типом шрифта, — это тенденция в конечном итоге копировать существующий шрифт (например, Disney) и рисковать нарушением авторских прав.Но когда вы правильно подберете декоративный шрифт, они могут отлично подойти для вашего бренда.

Фото Брайана Макгоуэна на Unsplash

6.

Рукописные шрифты

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

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

Фото Джоша Олальде на Unsplash

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

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

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

Избранное изображение — фото Бруно Мартинса на Unsplash

5 Типы шрифтов и когда их использовать – Moeller Printing

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

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

Засечки

Шрифты с засечками

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

Шрифты с засечками

также популярны для логотипов брендов. Они сообщают об уровне уверенности и элегантности для брендов, которые хотят выглядеть классическими и устоявшимися. Один шрифт с засечками, который становится все более популярным среди брендов, называется Didot и использовался в логотипах Harper’s Bazaar, Elle Magazine и Giorgio Armani. Другие известные компании, в том числе Vogue и New York Times, также используют шрифты с засечками для создания логотипов, которые кажутся вечными, хотя и немного формальными. Между прочим, у них у всех был один и тот же логотип на протяжении десятилетий, что доказывает, что шрифты с засечками никогда не выходят из моды.

Без засечек

В последние годы популярность шрифтов без засечек

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

В отличие от шрифтов с засечками, шрифты без засечек выглядят немного более повседневно и молодежно. При использовании для логотипа бренда или вспомогательных материалов шрифт без засечек может сделать бренд узнаваемым, современным и непринужденным. Helvetica сегодня является одним из самых популярных шрифтов без засечек у брендов, и такие компании, как Target, Panasonic, Jeep и Toyota, используют различные варианты шрифта в своих логотипах. Google также, как известно, претерпел редизайн логотипа, когда в 2015 году они сменили брендинг своих словесных знаков со шрифта с засечками на шрифт без засечек, что помогло придать их мегакорпорации более доступный вид.

Гладкая засечка

Шрифты с засечками

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

Шрифты с засечками

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

Скрипт

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

Шрифты

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

Декоративный

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

Основным применением декоративного шрифта обычно является логотип или основной заголовок печатной продукции. Часто это самые большие элементы на странице, что облегчает чтение более креативных шрифтов. Более частое использование таких шрифтов в вашем дизайне может перевесить другой контент и сделать весь текст перегруженным, поэтому ограничьте шрифт несколькими ключевыми заголовками, чтобы добиться максимального эффекта.В последние годы особенно популярны шрифты в винтажном стиле, а также шрифты футуристического вида. Вы можете узнать известные примеры каждого из них, такие как игривый логотип Ray-Ban эпохи 80-х и новый гладкий, современный, почти зловещий логотип команды Seattle Kraken.

Понимание нюансов классификации шрифтов

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

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

Основы типографики

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

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

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

История стилей шрифтов

Самые старые шрифты назывались blackletter и датируются 1400-ми годами. Эти ранние шрифты напоминали рукописную каллиграфию.

Логотип «Нью-Йорк Таймс» — это классический, вездесущий пример шрифта «черный шрифт», как и многие другие популярные газетные названия.

После блэклеттера появились первые шрифты с засечками.Засечки включают в себя небольшие выступы, которые завершают штрихи их форм букв (называемые засечками , откуда этот стиль и получил свое название). Появившись в 1500-х годах, первые засечки были засечками в старом стиле. Этот стиль включает Garamond и Goudy Old Style.

Преемники засечек старого стиля назывались переходными засечками, которые впервые появились в 1700-х годах. Эти шрифты имели высокий контраст штрихов и были более вертикальными, чем их предшественники в старом стиле.

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

Плоские засечки — это последняя эволюция стиля с засечками. С появлением механизации (например, паровой печатной машины, 1814 г.) и других важных нововведений в технологии печати, а также новой волны в рекламе, когда рекламодатели стремились к жирному шрифту, который действительно заявлял о своем присутствии, они были разработаны частично для того, чтобы противостоять гораздо больше промышленных процессов печати.У них небольшой контраст между штрихами, и большинство из них не заключены в скобки. Гладкие шрифты с засечками включают, среди прочего, Rockwell и Clarendon. Их иногда считают шрифтами для пишущих машинок, но они использовались гораздо более широко на протяжении 20-го века.

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

(Источник: Майкл Саллит)

Позже, в 1900-х годах, после того, как гротески пришли к неогротескным шрифтам без засечек. Эти шрифты были разработаны, чтобы быть более разборчивыми, чем их более ранние аналоги, и, как правило, имеют гораздо более простой дизайн. Helvetica и Arial являются примерами нео-гротеска без засечек.

Завершают шрифты без засечек геометрический и гуманистический стили.Геометрические шрифты без засечек, как и современные шрифты с засечками, довели стиль до предела. У них есть формы букв, основанные на простых геометрических формах, особенно круглых формах «О», и они очень современны. Однако их ультрасовременные формы жертвуют читабельностью при меньших размерах. Futura — самый известный геометрический шрифт без засечек.

Futura прочно ассоциируется с фильмами Уэса Андерсона.

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

Понимание основ

Какова цель типографики?

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

Что такое типографика в веб-дизайне?

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

Для чего используется типографика?

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

Чем отличается шрифт от гарнитуры?

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

Что такое типографика и почему она важна?

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

Ускоренный курс типографики: основы шрифта

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

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

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

Гарнитуры и шрифты: разница?

Многие люди используют термины «гарнитура» и «шрифт» как синонимы. Но это две совершенно разные вещи. Прежде чем мы начнем говорить о типографике, давайте проясним наши термины.

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

Несколько типов шрифтов;

Старые шрифты с засечками
Переходные шрифты с засечками
Квадратные шрифты без засечек
Геометрические шрифты без засечек
Формальный шрифт
Повседневный шрифт

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

Классификация шрифтов

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

Технический стиль шрифтов

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

Шрифты с засечками Шрифты с засечками

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

Классификация шрифтов с засечками включает множество подтипов. Шрифт с засечками включает:

Старые шрифты с засечками , такие как Adobe Jenson, ITC Berkeley Oldstyle и Goudy Old Style
Переходные шрифты с засечками , такие как Times New Roman, Baskerville и Americana
Неоклассический и Didone 9002
, 1001 Bodoni и Didot, Marconi SLAB Serifs Как американская пишущая машинка, Rockwell, и SOHO
Clarendon Serifs как Bookman, Clarendon, и Nimrod
глифических засечек вроде Albertus, Cartier Book, и Froz Cadterata

старый стиль Serifs (также названный гуманистическим) являются старейшими шрифтами в этой классификации, датируемыми серединой 1400-х годов.Основной характеристикой символов старого стиля является их диагональное ударение (самые тонкие части букв появляются на наклонных штрихах, а не на вертикальных или горизонтальных). Гарнитуры в этой категории включают Adobe Jenson, Centaur и Goudy Old Style.

Переходные шрифты с засечками восходят к середине 1700-х годов и, как правило, являются наиболее распространенными шрифтами с засечками. Times New Roman и Baskerville являются переходными шрифтами с засечками, как и Caslon, Georgia и Bookman.Различия между толстыми и тонкими штрихами в переходных шрифтах более выражены, чем в старом стиле с засечками, но менее выражены, чем в современных.

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

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

Шрифты без засечек Шрифты без засечек
называются так потому, что в них отсутствуют детали с засечками на символах. Шрифты без засечек часто выглядят более современно, чем шрифты с засечками. Первые шрифты без засечек появились в конце 18 века.
Существует четыре основных классификации шрифтов без засечек :
Гротеск1 Grotesque , как Венера, монотип гротеск, и новости Gothic
Neo Grotesque , как Helvetica, San Francisco, и Roboto
гуманистические , как Tahoma, Verdana, Calibri и Trebuchet
Геометрический Как Gotham , Avenir и ITC Avant Garde
Grotesques являются самыми ранними и включают такие шрифты, как Franklin Gothic и Akzidenz Grotesk.Эти шрифты часто имеют формы букв, которые очень похожи на шрифты с засечками, за исключением засечек.
Гарнитуры
Neo-Grotesque включают в себя некоторые из наиболее распространенных шрифтов: MS Sans Serif, Arial, Helvetica и Univers — все шрифты без засечек в стиле нео-гротеск. Они имеют относительно простой вид по сравнению с гротескными.
Гуманистические шрифты включают Gill Sans, Frutiger, Tahoma, Verdana, Optima и Lucide Grande. Они более каллиграфичны, чем другие шрифты без засечек, а также являются наиболее разборчивыми (отсюда популярность некоторых из них для основного текста веб-сайта).Они более каллиграфичны, чем другие шрифты без засечек, а это означает, что ширина линий у них больше.
Геометрические шрифты без засечек больше основаны на геометрических формах. Как правило, буква «О» в геометрии кажется круглой, а буква «а» почти всегда простая, просто круг с хвостиком. Они реже всего используются для основного текста, а также, как правило, являются самыми современными шрифтами без засечек.
Шрифты рукописного ввода Скрипты
основаны на почерке и предлагают очень плавные формы букв. Существует две основные классификации: формальная и повседневная . Формальные шрифты часто напоминают рукописные формы букв, распространенные в 17 и 18 веках. Некоторые сценарии основаны непосредственно на почерке таких мастеров, как Джордж Снелл и Джордж Бикхэм. Есть и современные творения, в том числе Kuenstler Script. Они характерны для очень элегантного и возвышенного типографского дизайна и не подходят для основного текста.
Повседневные шрифты больше напоминают современный почерк и восходят к середине двадцатого века.Они гораздо менее формальны, часто с более сильными мазками и более похожим на кисть внешним видом. Случайные сценарии включают Mistral и Brush Script.
Гарнитуры дисплея
Экранные шрифты, вероятно, являются самой широкой категорией и включают в себя наибольшее количество вариаций. Основная особенность заключается в том, что они не подходят для основного текста и лучше всего подходят для заголовков или других коротких текстов, которые требуют привлечения внимания. Дисплейные шрифты могут быть формальными или неформальными и вызывать любое настроение.Их чаще можно увидеть в печатном дизайне, но они становятся все более популярными в Интернете благодаря использованию веб-шрифтов.
Среди экранных шрифтов также есть шрифты blackletter , которые были оригинальными шрифтами, использовавшимися в первых печатных машинах. С тех пор были разработаны лучшие, более читаемые шрифты.
Дингбаты и специальные шрифты
Дингбаты — это специальные шрифты, состоящие из символов и орнаментов вместо букв.Wingdings, вероятно, самый известный шрифт dingbat, хотя в настоящее время их тысячи, часто созданные по темам.
Шрифт выше — Jellodings.
Пропорциональные и моноширинные шрифты
В пропорциональных шрифтах пространство, занимаемое символом, зависит от его естественной ширины. Например, «i» занимает меньше места, чем «m». Times New Roman — пропорциональный шрифт. С другой стороны, в моноширинных шрифтах каждый символ занимает одинаковое количество места.Более узкие символы просто получают немного больше интервалов вокруг себя, чтобы компенсировать разницу в ширине. Courier New — один из примеров моноширинного шрифта.
Настроение шрифтов
Настроение шрифта — важная часть того, как его следует использовать. Разные шрифты имеют поразительно разное настроение. Обычно используемые настроения включают формальное и неформальное, современное и классическое/традиционное, легкое и драматическое. Некоторые шрифты имеют очень различное настроение . Например, Times New Roman почти всегда будет традиционным шрифтом, поэтому он так часто используется в деловой переписке.Verdana, с другой стороны, имеет более современное настроение.
Некоторые шрифты более трансцендентны и могут передать почти любое настроение в зависимости от содержания и других шрифтов, с которыми они сочетаются. Helvetica часто считается одним из таких шрифтов.
Вес и стиль
В большинстве гарнитур вы найдете более одного стиля и/или веса. Веса часто классифицируются как «легкие», «тонкие», «обычные», «средние», «жирные», «тяжелые» или «черные». Каждый из них относится к толщине штрихов, составляющих символы:
Существует три основных стиля , которые вы найдете во многих шрифтах: курсив, наклон и маленькие заглавные буквы.Маленькие прописные часто используются для заголовков или подзаголовков, чтобы добавить разнообразия в вашу типографику при использовании одного шрифта.
Курсив и наклонный часто путают или используют взаимозаменяемо, но это два разных стиля. Наклонный шрифт — это просто наклонная версия обычных символов. Вы можете создать это, используя функцию «искажения» в Photoshop, хотя иногда в гарнитуру включается отдельный наклонный шрифт. Курсив наклонен, как и наклонный, но на самом деле представляет собой отдельный набор символов со своими уникальными формами букв.
Анатомия шрифта
Различные формы букв внутри шрифта имеют несколько общих характеристик. Эти характеристики могут быть важны для определения того, хорошо ли сочетаются два (или более) шрифта или они конфликтуют. Вот самых основных частей шрифта:
На изображении выше показаны различные направляющие, которые обычно присутствуют в шрифте. Базовая линия — это невидимая линия, на которой сидят все персонажи. Закругленные буквы иногда располагаются чуть ниже базовой линии, а выносные элементы всегда опускаются ниже этой линии.Данный шрифт будет иметь последовательную базовую линию.
Средняя линия — это высота большинства символов нижнего регистра в гарнитуре, и обычно она основана на строчной букве «x», если высота символов нижнего регистра различается. Отсюда же и термин «x-height». Высота прописных букв — это расстояние между базовой линией и верхним краем прописных букв, таких как «А».
На приведенном выше рисунке показаны три общие части форм букв. Стержень является главной стойкой любой буквы, включая главную диагональ.Его можно считать якорем персонажа. Стержень – это любые горизонтальные детали, которые иногда еще называют плечами. Чаша — изогнутая часть персонажа, создающая внутреннее пустое пространство. Внутренняя часть чаши представляет собой прилавок.
Верхний элемент символа нижнего регистра — это любая часть, которая возвышается над средней линией, например, стойки букв «d», «h» и «b». Descenders — это части символа нижнего регистра, которые опускаются ниже базовой линии, например, в «p», «q» или «g».
Засечки — это дополнительная завитушка в конце штриха на шрифтах с засечками. Некоторые шрифты имеют ярко выраженные засечек , в то время как другие едва различимы.
Апертура символа относится к отверстию в нижней части некоторых символов, таких как прописная буква «А» или строчная буква «м». Ухо — это декоративное удлинение буквы, обозначенное буквой «g» выше. Hairlines — самая тонкая часть шрифта с засечками.
Перекладины — это горизонтальные штрихи, как в прописных буквах «А» и «Н». Терминалы встречаются только у символов с засечками и являются концом любой строки без засечек. Циклы встречаются в некоторых строчных буквах «g» и могут быть полностью или частично закрыты.
Шпоры — это крошечные выступы из изогнутых штрихов, например, на некоторых прописных буквах «G». Звенья соединяют верхнюю и нижнюю чаши двухъярусной строчной буквы «g».Корешок — это изогнутый штрих на букве «s».
Хвосты иногда представляют собой декоративные нисходящие штрихи, как видно на заглавной букве «R». Наконечники представляют собой конические окончания некоторых штрихов. Плечи — это любые изогнутые штрихи, исходящие из стержня.
В части 2…
В следующий понедельник мы обсудим состав абзаца и использование специальных типографских символов, таких как лигатуры и дефисы. Мы погрузимся прямо в основные типографские макеты и как выбрать шрифт для вашего проекта.Быть в курсе!
Дополнительные ресурсы
(ик)
Эта статья была первоначально опубликована 28 марта 2011 г. и обновлена 27 июля 2020 г.
20 лучших веб-шрифтов HTML для использования в 2022 году — учебные пособия Hostinger
Шрифты играют большую роль в общей визуальной привлекательности веб-сайта. Тщательно подобранный шрифт поможет передать правильное сообщение и обеспечить согласованность бренда.
Для этого отличный веб-шрифт должен быть удобочитаемым и безопасным для Интернета, то есть хорошо отображаться на разных устройствах, в разных браузерах и операционных системах.
Однако подобрать подходящий шрифт не всегда так просто. Часто встречаются шрифты, которые визуально привлекательны, но не безопасны для Интернета, или наоборот.
Чтобы помочь вам, мы составили список из 20 лучших веб-шрифтов HTML для вашего веб-сайта.
Что такое веб-безопасный шрифт?
Веб-безопасные шрифты — это шрифты, предустановленные в большинстве операционных систем. Это гарантирует, что шрифты отображаются должным образом при доступе с различных устройств и браузеров.
Наиболее популярные примеры веб-безопасных шрифтов включают Arial , Times New Roman и Helvetica .
Каковы категории шрифтов HTML?
В типографике каждый шрифт является членом одного из пяти семейств шрифтов, классифицированных в соответствии с их сходством дизайна. Они:
Курсив
Cursive Шрифты имитируют рукописный текст, обычно в котором буквы соединены петлеобразно и плавно.
Многие люди ассоциируют этот тип шрифта с индивидуальностью, экспрессией и каллиграфией. Лучше всего использовать этот тип шрифта для заголовков, слоганов и заголовков сообщений в блогах на вашем веб-сайте, а не для основного текста. При использовании в качестве шрифта по умолчанию курсив может быть трудночитаемым.
Фэнтези
Семейство шрифтов Fantasy обычно имеет декоративные атрибуты, присутствующие на каждой букве. Популярные среди художественных произведений, шрифты из этого набора шрифтов могут помочь мгновенно передать свой жанр и погрузить аудиторию.
Например, эта категория шрифтов широко используется в фантастических и научно-фантастических фильмах, таких как «Звездные войны», «Гарри Поттер» и «Холодное сердце».
с засечками
Наиболее заметным стилевым атрибутом шрифтов с засечками является наличие небольших дополнительных штрихов по краям букв. Первоначально этот стиль использовался для печати чернилами, но теперь он ассоциируется с чувством формальности и элегантности.
Веб-сайты в основном используют шрифт с засечками для основного текста, так как он легко читается и помогает читателям быстро просмотреть написанное.
Популярные шрифты Serif включают Times New Roman , Cambria и Garamond .
Без засечек
В качестве аналога категории шрифтов с засечками шрифты без засечек не отображают дополнительные штрихи, прикрепленные к их буквам.
Большинство шрифтов из этого семейства имеют одинаковую ширину и выглядят как современными, так и минималистичными.
Шрифты без засечек
разборчивы в любом размере, что делает их отличным выбором как для печатного контента, так и для цифрового использования.
Моноширинный
Все буквы и символы в шрифтах Monospace имеют одинаковую ширину.
Поскольку шрифты одинаковы и легко различимы, они часто используются по умолчанию для пишущих машинок и компьютерных терминалов.
20 лучших веб-безопасных HTML-шрифтов
Ниже приведены 20 безопасных для Интернета вариантов шрифтов HTML, которые вы можете применить к своему контенту.
1. Ариал
Arial — универсальный современный шрифт без засечек. Каждая буква толстая и прочная, что обеспечивает чистый и минималистичный вид.
Arial был основным экранным шрифтом из-за его удобочитаемости при масштабировании до любого размера.Фактически, это шрифт по умолчанию для Google Docs.
Помимо этого, этот шрифт также популярен в печатных СМИ, таких как газеты и реклама.
В целом, если вы ищете классический шрифт, подходящий для большинства веб-сайтов, Arial — отличный выбор.
2. Ариал узкий
Arial Narrow — один из 38 стилей семейства шрифтов Arial. По сравнению с оригинальным шрифтом, этот стиль предлагает гораздо более гладкий дизайн.
Буквы кажутся узкими и сжатыми, с небольшим пространством между ними.Это делает Arial Narrow отличным выбором для минималистичных веб-сайтов.
Отличные варианты сочетания шрифтов включают более жирные шрифты без засечек, такие как Verdana и Geneva .
3. Раз
Times — это хорошо читаемый шрифт с засечками благодаря его заметному контрасту и сжатому стилю.
Люди, как правило, знакомы с этим шрифтом, поскольку его можно найти в различных средствах массовой информации, от книг и приложений для обмена сообщениями до коммерческих издательских проектов.
Первоначально Times в основном использовалась в печатных СМИ, таких как газеты, и с тех пор стала ассоциироваться с журналистикой и академическим письмом.
Таким образом, этот шрифт является идеальным выбором для создания знакомого и формального ощущения на вашем веб-сайте.
Кроме того, этот шрифт подходит для веб-сайтов с длинными блоками текста, таких как онлайн-редакции новостей и блоги.
4. Times New Roman
Times New Roman — это вариант шрифта Times из шрифта с засечками.
Это популярный текстовый шрифт, широко используемый в печатных СМИ, таких как журналы и книги, а также очень популярный шрифт HTML из-за его универсальности и разборчивости.
Благодаря своему профессиональному стилю шрифт Times New Roman стал излюбленным шрифтом для официального контента новостных изданий и образовательных веб-сайтов.
5. Гельветика
Helvetica — универсальный HTML-шрифт, поскольку его чистый дизайн подходит для любого типа дисплея.
— популярный шрифт без засечек, используемый многими известными брендами. Например, Jeep, Microsoft, Motorola и BMW используют этот шрифт для своих логотипов.
Кроме этого, U.Правительство Южной Кореи также использует Helvetica в своих налоговых формах.
Кроме того, этот тип шрифта предназначен для использования в небольших размерах, например, для текста, отображаемого в электронных книгах и мобильных устройствах.
6. Курьер
Courier — самый известный шрифт в классификации шрифтов с засечками — он предустановлен во всех операционных системах.
Этот HTML-шрифт также был стандартом для киносценариев. Поэтому, если ваш сайт связан с кино, обязательно подумайте о том, чтобы добавить Courier в дизайн вашего сайта.
Однако, поскольку этот шрифт относится к разряду декоративных, лучше ограничить его использование заголовками и заголовками.
7. Курьер Новый
Этот шрифт является более тонкой и разборчивой альтернативой Courier . По этой причине электронные устройства в основном имеют код Courier New .
Кроме того, этот шрифт также классифицируется как шрифт пишущей машинки и отлично смотрится на веб-сайтах со старым дизайном.
Courier New доступен в четырех стилях: обычный, курсив, полужирный и полужирный курсив.
8. Вердана
Verdana — отличный экранный шрифт благодаря его удобочитаемости при небольшом размере и при отображении на экранах с низким разрешением. В первую очередь это связано с его большой шириной и расстоянием между символами.
Однако этот шрифт не ограничивается экранной типографикой. Например, известный мебельный бренд IKEA использует Verdana как для своего веб-сайта, так и для своих печатных каталогов.
Если вы ищете HTML-шрифт с хорошей читабельностью, этот шрифт — отличный выбор.
9. Чандара
Candara впервые стал популярным в ОС Microsoft Vista для улучшения читаемости на ЖК-дисплеях.
Этот шрифт хорошо читается благодаря большому интервалу между символами, что делает его идеальным шрифтом для дисплеев.
Кроме того, Candara приобретает современный вид благодаря своим изгибам и открытым формам. Этот шрифт подходит для неформальных типографских настроек, таких как заголовки сообщений в блогах и слоганы на веб-сайтах.
10.Женева
Женева предлагает чистый и современный вид благодаря одинаковой длине, ширине и расположению.
Этот универсальный шрифт широко используется как для отображения, так и для основного текста. Смелые цвета и тонкие штрихи делают этот шрифт разборчивым в любом размере — он предлагает большие интервалы и постоянную длину для обеспечения удобочитаемости.
11. Калибри
Calibri — широко используемый и популярный шрифт. Это шрифт по умолчанию для различных известных программ, таких как пакет Microsoft Office и Google Docs.
Этот шрифт в первую очередь кажется современным и теплым благодаря своим округлым линиям и чистому стилю.
Кроме того, Calibri работает с текстом самых разных размеров. Он очень разборчив и подходит как для цифровых, так и для экранных дисплеев.
Благодаря чистому дизайну этот шрифт подходит для всех типов веб-сайтов.
12. Оптима
Optima черпает вдохновение в классических латинских заглавных буквах. Он используется для передачи элегантности благодаря большому интервалу и дополнительным штрихам.
В Optima у вас также есть возможность определить интервал между каждым символом.
Несмотря на то, что все варианты интервалов читабельны, более широкий интервал будет лучше дополнять этот шрифт.
Optima лучше всего подходит для использования на дисплеях, например, в логотипах таких элитных брендов, как Estée Lauder и Marks and Spencer.
13. Камбрия
Модель Cambria с очень равномерными интервалами и пропорциями была разработана для удобного чтения с экрана даже при отображении в небольших размерах.
Этот шрифт хорошо читается благодаря горизонтальным засечкам, которые хорошо подчеркивают окончания каждого штриха.
Кроме того, Cambria очень универсальна. Вы можете комбинировать его различные стили и использовать шрифт для заголовков, заголовков и основного текста.
Этот шрифт бывает обычным, полужирным, курсивным и полужирным курсивом.
14. Гарамонд
Garamond классифицируется как шрифт с засечками старого стиля.
Это классический тип шрифта, широко используемый как в печатных, так и в цифровых дисплеях, включая Dr.Ассортимент книг Сьюза, тома о Гарри Поттере и логотип Google.
Этот шрифт лучше всего подходит для добавления старинного, но неподвластного времени оттенка на ваш веб-сайт.
15.
Перпетуя
Perpetua формальный, классический и элегантный. Шрифт был создан английским скульптором, на которого повлияли памятники и мемориальные надписи.
Характеристики этого шрифта побудили Penguin Classics и Пенсильванский университет использовать Perpetua в своих публикациях.
В общем, образовательная или информационная страница может извлечь большую пользу из этого шрифта.
16. Монако
Monaco — это шрифт, который можно найти в приложениях Terminal и Xcode для macOS X.
Этот шрифт принадлежит к семейству моноширинных шрифтов и отличается подчеркнутым пиксельным дизайном.
Благодаря своему отличительному стилю Monaco лучше всего использовать в декоративном тексте веб-сайтов, посвященных программированию или играм.
17. Дидо
Didot — это неоклассический шрифт, сочетающий классический дизайн с современными элементами.
Уникальный дизайн шрифта можно найти на CBS News и The Late Show со Стивеном Колбертом.
Этот шрифт известен своей высокой контрастностью и повышенным ударением, что выделяет его среди других. Если вы ищете отображаемый шрифт для заголовка, слогана или заголовков вашего веб-сайта, рассмотрите Didot.
18. Сценарий кисти
Brush Script — современный рукописный шрифт, неформальный и непринужденный.
Отличается каллиграфическим стилем, основанным на почерке.Из-за этого Brush Script MT превращается в красивый, но читаемый шрифт для вашего сайта.
Этот шрифт отлично подходит для целевых страниц и всплывающих окон с информационными бюллетенями на веб-сайтах. Из-за характера его элементов обязательно используйте этот шрифт экономно и в большом размере.
19. Люсида Брайт
Lucida Bright классифицируется как шрифт с засечками. Это одна из версий шрифта Lucida с большей контрастностью.
Узкий шрифт позволяет эффективно использовать пространство и отлично подходит для деловых отчетов, документации или журналов.
Известным пользователем этого шрифта является журнал Scientific American.
20. Медная пластина
Медная пластина относится к монотонной группе и содержит только заглавные буквы. Его лучше всего использовать в качестве акцидентного шрифта для визитных карточек и фирменных бланков.
На странице веб-сайта этот шрифт может быть отличным вариантом для заголовков и заголовков.
Этот шрифт стал известен после того, как Who Wants To Be A Millionaire использовал этот шрифт в своей торговой марке.
Позорное упоминание: Comic Sans
Comic Sans был основан на буквах из журналов комиксов и должен был быть дружелюбным и непринужденным.
Однако многие считают этот шрифт непрофессиональным и детским. Существует даже сообщество, которое поддерживает запрет Comic Sans в качестве шрифта.
Причина, по которой этот шрифт неприятен для глаз, заключается в его плохом управлении визуальной согласованностью. Буквы не имеют единообразия в интервалах, ширине и высоте.
Почему вы должны использовать веб-шрифт HTML?
Использование веб-шрифта HTML имеет решающее значение для вашего веб-дизайна. Это гарантирует, что текст на вашем сайте будет одинаковым на всех устройствах.
Без веб-шрифта HTML вы рискуете потерять посетителей, поскольку ваши шрифты могут отображаться как нечитаемые символы при доступе с неподдерживаемых устройств.
Вот несколько причин, почему вы должны использовать шрифт HTML для своего веб-сайта:
Единый дизайн . Веб-шрифт HTML гарантирует, что выбранный вами шрифт правильно отображается в любом браузере и на любом устройстве.
Резервный шрифт . Если предпочитаемый вами шрифт неправильно загружается в браузере человека, веб-шрифты HTML будут заменены шрифтом по умолчанию, найденным на устройстве человека.
Нет загрузки . Вы можете легко встраивать HTML-шрифты от поставщика безопасных веб-шрифтов, такого как Google Fonts, в свой HTML-документ.
Как добавить HTML-шрифты в WordPress?
Есть несколько способов добавить HTML-шрифты в WordPress. В этом разделе мы рассмотрим два популярных метода:
Добавление HTML-шрифтов вручную
Добавление шрифтов вручную — отличный вариант, если вы хотите избежать плагинов или хотите добавить собственный шрифт на свой сайт WordPress.
Сначала выберите и загрузите пользовательский шрифт от поставщика веб-шрифтов, такого как Adobe Fonts, TypeNetwork или Fonts.
Сделав выбор, конвертируйте шрифт в веб-формат. Для этого вы можете использовать генератор веб-шрифтов.
После загрузки файла загрузите его в каталог wp-content/themes/your-theme/fonts .
Добавление шрифтов вручную с помощью HTML может быть проблемой, поскольку тег HTML является устаревшим тегом шрифта в HTML5.Вместо этого люди теперь используют свойства CSS для изменения свойств семейства шрифтов, цвета, шрифта и других атрибутов шрифта.
Популярный метод дальнейшего оформления шрифта — использование встроенного CSS. Он добавляет стили к одному элементу HTML с атрибутом стиля CSS.
Вот пример того, как встроенный CSS может выглядеть как элемент HTML:

Встроенный CSS в красном цвете

Добавление HTML-шрифтов с помощью подключаемых модулей
Существует множество плагинов для добавления HTML-шрифтов на ваш сайт WordPress. Однако мы сузили список до двух наиболее популярных вариантов.
Простые шрифты Google
Easy Google Fonts автоматически извлекает шрифты из каталога Google Fonts.Этот плагин также работает с любой темой WordPress.
Начните с установки и активации плагина. После этого перейдите к Appearance -> Customize на панели администратора WordPress.
Оттуда выберите Типографика -> Типографика по умолчанию , и вам будут представлены текстовые элементы, такие как заголовки и абзацы.
Выберите элемент, который вы хотите стилизовать. Перейдите на вкладку Font family и щелкните раскрывающееся меню, чтобы выбрать шрифт.
После того, как вы выбрали шрифт, вы можете продолжить настройку веса и стиля, размера шрифта и атрибута цвета, наблюдая за изменениями в реальном времени.
Когда вы будете удовлетворены результатом, нажмите Опубликовать .
Использовать любой шрифт (UAF)
С помощью этого плагина загрузите любой пользовательский шрифт, и UAF автоматически преобразует его в веб-безопасный шрифт.
После установки плагина в панели администратора WordPress появится вкладка Use Any Font .Нажмите на нее и активируйте свой ключ API.
После завершения проверки добавьте файлы шрифтов .ttf , .otf и .woff и нажмите «Загрузить», чтобы UAF преобразовал пользовательские шрифты в веб-безопасные шрифты.
Кроме того, UAF также совместим с Flatsome для настройки живого шрифта в темах Flatsome.
Заключение
Использование веб-шрифта HTML позволит вашему сайту выглядеть одинаково на разных устройствах. Кроме того, это поможет создать профессиональный, формальный или элегантный вид веб-сайта, в зависимости от используемого шрифта.
В этой статье мы предоставили 20 лучших веб-безопасных шрифтов, которые помогут вам принять решение. Давайте вспомним некоторые варианты:
.
Arial — классический шрифт, который можно использовать на всех типах сайтов.
Times New Roman — отличный вариант для новостных и образовательных сайтов.
Cambria — универсальный вариант с обычным, полужирным, курсивным и полужирным курсивом.
Monaco — если у вас есть веб-сайт о программировании или играх, это отличный шрифт для декоративных текстов.
Имейте в виду, что каждый шрифт уникален, поэтому убедитесь, что вы выбрали тот, который удобочитаем и представляет ваш бренд.
Ирфан является членом команды авторов цифрового контента в Hostinger. Он считает, что технологии и Интернет могут значительно улучшить нашу жизнь. Вот почему он делится своим опытом блоггера WordPress, чтобы обучать других. В свободное время Ирфан любит хорошие фильмы и книги.
10 разных типов шрифтов и как выбрать свой
Выбор шрифтов может показаться одной из самых простых задач проектирования.Однако текст на брошюре или визитной карточке может повлиять на успех всего дизайна.
Это потому, что шрифты могут влиять на ваше общее восприятие текста. Например, в ходе недавнего исследования беременным женщинам дали лист бумаги с описанием одних и тех же домашних упражнений, но другим шрифтом. Беременные женщины, у которых были инструкции, написанные трудным для чтения шрифтом, чувствовали, что выполнять действия было труднее.
Шрифты
также задействуют вашу семантическую память.Определенные шрифты укоренились в вашем сознании как связанные с чем-то. Когда вы видите этот шрифт, вы думаете об этом. Например, Helvetica — это шрифт, используемый в налоговых формах правительства США, а также в транспортной системе Нью-Йорка (то есть на всех знаках метро Нью-Йорка).
Вот почему крупные бренды часто создают собственный шрифт. Типичным примером является одноименный шрифт Диснея Waltograph. Netflix также недавно создал собственный шрифт, чтобы еще больше дифференцировать свой брендинг.
Традиционно выделяют четыре основные категории шрифтов:
С засечками: Небольшие украшения в конце каждой буквы.
Sans Serif: Слово «sans» означает «без» — таким образом, sans serif — это шрифт с засечками без украшений, что создает эффект чистоты.
Шрифт: Имитирует почерк или курсив.
Декоративный: Любой нетрадиционный шрифт с элементами дизайна или иллюстраций.
Если вы чувствуете себя немного потерянным, вы не одиноки. Мы заметили, что пользователям MyCreativeShop было трудно найти нужный шрифт, поэтому решили составить список шрифтов, который будет четко организован и прост в использовании.Мы используем групповые метки, чтобы разобраться в этих категориях и различных типах шрифтов, чтобы вам было еще проще создавать дизайн.
Если вы готовы изучить некоторые шрифты перед проектированием, ознакомьтесь со следующими примерами шрифтов и подумайте, как они могут работать в дизайне вашего бизнеса.
Также ознакомьтесь: 10 креативных примеров оформления плакатов
1. Кабина
Используйте Cabin для копирования абзацев на флаере или брошюре, потому что его легко читать большими блоками текста благодаря чистой отделке.
2. Перманентный маркер
Этот шрифт напоминает письмо маркером с толстым кончиком. Это привлекает внимание и хорошо работает для смелого заголовка или заголовка. Подумайте о блоге о моде или красоте. Соедините перманентный маркер с минималистичным шрифтом без засечек, например Rambla.
3. Железнодорожный
Это шрифт заголовка или заголовка. Его современный и четкий дизайн популярен среди графических дизайнеров. Raleway в качестве заголовка хорошо работает с Roboto в качестве основного шрифта.
4. Мерриуэзер
Merriweather — классический, модный и упрощенный шрифт с засечками, который особенно хорошо работает на экране. Если вы разрабатываете графику для социальных сетей или веб-сайта, рассмотрите возможность ее использования. В частности, формат с заглавными буквами выделяется, чтобы произвести впечатление.
5. Дробленый
Этот шрифт имеет уникальный дизайн (либо все верхние, либо все нижние, а не комбинацию обоих) и придает вашему дизайну современный и свежий вид.Хотя он хорошо читается как копия текста, его также можно использовать в качестве шрифта для логотипа, состоящего из одного слова, с графическими элементами вокруг него.
6. Кабачок
Несмотря на то, что этот курсивный шрифт выглядит написанным от руки, он выглядит чистым и лаконичным. Courgette предлагает легкость любому тексту, не будучи сложным для понимания курсивом или кистью. Используйте везде, где вам нужен шрифт со сбалансированным потоком, который выделяется — не рекомендуется для основного текста или длинного текста.
7. Очаровывать
Если вы ищете шрифт, вызывающий ностальгию, используйте этот. Fascinate — это декоративный шрифт, особенно в стиле ар-деко (похожий на Broadway в оригинальных текстовых программах Microsoft). Этот шрифт хорошо работает, если вы рекламируете воспоминание или событие исторического типа — например, вечеринку в стиле Великого Гэтсби.
8. Дезирел
Еще один кисть, нарисованный от руки шрифт, Desyrel выглядит несколько более уникальным, как будто его быстро набросал эксцентричный, творческий человек с причудливым почерком.Если вам нужен смелый призыв к действию или прокламация, Desyrel — лучший выбор. В качестве сопутствующего подтекстового шрифта Exo хорошо контрастирует.
9. Архив узкий
Этот шрифт без засечек универсален. Он хорошо читается на экране и в печати, поэтому его можно использовать для заголовков или основного текста. Как следует из названия, это узкий шрифт, поэтому, если у вас мало места (скажем, на визитной карточке), это хороший вариант — вы можете вместить больше текста, и он не будет выглядеть слишком тесным.