Веб-шрифты - изучение веб-разработки

Использование локальных шрифтов

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

В этом случае браузерная версия отличается от десктопной.

Для десктопной версии все локально установленные шрифты в вашей системе будут автоматически доступны в Figma. Найти их можно там же, где и Google Fonts — в Font Picker.
Для браузерной версии локально установленные шрифты изначально недоступны. Сначала вам нужно будет установить приложение Figma Font Helper.

Установка Figma Font Helper

Есть два способа установки. Первый — через свою учетную запись в браузерной версии Figma.

Нажмите на свой логин в верхнем левом углу и выберите Account Settings.

Установка Figma Font Helper через учетку в браузерной версии

Прокрутите вниз до раздела Fonts и нажмите на кнопку Download Installer to enable local fonts, чтобы скачать инсталлятор для локальных шрифтов.

Загружаем локальные шрифты

После того, как вы скачали Figma Font Helper, запустите установщик и следуйте инструкциям на экране. Устанавливается буквально в два клика. Чтобы проверить работу инсталлятора, зайдите в профиль браузерной версии. Вы увидите следующую картину:

Ура! Теперь локальные шрифты доступны, о чем говорит вот такая надпись

Межстрочный интервал

Помимо размера самих букв у текста есть параметр межстрочного интервала — это расстояние между нижними краями текста на каждой строке.

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

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

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

Свойство font-family

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

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

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

Вы должны закончить список любым общим семейством шрифтов (generic font) на выбор — , , , и . Типичное объявление семейства шрифтов может выглядеть так:

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

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

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

Разница между Serif и Sans-serif шрифтами

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

Подробнее о стандартных, браузерных шрифтах, здесь: .

Как адаптировать размер текста под размер экрана

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

Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.

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

На телефоне с узким экраном всё выглядит нормально.

А на широком экране компьютера текст стал больше заголовка.

Второй вариант — использовать медиазапросы. Мы расскажем о них подробно в другой статье, а пока кратко: это когда мы можем накатывать разные стили на документ в зависимости от того, как этот документ отображается. Можно сказать: «Если экран шире 500 пикселей, используй вот такой размер шрифта; если шире 1000 пикселей — сякой; а если это не веб-страница, а версия для печати — вообще используй другой шрифт и размер».

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

Теперь всё в порядке.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Слишком хороший Lobster

Неформальную гарнитуру Lobster в англоязычном интернете часто называют «новым Comic Sans», указывая на её дурную репутацию.

Изображение: Font Space

На первый взгляд ничего ужасного в шрифте нет — напротив, он весьма красивый и гармоничный. Его создал дизайнер Пабло Импальяри (Pablo Impallari) в 2010 году. Работа очень качественная — прописано более 600 вариантов комбинаций между буквами: это нужно для идеальной стыковки соединительных штрихов, имитирующих ручное письмо. При выпуске гарнитуры допустили единственную оплошность — её сделали бесплатной для коммерческого использования.

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

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

Изображение: Memepedia

«Рабочие лошадки»

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

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

Эрик Шпикерманн

Универсальные шрифты Шпикерманн называет «рабочими лошадками» — с их помощью можно решить рутинные задачи бизнеса максимально быстро и дёшево. У любого подобного шрифта должны быть:

Хорошая насыщенность, чтобы читать слова было удобно, а форма букв не расплывалась.
Жирное начертание, чтобы выделить важное.
Разборчивые цифры, чтобы читатели верно понимали инструкции и у них не возникало опасных ситуаций.
Шрифт должен быть узким, чтобы в одну строку могло влезть побольше букв и можно было сэкономить на бумаге с чернилами. При этом буквы должны хорошо различаться.. В качестве «рабочих лошадок» Шпикерманн выделяет девять шрифтов:

В качестве «рабочих лошадок» Шпикерманн выделяет девять шрифтов:

Свойство font-size

Свойство используется для установки размера шрифта для текстового содержимого элемента.

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

Установка font-size в пикселях (px)

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

Посмотрим следующий пример, чтобы понять, как это в основном работает:

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

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

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

Установка font-size в единицах em

Единица является пропорциональной единицей измерения. При определении свойства значение равно размеру шрифта, который применяется к родительскому элементу.

Итак, если вы установите для элемента , то и .

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

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Использование комбинации % и em

Чтобы упростить вычисление значений , есть лайфхак, который состоит в том, чтобы установить для элемента равным (чтобы единицы рассчитывались не от , а от ).

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

Установка font-size в единицах rem

Для большей отзывчивости, в CSS3 введены единицы измерения rem (сокращенно от root em), которые всегда зависят от размера шрифта корневого элемента (), независимо от того, где находится элемент в документе (в отличие от , который расчитывается относительно размера шрифта родительского элемента).

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

