Стили шрифта: Виды шрифтов, которые должен знать каждый дизайнер

Виды шрифтов, которые должен знать каждый дизайнер

Виды шрифтов, которые должен знать каждый дизайнер | Canva

Your browser is not supported and may not give the best experience.

ВойтиЗарегистрироваться

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

Словарик 

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

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

Шрифт – это какое-то одно начертание в рамках гарнитуры, а ещё файл со специальным разрешением, который скачивается на компьютер и устанавливается в систему. Например, Arial Italic и Garamond Bold – это шрифты.

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

Сделано в Canva

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

Виды шрифтов – это большие группы гарнитур, которые объединили по общему признаку, например, шрифты для заголовков или декоративные шрифты.

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

Итак, какие бывают виды шрифтов.

Виды шрифтов с засечками 

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

Засечки у шрифтов бывают разной формы: острыми плавными и скругленными, сильно или едва заметными. Источник: thegreatmoustache.com

Иногда такие шрифты еще называют антиквами – это историческое название, которое объясняет их происхождение: до 19 века все шрифты в мире были с засечками, а anticuus в переводе с латинского означает «древний».

1. Антиква старого стиля

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

Главная особенность антиквы старого стиля – это наклонные овалы у букв и несимметричные засечки. Пример такого шрифта – Abobe Garamond Pro. Текст, набранный им, сразу же обретает изысканный стиль и красивое книжное настроение.

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

Источник: Melanie Top

В Canva бесплатно доступно несколько сотен шрифтов на русском и английском языках. Лучшие варианты в стиле старой антиквы на русском и английском –  Crimson Roman, гарнитура Cormorant Garamond, Oranienbaum, PT Serif.

2. Переходная антиква

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

Переходных антикв не так много, но знают их все: это знаменитые шрифты Times New Roman, Baskerville и Georgia. Этими шрифтами набирают книги и документы, используют их в официальных письмах и других серьезных случаях. Они не устаревают, очень аккуратно смотрятся и их удобно читать.

Источник: devianart

3. Антиква нового стиля

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

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

Самые знаменитые антиквы нового стиля – это шрифты Bodoni, Didot, Walbaum. Их можно использовать для тех же целей, что и переходные: при печати книг, документов, писем и официальных заявлений.

Титульный лист книги Вольтера 1819 года

Хорошие бесплатные примеры антиквы нового стиля в Canva на русском – шрифт Ledger и гарнитура Noto Serif Display. На английском –  шрифт Antic Didone.

В платной версии Canva Pro можно воспользоваться расширенным списком шрифтов, и попробовать антиквы Abril, Afrah и Afrah Light,Argent Thin на английском языке, и шрифт Quincy на русском.

4. Брусковая антиква

Это последний подвид антиквы, который появился в Англии в 19 веке как шрифт для рекламных плакатов, постеров и других крупных носителей. Главная особенность таких шрифтов – мощные прямоугольные засечки у букв и низкий контраст.

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

Источник: Дмитрий Хорошкин

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

Источник: Kevin Gorisnic

Красивые бесплатные примеры брусковой антиквы можно найти и в Canva. Это Alfa Slab One, Faustina Semi Bold, Eszar Extra Bold, Chunk Five и Bio Rmyme Ex для английского языка. На русском можно использовать Foglihten Black PC, Podkova Extra Bold, Rubik Mono и Boldesco Serif.

Виды шрифтов без засечек 

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

5. Старые гротески

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

Самые знаменитые старые гротески – Franklin Gothic и Akzidenz Grotesk.

Источник: Lica Eugen

Красивые бесплатные гротески в Canva – Intro, гарнитура Exo 2 Black, DejaVu Sans Bold, Articulat Bold на русском и Gothic A1 Black, HK Gothic Bold, Heebo Black и гарнитура Libre Franklin на английском. 

6. Новые гротески

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

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

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

Источник: Inspirationfeed

Лучшие бесплатные шрифты в стиле новых гротесков в Canva – Cairo Regular, Carmela, Gidole, Glacial Indifference на английском, и Ubuntu, Sensation Light, гарнитуры Roboto и Open Sans на русском.

7. Гуманистические гротески

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

