Как установить стиль шрифта. css-свойство font

Иллюстрирование текста

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

Какие есть виды иллюстраций:

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

Проценты и шрифты

Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем font-size: 50%;, то браузер сделает так:

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

Браузер взял размер шрифта 40 пикселей из общих настроек для всей страницы.

Теперь добавим отдельный стиль для абзаца и в нём укажем, что размер текста должен быть 50%:

А вот что будет, если мы удалим размер в пикселях из стиля body{} и дадим браузеру самому разобраться с размером:

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

Как создать шрифт

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

Вот несколько правил создания собственного шрифта:

Программное обеспечение.
Важно выбрать подходящее программное обеспечение. Что можно использовать:

FontForge

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

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

FontLab 7. Встроенный редактор, который помогает создавать шрифты. Есть 30-дневная бесплатная пробная версия.

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

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

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

Размер символов шрифта

Если гарнитура (проще говоря, имя шрифта) является первым параметром шрифтов, то вторым параметром является размер символов шрифта.

Можно встретить еще такое название – кегль шрифта (кегель шрифта). Это то же самое, что и размер шрифта.

Зачем нужны разные размеры шрифта? Обычно заголовки печатаются крупнее, чем основной текст документа

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

Как задается размер шрифта (или кегель шрифта)? Обычно пользователи выбирают размер шрифта – 8, 10, 12, 14 и т.д. Здесь цифры означают размер символов шрифта по вертикали в типографских пунктах между вершиной самого высокого символа и нижней точкой самого низкого (см. рисунок).

Слово «пункт» произошло от немецкого слова «punkt» и переводится как «точка». Для тех, кто любит цифры, сообщаю, что один пункт равен 1/72 дюйма, то есть 0,3528 миллиметра. Соответственно, для того, чтобы 8 пунктов перевести в миллиметры, надо 8 умножить на 0,3528. В результате получится, что 8 пунктов – это 2,8224 миллиметра.

Соотношение пиксельной плотности и расстояния просмотра

В общем, чем меньше устройство, тем меньше пикселей *.

* Под «пикселем» я подразумеваю не физические пиксели, а концепцию, попеременно относящуюся к «CSS пикселям» (веб-сайт), «независимым от плотности пикселям» (Android) или «точкам» (iOS). В настоящее время большинство флагманских устройств имеют настолько небольшие физические пиксели, что они искусственно раздувают изображение в два раза (или три раза), как большое. Каждый «пиксель» на изображении фактически занимает 4 (или 9) физических пикселей. Таким образом, «физический пиксель» становится довольно бесполезным, как термин размера. Вместо этого у нас есть три термина: один из них – пережиток прошлого, когда все экраны были с низким разрешением (CSS-единица «пиксель»), второй – новое значение для старого печатного термина («точка») и последний – совершенно новая единица, чье определение связано с мудреной, неприятной детализацией, которая отличает ее от других единиц («независимый от плотности пиксель» или «dp»).

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

Это все. Просто еще одно золотое правило, которое следует учитывать при разработке гибких веб-сайтов.

Что это за руководство?

Чаще всего начинающие дизайнеры интерфейса задают мне следующий вопрос: Какой размер шрифта я должен использовать для своего проекта? Иногда они спрашивают о веб-сайте, иногда об Android-приложении, иногда о проекте на iPhone iPad. Material Design дает хорошие рекомендации, но они на 50 страниц. iOS … ну, у них нет хороших рекомендаций! А по веб-дизайну все еще хуже. Может быть, внезапно появится какая-нибудь статья, которая рассказывает вам, какие размеры шрифта использовать на основе темной магии с золотым сечением. Да ладно, люди.

Три разных платформы, три разных набора проблем и два противоположных языка дизайна?

Вы когда-нибудь хотели, чтобы кто-то скомпилировал все правила в одном месте?

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

Платформы: рекомендации для различных типов платформ, а именно:

Как устроено свойство font-size (размер шрифта) в CSS

font-size наследуется по всему дереву документа
Если нигде не было определено свойство font-size, то значение единичного em будет равно 16px, которое является значением по умолчанию

Подробнее о единицах размера и об их применении для шрифтов на сайте Консорциума Всемирной паутины (по-русски).

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

Для выбора и подключения внешнего шрифта зайти на сайт fonts.google.com. На нем свободно доступно более 900 шрифтов.
Не для всех шрифтов есть кириллическое написание. Поэтому, на Google Fonts необходимо указать язык шрифта: выбрать Cyrillic.
Для выбора шрифта нужно нажать на знак добавления «+» в верхнем правом углу блока шрифта. Появится черная полоса снизу с указанием количества выбранных шрифтов. По клику полоса раскрывается, показывая два блока кода.
Первый блок — тег <link>. Вставить в «голову» (тег <head>) html-файла.
Второй блок – правила css (свойство css font-family и значение, в котором указано название шрифта и его семейство) для использования выбранных шрифтов. Вставить в блок объявлений нужного селектора.
Альтернатива – скачать шрифт с Font squirrel, справа в разделе Languages выбрать Cyrillic, скачать (форматы файлов ttf, otf, woff, svg) и подключить с помощью правила @font-face, рецепт.