Установка font-size с помощью ключевых слов

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

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

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

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

Установка font-size в единицах vw и vh

Размеры шрифта могут быть указаны с использованием относительных единиц : или .

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

Посмотрим следующий пример:

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

В этом примере, даже если ширина области просмотра становится равной , размер шрифта будет по крайней мере равен или .

Для создания более гибкой типографики вы можете использовать медиазапросы CSS.

Примечания по шрифту SF

Apple хотела бы, чтобы вы соблюдали несколько дополнительных правил при использовании шрифта San Francisco

Во-первых, используйте SF Pro Display при размерах шрифта 20 или выше. Используйте SF Pro Text только для основного текста и меньше.

Во-вторых, Сан-Франциско спроектирован так, чтобы иметь различный интервал между символами при разных размерах шрифта. Поэтому, если вы хотите идеально подражать «iOS по умолчанию», у вас есть несколько вариантов:

Ручная настройка интервала между символами в зависимости от размера шрифта в соответствии с приведенной ниже таблицей

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

Основные свойства шрифтов в CSS

В CSS при описании шрифта используют следующие характеристики:

Стиль

Стиль шрифта определяет тип начертания для представления текста: наклонный, курсивный или обычный.

Атрибут font style может принимать такие значения как:

normal (обычный);
italic (курсив);
oblique (наклонный).

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

Вариант шрифта

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

Свойство font variant может иметь одно из двух возможных значений:

normal (обыкновенный шрифт);
small-caps (шрифт с малыми прописными буквами).

Вес шрифта

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

Каждый шрифт может принимать следующие значения:

normal (обычный);
lighter (светлее);
bold (жирный);
bolder (ещё более жирный);
100-900 (числовое описание веса, в котором значение 100 соответствует самому тонкому начертанию, а 900 — самому толстому начертанию).

Например:

p {font-family: georgia, garamond serif;}
td {font-family: georgia, garamond serif; font-weight: bold;}

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

Размер шрифта — это расстояние от нижней кромки текста до границ кегельного пространства. Если в HTML данный параметр варьируется от 1 до 7 условных единиц, что не далеко не всегда является удобным, то в CSS с помощью свойства font size размер шрифта можно указать с точностью до пикселя.

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

p {font-size: 20px;}

Также, размер шрифта можно задать с помощью процентов от его базового размера.

Например, шрифт с параметрами:

p {font-size: 150%}

будет отображён на 50% больше стандартного размера. В том случае, если гарнитура и размер шрифта не указаны, браузером будет выводиться базовый шрифт Times New Roman со стандартным, на усмотрение браузера, размером.

Цвет шрифта

Возможности CSS позволяют задать цвет текста и его фона с помощью следующих свойств:

color (цвет текста);
background color (цвет фона текста).

Цветовые значения рекомендуется указывать в общепринятом шестнадцатеричном виде цветовой модели RGB.

Например, белый текст на чёрном фоне будет иметь такие значения:

color: #ffffff;
background-color: #000000.

Первая пара цифр отвечает за уровень красного цвета, вторая — за уровень зелёного цвета, а третья — за уровень синего.

Минимальное значение — 0, а максимальное — f. Этот принцип позволяет самостоятельно «придумать» значения некоторых цветов: например, если первой паре цифр присвоить максимальное значение, а второй и третьей — минимальные, получится насыщенный красный цвет #ff0000.

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

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

Таким образом, возможности CSS позволяют изменить шрифт всего веб-сайта и его свойства всего за несколько минут, что существенно облегчает разработчику жизнь и экономит время.

Надеемся, что данное руководство было для вас полезно. Желаем успехов!

АМАнтон Малаховавтор

Как форматировать абзацы

Как изменить межстрочный интервал и выравнивание текста

Как изменить интервалы между абзацами или строками

Откройте файл в Google Документах на компьютере.
Выделите фрагмент текста, который нужно изменить.
Нажмите ФорматИнтервалы между абзацами или строками.
Выберите нужный вам вариант форматирования:
- Чтобы указать нужный межстрочный интервал, нажмите Одинарный, 1,15, 1,5 или Двойной.
- Чтобы изменить интервал между абзацами, нажмите Удалить пробел перед абзацем или Добавить пробел после абзаца.
- Чтобы задать значения, которых нет в списке стандартных, выберите Настройка интервалов. Введите нужные интервалы и нажмите Применить.
- Чтобы заголовок и идущий за ним абзац всегда находились на одной странице, нажмите Не отрывать от следующего.
- Чтобы все строки абзаца всегда находились на одной странице, выберите Не разрывать абзац.
- Нажмите Запретить висячие строки, чтобы предотвратить их появление в документе.