Впервые эти шрифты появились в Англии в 20 веке, и первым гуманистическим гротеском стал шрифт Gil Sans, который тогда использовался в фирменном стиле Лондонской железной дороги. Позднее этот шрифт лег в основу логотипов BBC, BENQ и KitKat, стал шрифтом шведской марки косметики Oriflame.

Самые знаменитые гуманистические гротески – Gill Sans, Frutiger, Tahoma, Verdana, Optima, и Lucide Grande.

Источник: Сlement Thorez

В Canva есть бесплатные предустановленные гуманистические гротески. Это HK Grotesk Medium, Inter, Open Sans, Open Sans Light и PT Sans на русском, и Albattar, Arialle, Barlow Thin, Ben Sen Handwriting на английском.

8. Геометрические гротески

Геометрические гротески строятся на простейших типах форм – круге, квадрате и треугольнике. Они появились в Германии в 30-е годы 20 века под влиянием архитектурной школы Баухауза. Суть этих шрифтов в простоте и ясных, чистых формах.

Из-за строгой геометричности этих шрифтов их чаще всего используют для заголовков, вывесок, плакатов и других крупных надписей и редко используют для текста. Самые известные геометрические гротески – Futura, Avant Garde и Gotham. Шрифт Futura используется в логотипах компаний Volkswagen, Dolce&Gabbana, Louis Vuitton.

Источник: Soo Yeun Ji

Лучшие бесплатные геометрические гротески на русском в Canva – гарнитуры Articulat, Catrograph и Geometrica, шрифты Bicubik, Tex Gyre Adventor и Evolve Sans Light. Для английского языка можно воспользоваться шрифтами Metro, Michroma и гарнитурой Montserrat.

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

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

9.  Акцидентные шрифты

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

10. Рукописные виды шрифтов

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

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

В Canva бесплатно доступны десятки таких шрифтов на русском и английском языках. Вот некоторые интересные на английском: AC Cyberella, AC Fifindrel, AC Quickpad, Allura. На русском красиво смотрятся Heinrich Script, Bad Script, Caveat, Euro Script и Marck Script.

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

Попробуйте такие бесплатные декоративные шрифты в Canva: Brusher, Princess Sofia на английском, и Bryndan Write, Brusher Cyrillic, ABYS на русском.

11. Готические и декоративные виды шрифтов

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

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

В Canva такие шрифты бесплатно доступны на русском и английском языках. Самые красивые на русском: Brozas, Galactica, Abibas, Avdira, Ruslan Display. На английском – Amstrong, Rakkas, Rye, Pirata One. 

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

12. Небуквенные виды шрифтов

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

Например, в этом шаблоне сочетается декоративный шрифт и эмодзи:

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

Что дальше

1. Попробуйте создать собственный дизайн в Canva, это очень просто и займет всего пару минут. 

Автор

Любовь Верещинская

Рекомендации для вас

Реализуйте свои идеи за минуты.

Выразите себя с помощью самой простой в мире программы дизайна.

Навигация по нижнему колонтитулу

---

©2021. All Rights Reserved. Canva®

CSS: шрифты

CSS: шрифты

Смотрите также указатель всех приёмов работы.

На этой странице:

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

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

Поскольку не все шрифты доступны на всех компьютерах (существуют
тысячи шрифтов и большинство из них не бесплатны), CSS
предусматривает резервную систему. Первым вы указываете шрифт,
который хотели бы использовать. Затем следуют любые шрифты, которые
вы могли бы использовать, если первый указанный шрифт не доступен.
А закончить список вы должны типовым шрифтом, который
имеет 5 видов: serif, sans-serif, monospace,
cursive и fantasy.

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

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

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

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

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

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

Шрифты и стили для начинающих

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

Знакомство с различными стилями надписей

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

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

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

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

Стиль без засечек
Все буквы без «хвостиков» относятся к стилю без засечек. Эти буквы имеют современный и четкий вид. К этой категории относятся такие стили, как монолайн (где все линии имеют одинаковую толщину) и блочные буквы (где буквы никогда не соединяются и не соприкасаются).

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

Как сделать потрясающую надпись с помощью цифровых инструментов

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

font-style | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Синтаксис

font-style: normal | italic | oblique | inherit

Значения

normal

Обычное начертание текста.

italic

Курсивное начертание.

oblique

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

inherit

Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-style</title>
  <style>
   h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */
   } 
   p {
    font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */
    font-style: italic; /* Курсивное начертание */
   }
  </style>
 </head>
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-style

