Что такое стиль шрифта

Каскадные таблицы стилей CSS советы & приёмы

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

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

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

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

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

‘sans-serif’: обычные шрифты без засечек

Arial, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Helvetica, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Verdana, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Trebuchet MS, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Gill Sans, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Noto Sans, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Arial Narrow, sans-serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

sans-serif

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

‘serif’: обычные шрифты с засечками

Times, Times New Roman, serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Georgia, serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Palatino, URW Palladio L, serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Bookman, URW Bookman L, serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

New Century Schoolbook, TeX Gyre Schola, serif

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

serif

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

‘monospace’: шрифты фиксированной ширины

Andale Mono, monospace

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Courier New, monospace

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Courier, monospace

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

FreeMono, monospace

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

DejaVu Sans Mono, monospace

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

monospace

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

‘cursive’: шрифты, имитирующие почерк

Comic Sans MS, Comic Sans, cursive

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Bradley Hand, cursive

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Brush Script MT, Brush Script Std, cursive

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Snell Roundhand, cursive

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

URW Chancery L, cursive

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

cursive

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

‘fantasy’: декоративные шрифты, для названий и т.д..

Impact, fantasy

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Luminari, fantasy

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Marker Felt, fantasy

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Trattatello, fantasy

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

fantasy

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

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

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

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

правило

serif

sans-serif

Стили

font-style: normal

Съешь же…

Съешь же…

font-style: italic

Съешь же…

Съешь же…

font-style: oblique

Съешь же…

Съешь же…

Насыщенность шрифта

font-weight: 100

Съешь же…

Съешь же…

font-weight: 200

Съешь же…

Съешь же…

font-weight: 300

Съешь же…

Съешь же…

font-weight: normal

Съешь же…

Съешь же…

font-weight: 500

Съешь же…

Съешь же…

font-weight: 600

Съешь же…

Съешь же…

font-weight: bold

Съешь же…

Съешь же…

font-weight: 800

Съешь же…

Съешь же…

font-weight: 900

Съешь же…

Съешь же…

Варианты

font-variant: normal

Съешь же…

Съешь же…

font-variant: small-caps

Съешь же…

Съешь же…

Растяжение

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

Съешь же…

Съешь же…

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

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

Created 17 Jan 2001;
Last updated Ср 06 янв 2021 05:40:49

Источник

Стиль шрифта

оглавление

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Обычно различают гарнитуры шрифта, отмеченного следующими тремя наградами :

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

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

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

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

Изменение толщины шрифта

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

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

Изменение толщины (ширины символа)

Толщина (ширина) письма влияет на отслеживание шрифта.

описание
Немецкийанглийский
Ультра тонкийСверхконденсированный
Очень тонкийСверхконденсированный
УзкийСжатый, Сжатый, Узкий
ПолуузкийПолуконденсированный
обычныйОбычный
Половина шириныПолурасширенный
ШирокийРасширенный, Расширенный
СверхширокоугольнаяExtra Expanded
Ультра широкийУльтрарасширенный

Вариация письменной позиции

описание
Немецкийанглийский
Нормальный, Обычный (Вертикальный, Прямой )Обычный, Римский, Вертикальный
Курсив («настоящий курсив»)Курсив
Наклонный («ложный курсив»)Косой
НаискосьНаклонный, наклонный римский

Особые формы

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

Смешанные формы

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

Реальные и искусственно созданные стили шрифтов

Источник

Cамый краткий курс по классификации шрифтов

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

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

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

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

Скругление засечек в местах примыкания к основному штриху и наклонная ось овальных элементов, умеренная контрастность. Примеры: Arno Pro, Adobe Garamond, Bembo, Dante, Stempel Garamond, Granjon, Poliphilus, Sabon.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Разница между основными и соединительными линиями в переходной антикве более явная, чем в старом стиле, но менее четкая, чем в антикве нового стиля. Примеры: Times New Roman, Baskerville, Caslon, Georgia и Bookman.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

отличается более сильным контрастом между основными и соединительными линиями, строго вертикальными овалами, тонкими и длинными засечками. Примеры: Didot и Bodoni.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

— брусковая антиква-

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

Это, несомненно, шрифтовой север — минималистичный, четкий, функциональный и прямолинейный, как шкаф из Ikea, не терпящий никаких излишеств, как например засечки антиквы или росчерки рукописных шрифтов. Эти элементы, как атавизм, исчезли за ненадобностью. Гротескные шрифты — это новая история, конструктивизм и Баухаус, космос и компьютеры. Лента Фейсбука — гротескный Gotham. Компании Microsoft, Panasonic и даже NASA используют вездесущую Helvetica.

Переходное звено в шрифтовой эволюции от антиквы до гротеска, буквы с небольшим контрастом. Примеры: Franklin Gothic и Akzidenze Grotesk.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Самые нейтральные, одноширинные шрифты почти без контраста. Примеры: MS Sans Serif, Arial, Helvetica и Univers.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Имеют большую контрастность в толщине штрихов. И гуманистическими они названы не случайно, а потому что напоминают рукописные (пером). Примеры: Gill Sans, Frutiger, Tahoma, Verdana, Optima, и Lucide Grande.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Как ясно из названия, строятся на основе геометрических форм. Пример: Futura и Geometria.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

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

— формальные рукописные-

чаще всего курсив, с большим количеством вензелей, эдакое шрифтовое барокко. Примеры: Kuenstler sсript.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

— неформальные рукописные-

Не такие старомодные как формальные и в принципе, похожи на большинство почерков современного человека, не обладающего каллиграфическим навыком. Примеры: Mistral и Brush sсript.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Стиль: декоративный, народный, фантазийный. Применение: реклама, вывески, логотипы, заголовки.

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

Источник

Что такое типографика и какие шрифты использовать на сайте

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

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

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

Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

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

Как подбирать шрифты на сайт

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

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

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

Классификация шрифтов

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

Что такое гарнитура

Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

Выбор размеров шрифта

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.

Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.

Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.

Нормальный текст: 18px

Заголовок 4: 18х1,6 = 27px.

Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:

Заголовок 3: 27х1,6 = 40px.

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

Сочетание шрифтов

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

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

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

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

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.

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

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

Бесплатные

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

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

Платные

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

Больше о типографике и шрифтах

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

Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:

Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.

Что такое стиль шрифта. Смотреть фото Что такое стиль шрифта. Смотреть картинку Что такое стиль шрифта. Картинка про Что такое стиль шрифта. Фото Что такое стиль шрифта

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *