что такое болд регуляр в шрифте
Практический взгляд на базовые термины и анатомию шрифтов
Учимся называть “палочки” штрихами и понимать, на что влияют засечки и заплечики
В этой статье я кратко изложу основы анатомии шрифта, которые пригодятся любому уважающему себя дизайнеру, и с особым вниманием остановлюсь на том, зачем ему все это надо.
Шрифт — один из базовых «голосов» графического дизайна наравне с цветом, формой и т.д. Это то, как говорит ваш дизайн. И как он будет это делать в каждый конкретный момент взаимодействия с пользователем, полностью зависит от вас. Кричать навязчивым фальцетом или нашептывать мягким баритоном, помогать воспринимать информацию или мешать, работать с брендом сообща, усиливая эмоциональное восприятие, или безлико информировать.
Вы можете продолжать работать на интуитивном уровне (и большинство дизайнеров так и делает), никто не мешает вам использовать любой попавшийся шрифт в любой конфигурации, не задумываясь о начертаниях, контрастности, динамике или кегле, пользователи прочитают, если очень захотят. Возможно. А возможно и не прочитают. Но если вы действительно хотите перейти из категории любитель в категорию профессионал, вам важно научиться работать со шрифтами осознанно и уметь аргументировать любое свое решение. Ну или почти любое (воодушевляющая музыка на фоне оборвалась). Хотя пусть будет любое. Немного пафоса не повредит.
Если вы хотите перейти из категории любитель в категорию профессионал, вам важно научиться действовать осознанно и уметь аргументировать свое решение.
Итак, разберемся для начала в терминологии, основных каверзных вопросах и научимся, черт возьми, называть “палочки” шрихами.
Терминология
Мы часто используем слово “шрифт” в разных ситуациях. Давайте по порядку, есть шрифт, а есть гарнитура.
Шрифт (Font) — это определенное начертание в рамках гарнитуры, а также соответствующий файл. Arial Regular, Gotham Bold, Merriweather Bold — это шрифты разных гарнитур.
Семейство шрифтов (Font Family) — это набор начертаний в рамках одной гарнитуры. В рамках гарнитуры Arial есть целое семейство шрифтов — Arial Regular, Arial Bold, Arial Italic и т.д.
Итак, гарнитурой называют общий характер, шрифтом — одно из начертаний и собственно шрифтовой файл, а когда говорят о семействе шрифтов, подразумевают совокупность начертаний, т.е. гарнитуру, у которой не одно начертание, можно называть семейством.
На практике, когда вы говорите о шрифтах в широком смысле слова, акцентировать внимание на том, что вы имеете в виду “гарнитуры”, нет особой необходимости, контекста достаточно. Но когда вы обсуждаете макет, слово “шрифт” лучше не использовать, чтобы не вводить коллег в заблуждение. Рекомендую либо оперировать понятием “гарнитура”, когда имеете в в виду Arial/Helvetica, либо понятием “начертание”, когда подразумеваете Regular/Bold.
Перейдем к составляющей шрифта, букве. Ее тоже можно назвать по-разному: буква, графема, глиф — есть ли здесь критическая разница?
Буква — это графический знак как часть алфавита, который сам по себе или в сочетании с другими знаками используется для обозначения на письме звуков, фонем и их типичных комбинаций.
Графема — более общее понятие. Графема представлена буквой если письменность строится на алфавите, или иероглифом в неалфавитных системах письма. Говоря о графеме, мы абстрагируемся от стиля и характера отдельных гарнитур, а имеем в виду сугубо то, чем фундаментально графема “А” отличается от графемы “Б”, как знак. Т.е. вы никогда не спутаете графему буквы “А” с графемой буквы “Б”.
Собственно шрифт состоит из глифов — векторных форм каждой буквы или символа. Например, Open Sans, один из самых популярных веб-шрифтов, содержит 897 глифов, включая латинские, греческие и кириллические символы.
Одна и та же графема может иметь несколько глифов как ее графических воплощений, которые могут отличаться как функционально (строчные, капительные, прописные, курсивные), так и даже просто по форме (альтернативные).
Итак, теперь вы знаете разницу между шрифтом, гарнитурой и семейством, а также графемой, буквой и глифом, а значит в разговоре с профессионалами не ударите в грязь лицом.
Уже горжусь вами. Двигаемся дальше.
Обратимся к букве, из каких элементов она состоит и как их грамотно называть.
Анатомия буквы, на что влияют детали
Разобравшись, из чего состоит буква, вы научитесь распознавать, что именно влияет на итоговый вид шрифта и то, как он воспринимается, а значит сознательнее подойдете к выбору шрифта в вашей следующей работе.
Итак, на картинке ниже вы найдете весь набор ингредиентов:
Из них значимыми для вас как для дизайнера-не-шрифтовика являются не все, рекомендую запомнить засечки, основные и соединительные штрихи, а также выносные и свисающие элементы. Итак, как именно эти элементы работают на практике и зачем вам обращать на них внимание.
Считается, что засечки заметно улучшают восприятие буквенного знака, даже если они слабо видимы. Именно поэтому в печатных изданиях дизайнеры предпочитают использовать шрифты с засечками. Помните об этом, когда подбираете шрифт для длительного чтения, в том числе в цифровом дизайне.
Соотношение между основным и соединительным штрихами определяет контрастность шрифта. Гарнитуры шрифтов с выраженным контрастом штрихов наиболее удобочитаемы. Исключением являются случаи, когда контраст выражен слишком ярко и соединительный штрих становится чересчур тонким. Неконтрастный шрифт (например, в гротесках) лучше воспринимается при чтении отдельных слов и выделений.
Обратите внимание на свисания. Любопытно, что несмотря на то, что оптически высота строчных букв одинаковая, технически это не так. Некоторые округлые буквы — например, “о”, “с” и другие — слегка заходят за baseline и x-height, чтобы визуально при печати иметь ту же высоту, что и другие буквы. Эти выступающие части и называют свисаниями.
Есть еще так называемый внутрибуквенный просвет, или контрформа. Это закрытые пространства внутри букв, таких как например “о”, “ь”, “р” и других. Эти пространства помогают глазу распознать характерные особенности шрифта. Чем больше внутрибуквенный просвет, тем лучше (при прочих равных условиях) читается буквенный знак.
Дизайнер-модернист Массимо Виньелли, культовая фигура XX века, очень здорово описал значимость формы и контрформы в типографике в фильме про Гельветику (кстати, очень рекомендую посмотреть, полтора часа времени не потраченного впустую):
“Мы думаем, что шрифт черно-белый. На самом деле он белый, вовсе не черный. Именно белое расстояние между черным и составляет шрифт. Это своего рода музыка. Не ноты, а расстояние между нотами создает музыку.”
Про Массимо много написано, он оставил миру очень вдохновляющие идеи и мысли, почитайте как-нибудь для вдохновения.
Линии (метрики) шрифта
Помните тонкую серую рамку вокруг текстового слоя в Sketch или любом другом графическом редакторе?
Почему она именно такого размера, что включает это белое пространство вокруг букв?
Внутри каждого шрифта есть встроенные шрифтовые метрики. Буквы со всеми своими выносными элементами и акцентами упорядочены на пяти базовых линиях шрифта, они же называются метриками (если хотите произвести впечатление). Здесь вам нужно помнить о самой главной базовой линии (baseline), по которой выстраиваются собственно буквы. Также есть линия прописной буквы (x-height), линии верхнего и нижнего выносных элементов (ascender и descender), а также линия заглавной буквы (cap height). И да, ascender может совпадать с cap height, а может быть ниже или даже выше.
Все вместе эти метрики в сумме с заплечиками образуют кегельные площадки для каждой буквы, высота которых и является тем самым кеглем (размером) шрифта в пунктах. Спокойно, заплечики — это всего лишь дополнительное пространство над и под выносными элементыми, которое не позволяет им в разных строках соприкасаться друг с другом (когда вы увеличиваете или уменьшаете высоту строки, вы регулируете высоту заплечиков).
Высоту строки дизайнеры называют интерлиньяжем — это расстояние от базы до базы, т.е. от базовой линии одной строки до базовой линии следующей. Число, которое вы регулируете в редакторе, — это он и есть, интерлиньяж.
“Так что там с рамкой-то в Sketch?” — спросите вы. Чтобы определить размер рамки, которая отображается вокруг текстового слоя на холсте, Sketch учитывает все выше перечисленные метрики вместе с заплечиками, т.е. высоток строки. Именно поэтому высота рамки не совпадает с высотой букв.
Второй интересный момент. Часто в дизайнеров возникает необходимость разместить в одной строке два текстовых блока разных по кеглю и/или по гарнитуре. Графические редакторы автоматически выравняют их по границам их текстовых рамок. Но baseline этих блоков в таком случае могут не совпасть (левая колонка “don’t” на примере ниже). Как быть?
Этот тот случай, когда при принятии решения дизайнеру нужно опираться на оптический результат, нежели на технический. Нужно вручную сдвинуть текстовый слой второго блока так, чтобы baseline совпали (правая колонка “do” на примере ниже).
Когда вам необходимо поместить рядом два текстовых слоя отличных по кеглю и/или гарнитуре, позаботьтесь о том, чтобы они были выронены по baseline, а не по границам рамок.
Бонус: немного о цифрах
Вы уже думали все? Но нет, еще немного ценного материала.
В типографике используются арабские и римские цифры. Если в наборе гарнитуры есть капитель, лучше римские цифры набирать ей.
Арабские цифры бывают двух видов: маюскульные и минускульные.
Маюскульные цифры все одного роста c прописными и моноширинные, поэтому их удобно использовать вне текста, в таблицах.
На самом деле, пользователи не увидят особой разницы в том, какой шрифт вы использовали, с засечками или без, учитывали ли контрастность, им без разницы воспользовались ли вы Arial или Open Sans, выровняли ли шрифты по baseline вручную или воспользовались автоматическим выравниванием. Но есть то, что будет незаметно для них самих влиять на их восприятие,— удобочитаемость, простота считывания, эмоциональный опыт. Хороший визуальный дизайн — это сила, многократно усиливающая хороший UX.
Вникайте в детали, вчитывайтесь в длинные тексты, разбирайтесь и растите. В общем, делайте дизайн качественно — и коллективный дизайнерский разум скажет вам спасибо. Молодцы, что дочитали. Всем добра!
Любите то, чем занимаетесь, и занимайтесь тем, что любите.
Ваша Alexandra Kulikovskaya
Работа со шрифтами в CSS
В этой статье Вы узнаете основную информацию о шрифтах в CSS, а именно: как управлять размером шрифта, его начертанием и жирностью, научитесь подключать безопасные и веб-шрифты, узнаете какие бывают шрифты и где их можно найти. Кроме того, на примере службы Google Fonts подключим веб-шрифты на наши страницы.
Для привлечения внимания посетителей Вашего сайта вы можете придать привлекательный вид текстовому содержимому страниц. Для этих целей в CSS существует большое количество разнообразных свойств форматирования: шрифт текста, его цвет, размер, межстрочный интервал и так далее. В первую очередь рассмотрим методы работы с существующими шрифтами (безопасные веб-шрифты).
Безопасные веб-шрифты
В CSS стиле для выбора типа шрифта применяется свойство font-family, в котором указывается интересующий Вас шрифт. Предположим, что вы хотите применить для абзацев страницы шрифт Courier. В этом случае Вам необходимо будет создать, например, селектор типа и воспользоваться свойством font-family:
Главная особенность данного способа заключается в том, что он будет работать, при условии, что у посетителя установлен подобный шрифт, иначе, страница будет отображена с использованием шрифта «встроенного» в браузер.
Так как вы заранее не знаете, есть у пользователя тот, или иной шрифт, то рекомендуется указывать не только основной шрифт, но и пару запасных (альтернативных) шрифтов, для того случая если у пользователя отсутствует основной шрифт.
Рекомендуется последним в списке шрифтов указывать и семейство шрифта ( generic-family ). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.
Давайте рассмотрим следующий пример:
В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).
Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.
Результат нашего примера:
Рис. 34 Пример использования свойства font-family.
Ниже я перечислю некоторые часто используемые комбинации безопасных веб-шрифтов, которые с большой вероятностью присутствуют на любом компьютере:
| Семейство шрифта ( font-family ) | Пример |
|---|---|
| Arial, Helvetica, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Arial Black», Gadget, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Comic Sans MS», cursive, sans-serif | Съешь же еще этих сочных мандаринов. |
| Impact, Charcoal, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Lucida Sans Unicode», «Lucida Grande», sans-serif | Съешь же еще этих сочных мандаринов. |
| Tahoma, Geneva, sans-serif | Съешь же еще этих сочных мандаринов. |
| «Trebuchet MS», Helvetica, sans-serif | Съешь же еще этих сочных мандаринов. |
| Verdana, Geneva, sans-serif | Съешь же еще этих сочных мандаринов. |
| Семейство шрифта ( font-family ) | Пример |
|---|---|
| Georgia, serif | Съешь же еще этих сочных мандаринов. |
| «Palatino Linotype», «Book Antiqua», Palatino, serif | Съешь же еще этих сочных мандаринов. |
| «Times New Roman», Times, serif | Съешь же еще этих сочных мандаринов. |
| Семейство шрифта ( font-family ) | Пример |
|---|---|
| «Courier New», Courier, monospace | Съешь же еще этих сочных мандаринов. |
| «Lucida Console», Monaco, monospace | Съешь же еще этих сочных мандаринов. |
Типы веб-шрифтов и их поддержка браузерами
Все современные браузеры поддерживают использование определённых веб-шрифтов. Происходит это следующим образом: браузер пользователя загружает шрифт с указанного сервера и применяет его для отображения текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:
| Формат шрифта | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| TTF/OTF (True Type и Open Type Fonts) | 4.0 | 3.5 | 10.0 | 3.1 | 9.0* | 12.0 |
| WOFF (Web Open Font Format) | 5.0 | 3.6 | 11.1 | 5.1 | 9.0 | 12.0 |
| WOFF2 (Web Open Font Format 2) | 36.0 | 39.0* | 26.0 | Нет | Нет | Нет |
| SVG (Scalable Vector Graphic) | 4.0 | Нет | 9.0 | 3.2 | Нет | Нет |
| EOT (Embedded Open Type) | Нет | Нет | Нет | Нет | 6.0 | 12.0 |
Ответственность и поиск веб-шрифтов
Сразу хочу обратить Ваше внимание на то, что многие шрифты создаются с целью заработать на них деньги и соответственно распространяются на коммерческой основе.
Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».
Добавление веб-шрифта на страницу
Для добавления шрифта на страницу Вам необходимо:
Давайте рассмотрим пошаговое подключение сторонних шрифтов, на примере использования службы Google Fonts.
Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.
Еще раз обращаю Ваше внимание, что один файл шрифта содержит:
Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!
Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент
И так, что мы сделали в этом примере:
Результат нашего примера:
Рис.38 Пример использования правила @font-face.
Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):
Как вы можете заметить, для того, чтобы добавить несколько вариантов шрифтов необходимо указать несколько путей к файлам, которые содержат шрифты с определенным разрешением.
Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.
Добавление веб-шрифта со стороннего ресурса
Давайте рассмотрим на примере службы Google Fonts варианты подключения шрифтов к Вашим страницам без загрузки их на Ваш сервер.
Например, меня интересуют следующие:
) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).
При выборе Вам отобразят влияние тех или иных шрифтов на время загрузки страницы. Используя множество стилей шрифтов, может привести к замедлению загрузки Вашей страницы, поэтому рекомендуется выбирать только те шрифты, которые вам действительно необходимы на вашем сайте.
Как вы видите, в ссылке указывается наименование шрифта, толщина шрифта и какой набор символов используется. Если вы внимательно читали статью «Введение в CSS», то Вы уже догадались, что необходимо эту ссылку указать на каждой странице, где необходимо использовать данные шрифты.
Необходимое наименование шрифта и альтернативный вариант так же указывается в описании:
Рассмотрим пример подключения, выбранных нами шрифтов:
Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег ), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.
Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url и заключить путь к CSS файлу в круглые скобки. Допустимо заключить содержимое в скобках в кавычки:
Предлагаемый вариант импортирования на страницу:
Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).
Вы можете использовать правило @import как во внешних таблицах стилей, так и во внутренних. Рассмотрим пример подключения, выбранных нами шрифтов, используя правило @import во внутренних таблицах стилей:
Результат нашего примера:
Рис.46 Пример подключение веб-шрифтов, используя правило @import.
Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.
Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы. Не используйте его в своих проектах.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
Практическое задание № 11.
Если у Вас возникают трудности при подключении шрифтов, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу примера, чтобы понять какой код CSS был использован.
Шрифты и работа с ними — Основы вёрстки контента
Помимо насыщенности, CSS позволяет управлять следующими настройками:
Не пугайтесь такому количеству различных свойств, их необязательно использовать все сразу. Некоторые используются достаточно редко.
Семейство шрифтов
Если у пользователя в системе есть шрифт Georgia, то будет применён он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:
А какой шрифт именно выберет браузер? Тут всё зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:
При указании шрифтов также возможно указать и основное семейство шрифтов. Если ни один из указанных шрифтов не был найден, то браузер подберёт системный шрифт из того семейства, которое было указано. Дополним пример семейством шрифтов по умолчанию. В примере указаны шрифты из семейства антиква, поэтому стоит добавить соответствующее значение.
Всегда указывайте семейство шрифтов по умолчанию. Это считается хорошей практикой, так как не все шрифты могут присутствовать в системе пользователя.
Установка новых шрифтов
Необязательно полагаться только на системные шрифты. В проекте могут использоваться совершенно разные шрифты и верстальщик должен уметь их подключать. Сам по себе шрифт представляет собой файл. Форматов таких файлов может быть несколько и важно знать, какими браузерами они поддерживаются.
Пусть наш проект имеет директорию fonts, внутри которой находятся файлы шрифтов.
Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face :
После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.
Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретёт следующий вид:
Способ хоть и рабочий, но немного сложный. Вместо одного названия шрифта и управления его насыщенностью свойством font-weight приходится указывать три разных названия для каждого начертания в отдельности.
Стиль шрифта
Строчные символы
С помощью CSS можно задать такой вид строчных символов как «Капитель».
Капитель — вид строчных букв, размер которых совпадает (или приближен) к размеру заглавных букв. Такой приём используется в дизайне в виде стилистического оформления. Посмотрите на этот параграф:
Текст с использованием капители
По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.
Межстрочный интервал
Межстрочный интервал, или, как его ещё называют интерлиньяж — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создаётся расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.
Обобщённое правило
Теперь, для работы со шрифтами, вы знаете все основные правила. Это:
Использование одного правила или нескольких
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.