Объектная модель

[window.]document.getElementById(«elementID»).style.fontStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Браузеры текст со
значением oblique всегда отображают как курсив (italic).

Руководство по распознаванию стилей шрифтов

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

Это руководство является выдержкой из главы 3 из книги «Лучшая веб-типография для лучшей сети», автор Matej Latin. Книга состоит из 13 глав, в которых читатель разрабатывает и создает пример веб-сайта.

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

Ну, вы можете так и поступить. На самом деле я так делал долгое время, особенно в начале моей карьеры. Но у меня была огромная проблема. Я никогда не был уверен в своих решениях при выборе шрифта, и что разработанная мной комбинация шрифтов хорошо взаимодействует между собой. Конечно, вы можете копировать другие или использовать самые популярные шрифты, основываясь на таких классификациях, как Top 10 самых популярных гарнитур Typewolf в 2019 году. Но не приводит ли это к чрезмерному использованию шрифтов? Посмотрите, что случилось с Helvetica, Gotham и Futura. Это те шрифты, которые используются так часто, что вы можете увидеть их буквально везде. Когда так происходит, они теряют свою уникальность. Использование очень популярного шрифта – это достоверный выбор, но при этом вы утратите свою оригинальность. Что касается качества, хотите ли вы, чтобы ваша типографика выделялась или гармонировала?

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

Антиква. Шрифты с засечками (Serif)

Антиква старого стиля (Old Style)

Первые шрифты old-style появились в 15 веке, и это было самое фундаментальное изменение стиля, потому что они отошли от стиля blackletter, который был впервые представлен Йоханнесом Гутенбергом. Улучшенные инструменты и в основном улучшенные функции штамповки букв позволили создать более лаконичный стиль.

Основные характеристики old-style гарнитур

Контраст штрихов низкий (1), а соединительные штрихи (hairlines) массивнее, чем в высококонтрастных шрифтах. Верхние засечки расположены под углом (2), нижние засечки плавно изогнуты в форме скобки (3), ось изогнутых элементов смещена влево (4), а высота x относительно мала. Эти стили до сих пор очень распространены в книгах, так как они являются традиционными и вызывают у читателей чувство теплой ностальгии. Garamond, Caslon и Bembo являются типичными примерами этого стиля.

Garamond (или в данном примере Adobe Garamond) является типичным и одним из самых узнаваемых примеров old-style гарнитур

Переходная антиква (Transitional)

Это стиль, который отошел от имитирования рукописных форм букв (Humanist и Old style). Он появился во Франции в 18 веке, в основном он был определен англичанином Джоном Баскервилем, но впервые стал популярным в современное время в Соединенных Штатах. В посте «Я люблю типографику» описывается шрифт Romain du Roi (King’s Roman, самый первый шрифт этого стиля), например:

Romain du Roi отличается значительным отходом от прежних Old Style типов и был гораздо менее подвержен влиянию рукописных букв. Помните, что это эпоха Просвещения, характерная сопротивлениями традициям, будь то искусство, литература, философия, религия, да что угодно; поэтому неудивительно, что эта же эпоха породила кардинально отличительные типы шрифтов.

Основные характеристики transitional гарнитур

Контраст в штрихах заметно выше (1), верхние засечки скошены (2), нижние засечки по-прежнему плавно изогнуты в форме скобки (3), а штрихи имеют вертикальный наклон (4) – вот где отступление от рукописных букв наиболее очевидно. Baskerville – безусловно, самый яркий пример transitional гарнитур.

Baskerville является прекрасным примером transitional стиля гарнитур

 Классицистическая и антиква нового стиля (Neoclassical & Didone)

Этот стиль впервые появился во Франции (снова) в 18 веке. Первый шрифт этого стиля был разработан Firmin Didot, отсюда и название. После этого за работу взялся Giambattista Bodoni и произвел шрифты, которые определяли этот стиль.

Основные характеристики didone гарнитур

Контраст между толстыми и тонкими штрихами является резким и драматичным (1), стержни штрихов имеют «шариковую» форму (2), ось изогнутых штрихов – вертикальная (3), а нижние засечки почти не изогнуты(4). Bodoni, ранее упомянутый Giambattista Bodoni, является самым известным шрифтом этого стиля.

Бодони – самый яркий пример стиля didone

