Что такое стиль шрифта

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Created 17 Jan 2001;
Last updated Ср 06 янв 2021 05:40:49

Источник

Стиль шрифта

оглавление

Стили шрифтов

Обычно различают гарнитуры шрифта, отмеченного следующими тремя наградами :

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

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

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

Примеры стилей шрифтов

Изменение толщины шрифта

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

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

Изменение толщины (ширины символа)

Толщина (ширина) письма влияет на отслеживание шрифта.

Вариация письменной позиции

Особые формы

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

Смешанные формы

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

Реальные и искусственно созданные стили шрифтов

Источник

Cамый краткий курс по классификации шрифтов

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

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

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

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

Скругление засечек в местах примыкания к основному штриху и наклонная ось овальных элементов, умеренная контрастность. Примеры: Arno Pro, Adobe Garamond, Bembo, Dante, Stempel Garamond, Granjon, Poliphilus, Sabon.

Разница между основными и соединительными линиями в переходной антикве более явная, чем в старом стиле, но менее четкая, чем в антикве нового стиля. Примеры: Times New Roman, Baskerville, Caslon, Georgia и Bookman.

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

— брусковая антиква-

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

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

Это, несомненно, шрифтовой север — минималистичный, четкий, функциональный и прямолинейный, как шкаф из Ikea, не терпящий никаких излишеств, как например засечки антиквы или росчерки рукописных шрифтов. Эти элементы, как атавизм, исчезли за ненадобностью. Гротескные шрифты — это новая история, конструктивизм и Баухаус, космос и компьютеры. Лента Фейсбука — гротескный Gotham. Компании Microsoft, Panasonic и даже NASA используют вездесущую Helvetica.

Переходное звено в шрифтовой эволюции от антиквы до гротеска, буквы с небольшим контрастом. Примеры: Franklin Gothic и Akzidenze Grotesk.

Самые нейтральные, одноширинные шрифты почти без контраста. Примеры: MS Sans Serif, Arial, Helvetica и Univers.

Имеют большую контрастность в толщине штрихов. И гуманистическими они названы не случайно, а потому что напоминают рукописные (пером). Примеры: Gill Sans, Frutiger, Tahoma, Verdana, Optima, и Lucide Grande.

Как ясно из названия, строятся на основе геометрических форм. Пример: Futura и Geometria.

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

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

— формальные рукописные-

чаще всего курсив, с большим количеством вензелей, эдакое шрифтовое барокко. Примеры: Kuenstler sсript.

— неформальные рукописные-

Не такие старомодные как формальные и в принципе, похожи на большинство почерков современного человека, не обладающего каллиграфическим навыком. Примеры: Mistral и Brush sсript.

Стиль: декоративный, народный, фантазийный. Применение: реклама, вывески, логотипы, заголовки.

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

Источник

Что такое типографика и какие шрифты использовать на сайте

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

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

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

Что такое типографика

Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.

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

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

Как подбирать шрифты на сайт

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

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

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

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

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

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

Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.

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

Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.

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

Что такое гарнитура

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

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

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

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

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

Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.

Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.

Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.

Нормальный текст: 18px

Заголовок 4: 18х1,6 = 27px.

Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:

Заголовок 3: 27х1,6 = 40px.

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

Сочетание шрифтов

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

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

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

Самый простой способ подобрать пару шрифтов — просмотреть несколько, сравнить и проанализировать, какие пары подойдут.

Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.

Где брать шрифты

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

Бесплатные

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

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

Платные

Ищут в специальных магазинах или на сайтах владельцев — студий и дизайнеров.

Больше о типографике и шрифтах

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

Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:

Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Источник

Вам также может понравиться

Не то золото, что блестит: Уроки, которые мы можем извлечь из этой поговорки

Приветствую, уважаемые дети! Сегодня я хочу рассказать

Всякому овощу своё время: Уроки, которые мы можем извлечь из этой поговорки

Приветствую вас, уважаемые дети! Сегодня я хочу рассказать

На воре и шапка горит: Что означает эта поговорка?

Приветствую вас, дорогие дети! Сегодня я хочу рассказать

На каждый роток не накинешь платок: Что означает эта поговорка?

Приветствую вас, дорогие дети! Сегодня я хочу рассказать