Вопросы и задачи по теме

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

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

Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты:
для заголовка — Roboto, для остального текста — Open Sans

Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся

После этого с использованием тега подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.

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

Каскадность в CSS

Цветовое оформление в CSS

Mobile Web

Если вы разрабатываете веб-сайт или приложение, которое можно просматривать на мобильных устройствах, существует только одно жесткое правило:

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

Вот пример:

Вот, что еще я могу сказать о размерах мобильных веб-шрифтов:

Используйте размер шрифта основного текста около 16px. Вы хотите, чтобы текст основного текста на вашем телефоне (когда он находился на естественном расстоянии) был таким же читаемым, как текст в хорошо отпечатанной книге (которую держат на естественном – обычно чуть дальше – расстоянии)
Для вторичного текста, несущественных меток и подписей используйте размер поменьше – например, 13px или 14px. Я не рекомендую уменьшать только на один размер шрифта, поскольку тогда слишком легко спутать его с обычным текстом. Когда текст менее важен, вы хотите его стилизовать так, чтобы четко понимать его меньшее значение.

Основные виды гарнитур

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

антикву,
гротеск,
рукописные,
акцидентные.

Подробнее о каждом виде поговорим далее.

Антиква

Данная гарнитура также называется начертанием с засечками. Засечки мы можем увидеть снизу и сверху буквы:

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

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

Популярные шрифты с засечками:

Times New Roman,
Garamond,
Bodoni,
Playfair Display,
Merriweather.

Гротеск

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

Гарнитура Гротеск (рубленый шрифт) стала популярной в середине 20 века, она имеет более готический вид, в то время как антиква считается «римским» стилем. Символы данного вида гарнитуры более четкие, жирные и современные. Примером такой гарнитуры можно отметить всем известный Arial, который часто встречается в заголовках на сайтах и объявлениях.

Другие популярные шрифты без засечек:

Open Sans,
Raleway,
Montserrat,
Druk,
Futura PT.

Рукописный

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

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

Популярные рукописные шрифты:

Antractic,
Rhytmic,
Amatic SC,
Caravan,
Klyakson.

Акцидентный

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

Популярные акцидентные шрифты:

Miratrix,
Moniqa,
Durance Type,
Flicker,
CSTM Xprmntl 03.

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

Как улучшить типографику на сайте

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

Не используйте больше двух шрифтов. Большое количество шрифтов только запутает пользователя, и ему будет сложно воспринимать информацию. Используйте шрифтовые пары – один шрифт для заголовков, другой – для основного текста. В некоторых случаях может быть использован только один шрифт, но чаще всего берутся пары заголовок-контент. Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.
Не делайте шрифт очень маленьким. Минимальный размер для читаемого текста составляет 16px как в десктопной версии, так и мобильной. Шрифт меньше может быть использован только в крайних случаях, например, когда нужно указать дополнительную информацию. В целом, стандартный размер шрифта – это 16-22px. Заголовок при этом может быть большим, вплоть до 100px, но чаще всего он находится в диапазоне 40px-70px.
Не используйте для шрифта черный цвет #000000. Это самый насыщенный черный цвет, который можно выбрать. При длительном чтении будут уставать глаза. Лучше использовать менее яркие цвета, например немного сероватые.
Пользуйтесь бесплатными шрифтами. Шрифты разделяются на платные и бесплатные. Найти бесплатно в интернете вы можете любые, но если использовать шрифт без лицензии, то это будет нарушением авторских прав. В таком случае собственник шрифта может подать на вас в суд. Конечно, маловероятно, что это произойдет, но лучше использовать либо бесплатные, либо покупать платные шрифты. Найти бесплатные варианты вы можете на официальной странице шрифтов Google.
Следите за размером шрифта. В данном случае я имею ввиду то, что самый верхний заголовок должен быть либо равен остальным, либо быть больше. Ни в коем случае не меньше. Если размер первого заголовка будет меньше, чем второй, то потеряется иерархия, и изучать контент станет сложно.
Избегайте висячих предлогов и слов-одиночек. Про висячие предлоги я уже говорил – их не должно быть.
Используйте прописные буквы в заголовках и важных местах. Крупными буквами можно усилить заголовок и направить взгляд пользователя в нужное место.

Если вы хотите стать гуру типографики, то регулярно изучайте работы других дизайнеров

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

А если вам просто нужен шрифт для сайта, то вот отличные сервисы с бесплатной типографикой: «Мы с котом», «shriftkrasivo», «BestFonts.pro», «Rufonts.ru».

