После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в 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
Съешь же ещё этих мягких французских булок да выпей чаю
Съешь же ещё этих мягких французских булок да выпей чаю
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), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.
В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
правило
serif
sans-serif
Стили
font-style: normal
Съешь же…
Съешь же…
font-style: italic
Съешь же…
Съешь же…
font-style: oblique
Съешь же…
Съешь же…
Насыщенность шрифта
font-weight: 100
Съешь же…
Съешь же…
font-weight: 200
Съешь же…
Съешь же…
font-weight: 300
Съешь же…
Съешь же…
font-weight: normal
Съешь же…
Съешь же…
font-weight: 500
Съешь же…
Съешь же…
font-weight: 600
Съешь же…
Съешь же…
font-weight: bold
Съешь же…
Съешь же…
font-weight: 800
Съешь же…
Съешь же…
font-weight: 900
Съешь же…
Съешь же…
Варианты
font-variant: normal
Съешь же…
Съешь же…
font-variant: small-caps
Съешь же…
Съешь же…
Растяжение
font-stretch: ultra-condensed
Съешь же…
Съешь же…
font-stretch: extra-condensed
Съешь же…
Съешь же…
font-stretch: condensed
Съешь же…
Съешь же…
font-stretch: semi-condensed
Съешь же…
Съешь же…
font-stretch: normal
Съешь же…
Съешь же…
font-stretch: semi-expanded
Съешь же…
Съешь же…
font-stretch: expanded
Съешь же…
Съешь же…
font-stretch: extra-expanded
Съешь же…
Съешь же…
font-stretch: ultra-expanded
Съешь же…
Съешь же…
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.
Навигация по сайту
Created 17 Jan 2001; Last updated Ср 06 янв 2021 05:40:49
Обычно различают гарнитуры шрифта, отмеченного следующими тремя наградами :
При необходимости эти характеристики шрифта можно комбинировать друг с другом. Например, могут быть светлые шрифты, также широкие и курсивные.
Основываясь на девяти классах веса шрифта, девяти классах ширины шрифта и двух слоях шрифта, существует огромное количество из 162 возможных различных стилей шрифта. Фактически, семейства шрифтов обычно доступны в значительно меньшем весе.
Но есть также стили шрифтов, которые отличаются другими функциями обозначений, чем упомянутые выше: Некоторые шрифты также доступны в виде контурных рисунков или закрашенных (см. # Особые формы ). Примитивные функции разметки, такие как подчеркивание или блокировка, не требуют собственного стиля шрифта. Сегодня, как и в первые дни наборщиков, компьютерные программы могут вносить такие изменения в любой шрифт.
Примеры стилей шрифтов
Изменение толщины шрифта
Производитель шрифта, конечно, может называть отдельные классы. Некоторые шрифты должны выглядеть более тонкими или жирными, чем другие, поэтому разделение шрифтов на классы веса всегда дело вкуса.
В таблице ниже показаны некоторые распространенные классы веса шрифтов с их немецкими и английскими названиями. Практически ни одна семья не включает все упомянутые стили. Часто обозначения смешиваются, одинаковые веса шрифта называются по-разному или одно и то же обозначение используется для очень разного веса.
Изменение толщины (ширины символа)
Толщина (ширина) письма влияет на отслеживание шрифта.
описание
Немецкий
английский
Ультра тонкий
Сверхконденсированный
Очень тонкий
Сверхконденсированный
Узкий
Сжатый, Сжатый, Узкий
Полуузкий
Полуконденсированный
обычный
Обычный
Половина ширины
Полурасширенный
Широкий
Расширенный, Расширенный
Сверхширокоугольная
Extra Expanded
Ультра широкий
Ультрарасширенный
Вариация письменной позиции
описание
Немецкий
английский
Нормальный, Обычный (Вертикальный, Прямой )
Обычный, Римский, Вертикальный
Курсив («настоящий курсив»)
Курсив
Наклонный («ложный курсив»)
Косой
Наискось
Наклонный, наклонный римский
Особые формы
Для специальных наборов символов (заглавные буквы, формы фигур, лигатуры и другие) см. Выше.
Смешанные формы
В принципе, все мыслимые формы шрифтов можно комбинировать друг с другом, что приводит к очень большому количеству теоретически возможных стилей шрифтов. Одним из примеров является двойная разметка шрифта с полужирным курсивом.
На первый взгляд кажется, что за всю историю письменности придумано так много шрифтов, что разобраться в них просто невозможно. На самом деле все гораздо проще и все эти бесконечные вариации окружностей и палочек легко умещаются в стройную и простую систему.
Все шрифты делятся на четыре большие группы, как времена года или стороны света: 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), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.
Узкое (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. Рисует макеты и верстает страницы для клиентов.