Брусковые шрифты (Slab)

Этот стиль появился в Британии во времена промышленной революции в начале 19 века. Это первый стиль, цели которого совершенно отличны от его предшественников (Old style, transitional, Didone). Они были предназначены для длинных текстов. Slab был первым стилем, который был предназначен для рекламы, поэтому он должен был выделяться. Гарнитуры этого стиля обычно хорошо выглядят в больших размерах, и как правило, их не следует уменьшать и использовать для основного текста.

Основные характеристики slab гарнитуры

Изменения ширины штриха почти незаметны (1), ось изогнутых элементов – вертикальная (2), а нижние засечки очень тяжелые, без изогнутых линий (3). Roboto Slab – это отличный пример современной интерпретации Slab стиля и шрифта, который также можно использовать в меньших размерах для основного текста (в отличие от большинства оригинальных шрифтов Slab).

Roboto Slab является отличным примером современного шрифта Slab.

Кларендон (Clarendon)

Стиль Clarendon возник в середине 19-го века, чтобы использовать стиль Slab serif в меньших размерах. Сравнивая Clarendon со стилем Slab, сходство их конструкции заметно, но их разделяют мелкие детали. Clarendon явно «мягче» и более приятен для глаз.

Основные характеристики гарнитур Clarendon

Контраст в штрихах заметен (1), ось вертикальна (2), а нижние засечки короткие или средней длины, изгибы тоньше (3). Clarendon – безусловно самый значимый и известный шрифт этого стиля (даже назван в честь стиля).

Clarendon – главный представитель этого стиля

Гротески. Шрифты без засечек (Sans-serif)

Гротеск

Шрифты Grotesque были не первыми в стиле sans-serif, но были первыми, ставшими коммерчески популярными. Впервые были разработаны в конце 18-го века, но использовались только в 19-м веке. Их изначально назвали grotesque, потому что они смотрелись уродливо по сравнению с более ранними современными стилями (Transitional, Didone и т. д.).

Основные характеристики гарнитур grotesque

В штрихах (1) наблюдается заметный контраст, обычно используется прописная буква «g» (2), осевые элементы имеют вертикальный наклон (3). Franklin Gothic и Akzidenz Grotesk – типичные гротескные стили.

Franklin Gothic – хороший пример стиля grotesque.

Новые гротески (Neo grotesque)

Стиль neo-grotesque – более утонченная и элегантная версия стиля Grotesque. Появился в середине 20-го века, вдохновленный оригинальным гротескным стилем (прежде всего, шрифтом Akzidenz Grotesk), целью дизайнеров было создание нейтральных и рациональных шрифтов.

Основные характеристики шрифтов neo grotesque

Контраст в штрихах не сильно выражен (1), обычно используется прописная буква «g» (2), а осевые элементы имеют вертикальный наклон (3). Helvetica – безусловно самый культовый и неогротический шрифт.

Helvetica – безусловно самый известный шрифт нео гротеска

Геометрические гротески (Geometric)

Стиль Geometric sans-serif появился в Германии в 1920-х годах. Под влиянием движения Bauhaus эти шрифты были основаны на геометрических формах – треугольнике, квадрате и круге. Например, буква «О» часто представляет собой идеальный круг в стиле Geometric sans-serif.

Основные характеристики гарнитур geometric

Контраст в штрихах минимален (1), буква «о» – почти идеальный круг (2), эти рисунки также известны введением “single-story” дизайнов букв, отличным примером является строчная «а» (3).

Futura – самый известный шрифт geometric.

Гуманистические гротески (Humanist)

Это стиль без засечек, вдохновленный традиционными формами букв, в основном стилями шрифтов с засечками. Самые ранние humanist шрифты были разработаны в начале 20-го века, Johnston в 1916 году и Gill Sans в 1928 году. Эдвард Джонстон (разработчик гарнитуры Johnston) был каллиграфом и черпал вдохновение в классических формах букв, включая римские заглавные буквы.

Основные характеристики humanist шрифтов

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

Gill Sans – хороший пример гарнитуры humanist

Новые гуманистические гротески (Neo humanist)

Шрифт Frutiger (от Адриана Фрутигера) положил начало новому, современному стилю humanist. Основной целью этого стиля была разборчивость. Стиль получил большую поддержку и популярность в 1970-х и 1980-х годах в ответ на спрос на легко читаемые шрифты на первых (с низким разрешением) компьютерных экранах.