Стилизация шрифтов

Последнее обновление: 21.04.2016

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

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

body{
	font-family: Arial;
}

В данном случае устанавливается шрифт Arial.

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

Также нередко применяется практика нескольких шрифтов:

body{
	font-family: Arial, Verdana, Helvetica;
}

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

Если название шрифта состоит из нескольких слов, например, Times New Roman, то все название заключается в кавычки:

body{
	font-family: "Times New Roman";
}

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

body{
	font-family: Arial, Verdana, sans-serif;
}

Так, если ни Arial, ни Verdana не поддерживаются на компьютере пользователя, то используется sans-serif — универсальный шрифт без засечек.

Типы шрифтов

Шрифты с засечками

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

Распространенные шрифты с засечками: Times, Times New Roman, Georgia, Garamond. Универсальный обобщенный шрифт с засечками представляет значение serif.

Шрифты без засечек

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

Моноширинные шрифты

Моноширинный шрифт преимущественно применяется для отображения программного кода и не предназначен для вывода стандартного текста статей.
Свое название эти шрифты получили от того, что каждая буква в таком шрифте имеет одинаковую ширину. Примеры подобных шрифтов: Courier, Courier New,
Consolas, Lucida Console.

Примеры шрифтов:

Толщина шрифта

Свойство font-weight задает толщину шрифта. Оно может принимать 9 числовых значений: 100, 200, 300, 400,…900. 100 — очень тонкий шрифт,
900 — очень плотный шрифт.

В реальности чаще для этого свойства используют два значения: (нежирный обычный текст) и (полужирный шрифт):

font-weight: normal;
font-weight: bold;

Курсив

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

p {font-style: italic;}

Если надо отменить курсив, то применяется значение :

p {font-style: normal;}

Свойство color устанавливает цвет шрифта:

p {
	color: red;
}

НазадВперед

На практике

Чтобы добавить немного характера к нашему сайту Styles Conference, попробуем использовать на нём Google Font.

Зайдём на сайт Google Fonts и поищем шрифт, который мы хотели бы использовать: Roboto. После того как нашли, добавим его к нашей коллекции, следуя инструкциям на сайте.

Когда придёт время выбора, какое начертание мы хотели бы использовать, удостоверимся, что указали 300 и 400, как мы уже применяли в нашем CSS. Также добавим 100 к коллекции для другого варианта тоже.

Google выдаст нам дополнительный элемент <link> для включения в <head> на всех наших страницах. Мы поместим этот новый элемент <link> непосредственно ниже нашего существующего <link>. Новый элемент будет включать в себя правильный указатель на стили Google, который в том числе включает новый файл CSS с правильным правилом @font-face, необходимым для использования шрифта Roboto.

После добавления нового элемента <link>, наш элемент <head> будет выглядеть следующим образом:
После того, как мы добавили новый элемент <link> для всех наших страниц мы готовы начать использовать шрифт Roboto. Мы сделаем это, добавив его в наш основной набор шрифтов в свойстве font внутри стиля для элемента <body>.

Добавим Roboto в начале нашего набора шрифтов так: «Roboto», «Open Sans», «Helvetica Neue», Helvetica, Arial, sans-serif.

Хотя Roboto это одно слово, но поскольку это встроенный веб-шрифт, то мы хотим взять его в кавычки внутри любого CSS. Наш новый стиль для элемента <body> будет выглядеть следующим образом:
Теперь Roboto должен загрузиться и работать, что видно по всему тексту на сайте Styles Conference. Поближе взглянем на наш логотип и обновим его немного.

Внутри набора правил с классом logo начнём с добавления свойства font-weight со значением 100, чтобы сделать текст достаточно тонким. Также используем свойство text-transform со значением uppercase, чтобы сделать все буквы заглавными и свойство letter-spacing со значением .5 пикселей, чтобы добавить немного пространства между букв внутри логотипа.

Все стили для нашего логотипа будут выглядеть следующим образом:
Поскольку нам доступно значение 100 у свойства font-weight, давайте также установим абзац для раздела hero такой же насыщенности. Мы можем использовать существующий селектор чтобы сделать это и новый набор правил будет выглядеть следующим образом:

Рис. 6.03. Главная страница Styles Conference после добавления веб-шрифта от Google

Демонстрация и исходный код

Ниже вы можете посмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

Установка шрифта (font-family)

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

CSS

В этом примере мы для тега установили шрифты в следующем порядке:

Segoe UI;
Arial;
sans-serif.

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

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

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

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

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

Пример, как в очень популярном CSS-фреймворке Bootstrap 5 выполняется установка шрифта для тега и, следовательно, по умолчанию для всех вложенных в него элементов:

CSS

Шрифты, в названии которых имеется хотя один пробел, должны быть заключены в кавычки. Наприпер: «Segoe UI», «Helvetica Neue» и так далее.

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

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

