Что такое стиль шрифта
Каскадные таблицы стилей CSS советы & приёмы
Смотрите также указатель всех приёмов работы.
Семейства шрифтов
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.
Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
‘sans-serif’: обычные шрифты без засечек | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Arial, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Helvetica, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Verdana, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Trebuchet MS, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Gill Sans, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Noto Sans, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Arial Narrow, sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
sans-serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘serif’: обычные шрифты с засечками | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Times, Times New Roman, serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Georgia, serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Palatino, URW Palladio L, serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bookman, URW Bookman L, serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
New Century Schoolbook, TeX Gyre Schola, serif | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
serif | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘monospace’: шрифты фиксированной ширины | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Andale Mono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Courier New, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Courier, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
FreeMono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
DejaVu Sans Mono, monospace | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
monospace | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘cursive’: шрифты, имитирующие почерк | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comic Sans MS, Comic Sans, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Bradley Hand, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Brush Script MT, Brush Script Std, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Snell Roundhand, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
URW Chancery L, cursive | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
cursive | Съешь же ещё этих мягких французских булок да выпей чаю | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
‘fantasy’: декоративные шрифты, для названий и т.д.. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Impact, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Luminari, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Marker Felt, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Trattatello, fantasy | Съешь же ещё этих мягких французских булок да выпей чаю | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
fantasy | Съешь же ещё этих мягких французских булок да выпей чаюСтили шрифтовБольшинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии. В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений. Навигация по сайтуCreated 17 Jan 2001; Стиль шрифтаоглавлениеСтили шрифтовОбычно различают гарнитуры шрифта, отмеченного следующими тремя наградами : При необходимости эти характеристики шрифта можно комбинировать друг с другом. Например, могут быть светлые шрифты, также широкие и курсивные. Основываясь на девяти классах веса шрифта, девяти классах ширины шрифта и двух слоях шрифта, существует огромное количество из 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. Рисует макеты и верстает страницы для клиентов.
|