Как изменить границы и цвет

Откройте файл в Google Документах на компьютере.
Выделите абзац.
Нажмите Формат Границы и линии.
Задайте нужные настройки в открывшемся окне.
Чтобы удалить границы или цвет, нажмите Сбросить.
После изменения параметров выберите Применить.

Как форматировать шрифты

Как изменить регистр

Откройте файл в Google Документах на компьютере.
Выделите текст.
Нажмите на значок «Цвет текста» .
Выберите нужный цвет.

Как выбрать шрифт по умолчанию

Откройте файл в Google Документах на компьютере.
Выделите текст.
Выберите шрифт на панели в верхней части экрана.
Нажмите Формат Стили абзацев Обычный текст Обновить обычный текст в соответствии с выделенным фрагментом.
Убедитесь, что текст по-прежнему выделен, и нажмите Формат Стили абзацев Настройки Сохранить как стили по умолчанию.

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

Как добавить дополнительные шрифты

Для некоторых языков можно добавить в меню дополнительные шрифты.

Откройте файл в Google Документах на компьютере.
Нажмите на название шрифта в верхней части экрана.
Выберите Другие шрифты в конце списка.
Чтобы найти нужный шрифт, пролистайте список или воспользуйтесь поиском.
Нажмите на шрифт, чтобы добавить его в список «Мои шрифты».
Чтобы отсортировать или отфильтровать список шрифтов, используйте меню «Сортировать» и «Показать».
Нажмите ОК.

Поддерживаемые языки

Шрифты доступны для следующих языков:

Африкаанс
Албанский
Арабский
Азербайджанский
Бенгальский
Бирманский
Каталанский
Хорватский
Чешский
Датский
Нидерландский
Английский
Эстонский
Филиппинский
Финский
Французский
Немецкий
Греческий
Гуджарати
Иврит
Хинди
Венгерский
Исландский
Индонезийский
Итальянский
Каннада
Казахский
Кхмерский
Киргизский
Латышский
Литовский
Македонский
Малайский
Малаялам
Маратхи
Монгольский
Непальский
Норвежский
Персидский
Польский
Португальский
Панджаби
Румынский
Русский
Сербский
Сингальский
Словацкий
Словенский
Испанский
Суахили
Шведский
Тамильский
Телугу
Тайский
Турецкий
Украинский
Урду
Узбекский
Вьетнамский

Как изменить цвет шрифта

Откройте файл в Google Документах на компьютере.
Выделите текст.
Нажмите на значок «Цвет текста» .
Выберите нужный цвет.

Как изменить цвет фона текста

Откройте файл в Google Документах на компьютере.
Выделите текст.
Нажмите на значок «Цвет фона текста» .
Выберите нужный цвет.

Как сделать шрифт полужирным или курсивным и как зачеркнуть текст

Откройте файл в Google Документах на компьютере.
Выделите текст.
Чтобы отформатировать его, выполните нужное действие:
1. нажмите на значок «Полужирный» ;
2. нажмите на значок «Курсив» ;
3. выберите Формат Текст Зачеркнутый.

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

Функция

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

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

1. Домашнее чтение. Читатель в спальне или в другом месте для отдыха

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

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

Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

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

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

Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

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

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

Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

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

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

Изображение: издательство «Манн, Иванов и Фербер»
Изображение: издательство «Манн, Иванов и Фербер»

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

Включение эффектов шрифта

Google также включил различные эффекты шрифтов, которые вы можете использовать.

Сначала добавьте к Google API, затем добавьте имя специального класса к элементуe, который будет использовать специальный эффект. Имя класса всегда начинается с и заканчивается с .

Пример

Добавьте эффект огня к шрифту «Sofia»:

<head><link rel=»stylesheet»
href=»https://fonts.googleapis.com/css?family=Sofia&effect=fire»><style>body {
font-family: «Sofia», sans-serif; font-size: 30px;}</style></head>
<body><h1 class=»font-effect-fire»>София в огне</h1></body>

Результат:

София в огне

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

Пример

Добавьте несколько эффектов к шрифту «Sofia»:

<head><link rel=»stylesheet»
href=»https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple»><style>body {
font-family: «Sofia», sans-serif; font-size: 30px;}</style></head>
<body><h1 class=»font-effect-neon»>Неоновый эффект</h1><h1 class=»font-effect-outline»>Эффект контура</h1><h1 class=»font-effect-emboss»>Эффект тиснения</h1><h1 class=»font-effect-shadow-multiple»>Эффект множественной тени</h1></body>