– общее семейство системных шрифтов; оно указывает, что в качестве шрифта будет использоваться системный шрифт операционной системы, но так как разные операционные системы используют разные системные шрифты, то в Windows это будет «Segoe UI», в macOS – «San Francisco», в Android – «Roboto».
– обозначает, что на устройствах Apple (iPhone, iPad и Mac) нужно использовать системный шрифт операционной системы.
– шрифт с засечками. Например: Georgia, Times New Roman.
– шрифт без засечек. Например: Arial, Tahoma, Trebuchet MS, Verdana, San Francisco, Segoe UI.
– моноширинный шрифт, то есть такой у которого все символы (глифы) имеют одинаковую ширину. Например: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New.
– шрифты, имитирующие почерк. Например: Comic Sans MS, Comic Sans, Apple Chancery, Bradley Hand, Snell Roundhand.
– декоративные шрифты, которые в основном используются для названий, заголовков и так далее. Например: Impact, Luminari, Chalkduster, Jazz LET, Stencil Std.
– шрифты, специально предназначенные для отображения эмодзи. Например: Apple Color Emoji, Segoe UI Emoji.

Свойство является . Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.

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

CSS

Размеры шрифтов – как подобрать кегль

Кегль – это размер шрифта по вертикали. Единицы измерения: типографские пункты – pt; пиксели – px; относительные единицы – em; условные единицы – dp.

Есть определенные правила подбора шрифта для текстовых и интерактивных страниц на ПК и на мобильном устройстве:

В текстовых страницах используется более крупный размер шрифта, чтобы человек смог спокойно читать, не напрягая зрение. Минимально он должен быть 16–18px, но в отдельных случаях могут подойти и 20px+.
В интерактивных страницах размер шрифта может быть меньше, нормой считается 14-16px. Для менее значимой информации могут использоваться мелкие кегли, а для более значимой — кегли побольше. Например, шрифт названий событий устанавливается в 12px, указатели времени в 10px, даты в 48px.
При создании приложений на мобильных устройствах используется шрифт не менее 16px для основного текста. Для второстепенного, подписей для полей и картинок лучше использовать размер на пару значений меньше: например, 13px или 14px. Обязательно проверяйте дизайн на своих девайсах, т. к. макет, сделанный на компьютере, может выглядеть иначе на мобильном устройстве.

Что такое типографика

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

Например, у нас есть предложение «Привет, дорогой, ужин на столе». Выглядеть оно может так:

Точно такой же текст мы можем оформить и вот так:

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

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Material Design — Mobile

Итак, вы разрабатываете приложение в стиле Material Design и хотите узнать (примерно), какой размер шрифта использовать? Отлично. Вы пришли в нужное место.

Все размеры шрифта, перечисленные ниже, относятся к Roboto. Другие шрифты могут казаться большими или меньшими, даже с одинаковым размером. Единицы, которые я использую в этом разделе, являются «sp». Произносится как «sips», и обозначает масштабируемые пиксели. Но, как дизайнер, все, что вам нужно знать, это число, которое вы вводите в поле «размер шрифта», когда проектируете.

Элемент
Размер
Примечения
Заголовки страниц
20sp

Текст абзаца
14sp

Заголовки списков
14sp
Покажите важность, используя средний вес
Заголовки элементов списка, Важные отрывки текста
16sp

Вторичный текст, Подписи под картинками
14sp
Используйте более светлый цвет, чтобы показать меньшую важность
Кнопки, Вкладки
14sp
Средний вес
Текст вводимых данных
16sp

Теперь давайте рассмотрим элемент за элементом с (a) визуальными эффектами и (b) заметками о том, как Google ловко использует эти стили шрифтов. Без шуток, народ. Надеюсь, вы прочитаете этот раздел и подумаете: «Кто бы ни придумал размеры шрифта Material Design – это умный человек». Я так думаю.

Вид списка

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

В представлении списка – в этом конкретном примере с электронными письмами — iOS обрабатывает имя отправителя как текст обычного размера (17pt), а тему письма и предварительный просмотр – как вторичный, меньший текст (15pt). Я думаю, это стоит отметить, потому что, опять же, как дизайнер, инстинктивно хотел сделать наоборот: сделать основной текст размером по умолчанию, а имя отправителя еще больше. Заметили здесь тренд? iOS не устанавливает размеры шрифта так, как вы могли наивно ожидать.

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

Примечание ниже настроек («AirDrop позволяет вам мгновенно делиться …») написано шрифтом 13pt, что является наименьшим размером во всех рассмотренных примерах интерфейса.

Встраивание веб-шрифтов

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

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

Демонстрация свойств текста

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

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

Перед загрузкой каких-либо шрифтов удостоверьтесь, что у вас есть на это разрешение.