Основные характеристики neo humanist гарнитур

Контраст выше, особенно по сравнению с другими стилями sans serif (1), а высота х больше (2). Dax Pro – хороший пример гарнитур neo humanist.

Dax pro – отличный пример neo humanist гарнитуры

Как вам статья? Стали ли различия стилей гарнитур более явными и понятными?

Fonts CSS HTML шрифты, цвет и размер текста

Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.

Разница между засечками и шрифтами без засечек

Семейства шрифтов CSS

В CSS существует два типа имен семейств шрифтов:

• родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
• семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)

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

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

Семейство шрифтов текста задается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы.
Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.

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

Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».

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

Пример

p {
    font-family: «Times New Roman», Times, serif;
}

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

Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

• normal — Текст отображается нормально
• italic — Текст показан курсивом
• oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)

Пример

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Размер шрифта

Свойство font-size задает размер текста.

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

Всегда используйте правильные HTML-теги, например < h2 >-< H6 > для заголовков и < p > для абзацев.

Значение размера шрифта может быть абсолютным или относительным размером.

Абсолютный размер:

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

Относительный размер:

• Устанавливает размер относительно окружающих элементов
• Позволяет пользователю изменять размер текста в обозревателях

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).

Задать размер шрифта с пикселями

Установка размера текста с пикселями дает полный контроль над размером текста:

Пример

h2 {
    font-size: 40px;
}

h3 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.

Установить размер шрифта с em

Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.

Единица измерения размера em рекомендуется консорциумом W3C.

1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/16 =EM

Пример

h2 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h3 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

В приведенном выше примере размер текста в EM совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.

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

Используйте комбинацию процентов и EM

Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента <BODY>:

Пример

