Типографский дизайн играет важную роль в дизайне веб-сайтов. Хорошо продуманный и отформатированный текстовый контент помогает сайту быть более успешным, создавая приятное и легкое для восприятия чтение. Часть ваших усилий при работе с шрифтом будет заключаться в том, чтобы выбрать правильные шрифты для вашего дизайна, а затем использовать CSS для добавления этих шрифтов и стилей шрифтов на отображение страницы. Это делается с помощью того, что называется стек шрифтов.
Стеки шрифтов
Когда ты указать шрифт Для использования на веб-странице рекомендуется также включать резервные варианты на случай, если ваш выбор шрифта не найден. Эти резервные варианты представлены в стек шрифтов. Если браузер не может найти первый шрифт, указанный в стеке, он переходит к следующему. Он продолжает этот процесс до тех пор, пока не найдет шрифт, который можно использовать, или пока у него не закончатся варианты выбора (в этом случае он просто выберет любой системный шрифт, который ему нужен). Вот пример того, как стек шрифтов будет выглядеть в CSS при применении к элементу body:
тело {
семейство шрифтов: Georgia, Times New Roman, с засечками;
}
Шрифт Georgia отображается первым, поэтому по умолчанию это то, что будет использовать страница, но если этот шрифт по какой-то причине недоступен, страница возвращается к Times New Roman.
Приложить Times New Roman в двойных кавычках, потому что это имя из нескольких слов. Для однословных названий шрифтов, таких как Georgia или Arial, кавычки не требуются, но для многословных названий шрифтов со встроенными пробелами они нужны, чтобы браузер знал, что все эти слова составляют название шрифта.
Стек шрифтов заканчивается словом засечки. Это общее название семейства шрифтов. В том маловероятном случае, если у человека нет Грузии или Times New Roman на их компьютере сайт будет использовать любой шрифт с засечками, который сможет найти. Браузер выберет шрифт за вас, но, по крайней мере, вы предложите руководство, чтобы он знал, какой шрифт лучше всего подойдет для дизайна.
Общие семейства шрифтов
Общее название шрифта, доступное в CSS:
- курсив
- фантазия
- моноширинный
- засечки
- без засечек
Хотя в веб-дизайне и типографике доступно множество других классификаций шрифтов, в том числе slab-serif, blackletter, display, grunge и т. д., эти пять общих имен шрифтов - это те, которые вы бы использовали в стеке шрифтов. в CSS.
- Курсивные шрифты - часто имеют тонкие, богато украшенные буквы, которые предназначены для имитации причудливого рукописного текста. Эти шрифты из-за их тонких цветных букв не подходят для больших блоков контента, таких как основной текст. Курсивные шрифты обычно используются для заголовков и более коротких текстов, которые могут отображаться крупными шрифтами.
- Фэнтезийные шрифты - несколько сумасшедшие шрифты, которые на самом деле не попадают ни в одну другую категорию. Шрифты, имитирующие хорошо известные логотипы, например буквы из Гарри Поттер или же Назад в будущее фильмы попадают в эту категорию. Эти шрифты не подходят для основного содержимого, поскольку они часто настолько стилизованы, что читать длинные отрывки текста, написанные этими шрифтами, очень сложно.
- Моноширинные шрифты - иметь буквы одинакового размера и с одинаковым интервалом, как на старой пишущей машинке. В отличие от других шрифтов, которые имеют переменную ширину букв в зависимости от их размера (например, заглавная W занимает гораздо больше места, чем строчная я), моноширинные шрифты используют фиксированную ширину для всех символов. Эти шрифты часто используются для считывания кода, потому что они сильно отличаются от другого текста на этой странице.
- Шрифты с засечками - используйте небольшие дополнительные лигатуры на формах букв. Эти дополнительные части называются засечки. Распространенными шрифтами с засечками являются Georgia и Times New Roman. Шрифты с засечками отлично подходят для большого текста, такого как заголовок, а также для длинных отрывков текста и основного текста.
- Без засечекшрифты - нет лигатур. Название означает без засечек. Популярные шрифты в этой категории включают Arial или Helvetica. Подобно шрифтам с засечками, шрифты без засечек одинаково хорошо работают как в заголовках, так и в основном тексте, хотя некоторые эксперты предпочитают, чтобы большие блоки текста избегали шрифтов без засечек, потому что их труднее читать на мелком месте размеры.