Результат:

❮ Prev
Next ❯

Зачем это нужно

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

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

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

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

Как задать шрифт в CSS?

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

Для категоризации используют два типа имён: гарнитура шрифта family name и общее семейство generic family.

Первый тип — название шрифта (например, Calibri, Times New Roman и т. д.), второй — группа шрифтов с характерными общими чертами (например, sans-serif).

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

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

h1 {font-family: verdana, trebuchet, sans-serif;} 
h2 {font-family: “Garamond”, serif;}

Как форматировать шрифты

Как изменить регистр

Откройте файл в Google Документах на компьютере.
Выделите текст.
Нажмите на значок «Цвет текста» .
Выберите нужный цвет.

Как выбрать шрифт по умолчанию

Откройте файл в Google Документах на компьютере.
Выделите текст.
Выберите шрифт на панели в верхней части экрана.
Нажмите Формат Стили абзацев Обычный текст Обновить обычный текст в соответствии с выделенным фрагментом.
Убедитесь, что текст по-прежнему выделен, и нажмите Формат Стили абзацев Настройки Сохранить как стили по умолчанию.

Как добавить дополнительные шрифты

Для некоторых языков можно добавить в меню дополнительные шрифты.

Откройте файл в Google Документах на компьютере.
Нажмите на название шрифта в верхней части экрана.
Выберите Другие шрифты в конце списка.
Чтобы найти нужный шрифт, пролистайте список или воспользуйтесь поиском.
Нажмите на шрифт, чтобы добавить его в список «Мои шрифты».
Чтобы отсортировать или отфильтровать список шрифтов, используйте меню «Сортировать» и «Показать».
Нажмите ОК.

Поддерживаемые языки

Шрифты доступны для следующих языков:

Африкаанс
Албанский
Арабский
Азербайджанский
Бенгальский
Бирманский
Каталанский
Хорватский
Чешский
Датский
Нидерландский
Английский
Эстонский
Филиппинский
Финский
Французский
Немецкий
Греческий
Гуджарати
Иврит
Хинди
Венгерский
Исландский
Индонезийский
Итальянский
Каннада
Казахский
Кхмерский
Киргизский
Латышский
Литовский
Македонский
Малайский
Малаялам
Маратхи
Монгольский
Непальский
Норвежский
Персидский
Польский
Португальский
Панджаби
Румынский
Русский
Сербский
Сингальский
Словацкий
Словенский
Испанский
Суахили
Шведский
Тамильский
Телугу
Тайский
Турецкий
Украинский
Урду
Узбекский
Вьетнамский

Как изменить цвет шрифта

Откройте файл в Google Документах на компьютере.
Выделите текст.
Нажмите на значок «Цвет текста» .
Выберите нужный цвет.

Как изменить цвет фона текста

Откройте файл в Google Документах на компьютере.
Выделите текст.
Нажмите на значок «Цвет фона текста» .
Выберите нужный цвет.

Как сделать шрифт полужирным или курсивным и как зачеркнуть текст

Откройте файл в Google Документах на компьютере.
Выделите текст.
Чтобы отформатировать его, выполните нужное действие:
1. нажмите на значок «Полужирный» ;
2. нажмите на значок «Курсив» ;
3. выберите Формат Текст Зачеркнутый.

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

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

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

Бесплатные

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

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

Платные

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

Где посмотреть:

Paratype.ru
MyFonts.com
Typekit.com
Студия Артемия Лебедева

Стиль шрифта

Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
italic — курсивное начертание
oblique — наклонное начертание

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exnormal { font-style: normal; }
      p.exitalic { font-style: italic; }
      p.exoblique { font-style: oblique; }
    </style>
  </head>

  <body>
    <p class="exnormal">Абзац со значением normal.</p>
    <p class="exitalic">Абзац со значением italic.</p>
    <p class="exoblique">Абзац со значением oblique.</p>
  </body>
</html>

Попробовать »

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

iPad

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

Поэтому, хотя, некоторые приложения по-прежнему используют заголовки 17pt в стиле iPhone…

На iPad они больше.

В нескольких нативных приложениях используется самый полужирный вес шрифта SF — тяжелый. На мой взгляд, это настоящая «iPad-версия» полужирных заголовков на iPhone, но Apple странно непоследовательна в ее использовании.

Выше я также указываю неправильную нижнюю панель вкладок приложения «Музыка» (с текстом 17pt). В большинстве нативных приложений для iPad сохраняется размер панели вкладок 10pt в стиле iPhone, но я думаю, что это лучший «перевод» дизайна на экран большего размера.

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