body {
    font-size: 100%;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

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

Вес шрифта

Свойство font-weight задает вес шрифта:

Пример

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

Отзывчивый размер шрифта

Размер текста может быть установлен с помощью vw единицы, что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

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

Пример

<h2>Hello World</h2>

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Шрифт вариант

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

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

Пример

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

Другие примеры

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

Все свойства шрифта CSS

CSS-шрифты

Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.

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

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

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

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

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

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

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

Свойство наследуется.

Синтаксис

font-family: "Times New Roman", Georgia, Serif;
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: inherit;
font-family: initial;

2. Насыщенность шрифта: свойство font-weight

Свойство font-weight задаёт насыщенность шрифта.

Свойство наследуется.

Синтаксис

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: inherit;
font-weight: initial;

Рис. 1. Свойство font-weight

3. Ширина шрифта: свойство font-stretch

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

Свойство наследуется.

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

Синтаксис

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;
font-stretch: inherit;
font-stretch: initial;

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

Рис. 2. Свойство font-stretch

4. Начертание шрифта: свойство font-style

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

Свойство наследуется.

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: inherit;
font-style: initial;

Рис. 3. Свойство font-style

5. Размер шрифта: свойство font-size

Свойство font-size указывает желаемую высоту глифов из шрифта.

Свойство наследуется.

Синтаксис

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 14px;
font-size: 0.8em;
font-size: 80%;
font-size: inherit;
font-size: initial;

6. Относительный размер шрифта: свойство font-size-adjust

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

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

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Свойство наследуется.

Рис. 4. Термины в типографике

Синтаксис:

font-size-adjust: none;
font-size-adjust: 0.7;
font-size-adjust: inherit;
font-size-adjust: initial;

Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же значение размера шрифта используется для ячеек в каждой строке, и для отображения различий по x-height включены красные линии. В верхней половине каждая строка отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой половине также устанавливается свойство font-size-adjust, чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что небольшой текст остается относительно разборчивым в каждой строке в нижней половине.

Рис. 5. Текст с использованием и без использования font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

Свойство font за исключением описанного ниже, является сокращенным свойством для установки font-style, font-variant, font-weight, font-stretch, font-size/line-height, font-family. Также могут быть включены значения для свойства font-variant, которые поддерживаются CSS 2.1 — normal или small-caps.

Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust, font-kerning, все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis. Затем этим свойствам присваиваются те значения, которые указаны в свойстве font. Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.

Свойство наследуется.

Синтаксис

font: 12pt/14pt sans-serif;
font: 80% sans-serif;
font: x-large/110% "new century schoolbook", serif;
font: bold italic large Palatino, serif;
font: normal small-caps 120%/120% fantasy;
font: condensed oblique 12pt "Helvetica Neue", serif;

Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.

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

font: menu;        /* используются настройки шрифта для системных меню */
font: large menu;  /* используется семейство шрифтов под названием "menu" */

8. Управление синтезом шрифтов: свойство font-synthesis

Свойство font-synthesis определяет, разрешено ли пользовательским агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если weight не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если style не указан, пользовательские агенты не должны синтезировать курсив.

Свойство наследуется.

Синтаксис

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;
font-synthesis: initial;
font-synthesis: inherit;

По материалам CSS Fonts Module Level 3

Основные стили текста и шрифтов — Изучение веб-разработки

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

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

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

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

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

Примечание : Имейте в виду, что текст внутри элемента затрагивается как единое целое. Вы не можете выделять и стилизовать части текста, если вы не заключите их в соответствующий элемент (например, или ) или не используете псевдоэлемент для конкретного текста, например :: first-letter (выбирает первую букву текста элемента), :: first-line (выбирает первую строку текста элемента) или :: selection (выбирает текст, выделенный курсором в данный момент.)

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

  
 Кот Томми 

 Хорошо, я помню это, как если бы это было едой назад ... 

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

Готовый пример можно найти на GitHub (см. Также исходный код).

Цвет

Свойство color устанавливает цвет содержимого переднего плана выбранных элементов (обычно это текст, но может также включать пара других вещей, таких как подчеркивание или наложение, помещенное в текст с помощью свойства text-decoration ).

цвет может принимать любую цветовую единицу CSS, например:

Это приведет к тому, что абзацы станут красными, а не стандартным черным цветом по умолчанию в браузере, например:

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

Чтобы установить другой шрифт для текста, используйте свойство font-family — это позволяет указать шрифт (или список шрифтов), который браузер будет применять к выбранным элементам. Браузер применит шрифт только в том случае, если он доступен на компьютере, с которого осуществляется доступ к веб-сайту; в противном случае будет использоваться шрифт браузера по умолчанию.Простой пример выглядит так:

  p {
  семейство шрифтов: arial;
}  

Это заставит все абзацы на странице использовать шрифт arial, который можно найти на любом компьютере.

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

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

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

Список реальных веб-безопасных шрифтов будет меняться по мере развития операционных систем, но разумно считать следующие веб-шрифты безопасными, по крайней мере, на данный момент (многие из них были популяризированы благодаря Microsoft Core fonts for the Web инициативы в конец 90-х — начало 2000-х):

Примечание : Среди различных ресурсов веб-сайт cssfontstack.com поддерживает список веб-безопасных шрифтов, доступных в операционных системах Windows и macOS, которые могут помочь вам принять решение о том, что вы считаете безопасным для своего использования.

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

Шрифты по умолчанию

CSS определяет пять общих имен для шрифтов: serif , sans-serif , monospace , cursive и fantasy .Они очень общие, и точное начертание шрифта, используемое при использовании этих общих имен, зависит от каждого браузера и может различаться для каждой операционной системы, в которой они работают. Он представляет собой наихудший сценарий , когда браузер будет делать все возможное, чтобы предоставить хотя бы шрифт, который выглядит подходящим. serif , sans-serif и monospace вполне предсказуемы и должны дать что-то разумное. С другой стороны, cursive и fantasy менее предсказуемы, и мы рекомендуем использовать их очень осторожно, тестируя на ходу.

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

Стеки шрифтов

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

  p {
  семейство шрифтов: "Trebuchet MS", Verdana, без засечек;
}  

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

Хорошая идея — предоставить подходящее общее имя шрифта в конце стека, чтобы, если ни один из перечисленных шрифтов не доступен, браузер мог по крайней мере предоставить что-то приблизительно подходящее.Чтобы подчеркнуть этот момент, абзацам присваивается шрифт с засечками по умолчанию браузера, если другой вариант недоступен — обычно это Times New Roman — это не подходит для шрифта без засечек!

Примечание : Названия шрифтов, состоящие из нескольких слов, например Trebuchet MS , необходимо заключать в кавычки, например «Trebuchet MS» .

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

Давайте добавим к нашему предыдущему примеру, придав абзацам шрифт без засечек:

  p {
  красный цвет;
  семейство шрифтов: Helvetica, Arial, sans-serif;
}  

Это дает нам следующий результат:

Размер шрифта

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

• пикселей (пикселей): количество пикселей в высоту, на которое должен быть текст. Это абсолютная единица — она ​​дает одно и то же окончательное вычисленное значение для шрифта на странице практически в любой ситуации.
• em s: 1 em равен размеру шрифта, установленному в родительском элементе текущего элемента, который мы стилизуем (точнее, ширине заглавной буквы M, содержащейся внутри родительского элемента.Это может быть сложно решить, если у вас много вложенных элементов с разными размерами шрифта, но это выполнимо, как вы увидите ниже. Зачем беспокоиться? Это вполне естественно, когда вы к этому привыкнете, и вы можете использовать em для изменения размера всего, а не только текста. У вас может быть весь веб-сайт размером em , что упрощает обслуживание.
• rem s: они работают так же, как em , за исключением того, что 1 rem равен размеру шрифта, установленному в корневом элементе документа (т.е.е. ), а не родительский элемент. Это значительно упрощает математические вычисления для определения размера шрифта, хотя, если вы хотите поддерживать действительно старые браузеры, у вас могут возникнуть проблемы — rem не поддерживается в Internet Explorer 8 и ниже.

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

имеет размер 2 em , установленный по умолчанию, поэтому он будет иметь окончательный размер 32 пикселей .

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

 
<статья>
  
 Мой абзац 

  html {
  размер шрифта: 10 пикселей;
}

h2 {
  размер шрифта: 5rem;
}

п {
  размер шрифта: 1,5 бэр;
  красный цвет;
  семейство шрифтов: Helvetica, Arial, sans-serif;
}  

  html {
  размер шрифта: 10 пикселей;
}

h2 {
  размер шрифта: 5rem;
  текст-преобразование: заглавные буквы;
}

h2 + p {
  font-weight: жирный;
}

п {
  размер шрифта: 1,5 бэр;
  красный цвет;
  семейство шрифтов: Helvetica, Arial, sans-serif;
}  

  тень текста: 4px 4px 5px красный;  

  text-shadow: 1px 1px 1px красный,
             2px 2px 1px красный;  

  р :: первая линия {
  межбуквенный интервал: 4 пикселя;
  межсловный интервал: 4 пикселя;
}  

  шрифт: курсив нормальный полужирный нормальный 3em / 1.5 Helvetica, Arial, без засечек;  

 
семейство шрифтов: "Gill Sans Extrabold", без засечек;
семейство шрифтов: "Goudy Bookletter 1911", без засечек;


семейство шрифтов: с засечками;
семейство шрифтов: без засечек;
семейство шрифтов: моноширинный;
семейство шрифтов: курсив;
семейство шрифтов: фантазия;
семейство шрифтов: system-ui;
семейство шрифтов: ui-serif;
семейство шрифтов: ui-sans-serif;
семейство шрифтов: ui-monospace;
семейство шрифтов: ui-rounded;
семейство шрифтов: смайлики;
семейство шрифтов: математика;
семейство шрифтов: fangsong;


семейство шрифтов: наследовать;
семейство шрифтов: начальный;
семейство шрифтов: вернуться;
семейство шрифтов: отключено;
  

  семейство шрифтов: "Gill Sans Extrabold", без засечек;  

  семейство шрифтов: "Goudy Bookletter 1911", без засечек;  

  семейство шрифтов: Goudy Bookletter 1911, без засечек;
семейство шрифтов: красный / черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: Кхм !, без засечек;
семейство шрифтов: test @ foo, sans-serif;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Гавайи 5-0, без засечек;  

  семейство шрифтов: Gill Sans Extrabold, без засечек;
  

 .serif {
  семейство шрифтов: Times, Times New Roman, Georgia, serif;
}

.без засечек {
  семейство шрифтов: Verdana, Arial, Helvetica, без засечек;
}

.monospace {
  семейство шрифтов: "Lucida Console", Courier, моноширинный;
}

.cursive {
  семейство шрифтов: курсив;
}

.фантазия {
  семейство шрифтов: фантазия;
}

.emoji {
  семейство шрифтов: смайлики;
}

.math {
  семейство шрифтов: математика;
}

.fangsong {
  семейство шрифтов: fangsong;
}