Текст и все с ним связанное

Текст

Читаемость

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

Визуальная иерархия

заголовки, акцентные элементы и цветовые различия помогают пользователю быстро воспринимать информацию

Эстетика и брендирование

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

Этапы обработки текста в браузере

  1. Парсинг HTML → создаётся DOM (структура документа).
  2. Загрузка и обработка CSS → формируется CSSOM (CSS Object Model).
  3. Объединение DOM + CSSOM → создаётся рендер-дерево.
  4. Размещение элементов на странице (layout).
  5. Растеризация и отображение текста на экране.

CSS Object Model

модель, представляющая CSS-стили на веб-странице как объектную структуру, доступную для программирования

Наследование и каскадность свойств текста

Некоторые свойства CSS могут наследоваться дочерними элементами

Наследуемые

  • color
  • font-family
  • visibility
  • cursor

Ненаследуемые

  • margin
  • padding
  • border
  • background

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

p {
  font-size: 18px;
}
Весь текст в body (включая p) будет navy, но размер font-size в p нужно задавать отдельно

Принудительное наследование

Если свойство не наследуется, но его нужно передать дочерним элементам, то можно использовать inherit 


p {
  all: inherit;
}

Прекращение наследования

Чтобы сбросить стиль, используется:

initial

значение по умолчанию браузера

unset

сброс к inherit или initial


p {
  color: initial; /* сбросит цвет к черному */
}

Единицы измерения шрифтов

Относительные

  • em (размер шрифта родительского элемента)
  • rem (размер шрифта корневого элемента ( html ))
  • % (размер шрифта родительского элемента)

Абсолютные

  • px (пиксели)
  • pt (пункты)
  • pc (пика)

Адаптивные

  • vw (ширине области просмотра)
  • vh (высота области просмотра)
  • ch (ширине символа "0")

Абсолютные единицы измерения

задают фиксированный размер, который не зависит от других факторов, таких как настройки браузера или размер экрана

Хорошо подходят для разработки статичного интерфейса

Пиксели

px

задают фиксированный размер шрифта

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

p {
  font-size: 16px;
}
  • Простота и предсказуемость
  • Текст всегда будет одинакового размера
  • Не адаптируется к изменению масштаба страницы
  • Не очень гибко при работе с респонсивным дизайном

Пункты

pt

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

1 пункт равен 1/72 дюйма

h1 {
  font-size: 12pt;
}
  • Применяется в печатных документах и типографике
  • Подходит в основном для печатных материалов

Пика

pc

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

1 пика равен 12 пунктам (или 1/6 дюйма) 

h1 {
  font-size: 1pc;
}
  • Применяется в печатных документах и типографике
  • Подходит в основном для печатных материалов
  • Не используется в вебе

Относительные единицы измерения

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

Позволяет создавать адаптивые и респонсив сайты

Em

em

зависит от размера шрифта родительского элемента

1em равен текущему размеру шрифта элемента 

div {
  font-size: 2em; /* x2 от родители */
}
  • Гибкость при наследовании
  • Позволяет создавать иерархию размеров шрифтов
  • Может стать сложным в управлении, если используются множественные вложенные элементы

Root em

rem

основывается на размере шрифта корневого элемента (обычно это <html>)

1rem равен изначальному значению заданному в <html> (16px) 

html {
font-size: 16px; /* Базовый размер шрифта */
}

h1 {
  font-size: 2rem;  /* 2 * 16px = 32px */
}
  • Удобно для респонсивного дизайна
  • Нужно следить за базовым размером шрифта на html или body

Проценты

%

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

100% равен родительскому размеру шрифта 

div {
  font-size: 150%;  /* 150% от размера шрифта родительского элемента */
}
  • изменения могут иметь неожиданный кумулятивный эффект

Относительные цифровые единицы измерения

vw

viewport width

Единица измерения, основанная на ширине области просмотра. 1vw равен 1% от ширины окна браузера

100vw - вся ширина экрана

div {
  width: 50vw;
}
  • подходит для адаптивного дизайна (при установке размера элементов width , height )
  • Следует избегать когда используете для размера текста, padding, margin

vh

viewport height

Единица измерения, основанная на высоте области просмотра. 1vh равен 1% от высоты окна браузера

100vw - вся ширина экрана

div {
  width: 50vw;
}
  • подходит для адаптивного дизайна (при установке размера элементов width , height )
  • Следует избегать когда используете для размера текста, padding, margin

ch

character

Единица измерения, равная ширине символа "0" в текущем шрифте 


div {
  width: 20ch; /* Ширина, равная ширине 20 символов "0" */
}
  • Удобно задавать фиксированное количество символов
  • Работает только для шрифтов с моноширинными символами

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

font-family

группа шрифтов, имеющих схожие стилистические характеристики

Шрифтовые группы

Serif

Sans-serif

Monospace

Cursive

Fantasy


body {
    font-family: "Roboto", "Helvetica", sans-serif;
}

h1 {
    font-family: "Georgia", "Times New Roman", serif;
}

Serif

засечковые шрифты

Serif-шрифты отличаются наличием небольших «хвостиков» (засечек) на концах букв

помогают глазу легче следовать за строкой

Например: Times New Roman , Georgia , Garamond , Palatino Linotype

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

Sans-serif

без засечек

Sans-serif-шрифты не имеют засечек, из-за чего выглядят более современно, минималистично

Например: Arial , Helvetica , Verdana , Roboto

  • В веб-интерфейсах и приложениях
  • Для заголовков и кратких текстов
  • В адаптивных дизайнах
  • В книгах и длинных статьях
  • В дизайнах, требующих классического стиля

Monospace

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

каждая буква занимает одинаковое пространство

Например: Courier New , Consolas , Fira Code , Source Code Pro

  • В коде, терминалах, консоли
  • В таблицах с выравниванием символов
  • В местах, где важна точная ширина символов
  • Для обычного текста – плохо читается в больших объемах
  • В В дизайнах, где важна эстетика
В шрифтах семе й ства monospace Lorem ipsum do l or sit amet, consectetur

й - 14 символ l - 14 символ
В шрифтах семе й ства monospace Lorem ipsum do l or sit amet, consectetur

cursive

рукописные шрифты

шрифты имитируют рукописный стиль, придавая тексту неформальный или художественный вид

Например: Comic Sans , Brush Script MT , Dancing Script , Pacifico

  • В логотипах, заголовках, декоративных элементах
  • В дизайнах, где требуется рукописный стиль
  • В длинных текстах
  • В UI-дизайнах

fantasy

декоративные шрифты

Fantasy-шрифты предназначены для декоративных целей

Например: Impact , Papyrus , Jokerman

  • В логотипах и заголовках
  • В текстах

Serif - лучше для длинных текстов

Sans-serif - удобнее в интерфейсах

Monospace - подходит для кода

Cursive - создаёт рукописный эффект

Fantasy - используется в специфичных случаях

Установка шрифтов в CSS

Свойство font-family

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

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

p {
    font-family: "Arial", "Helvetica", sans-serif;
}
  • Всегда указывайте резервный вариант шрифта
  • Используйте кавычки для шрифтов из нескольких слов: "Times New Roman"
  • Предпочтительно ставить семейство шрифтов в конце, например, sans-serif или serif

Источники шрифтов

Встроенные (системные) шрифты

Некоторые шрифты уже установлены на большинстве устройств

Источники шрифтов

Пользовательские шрифты

Чтобы использовать шрифт, которого нет на устройстве пользователя, его можно загрузить с сервера с помощью @font-face 


@font-face {
    font-family: "CustomFont";
        src: url("fonts/customfont.woff2") format("woff2"),
        url("fonts/customfont.woff") format("woff");
}

h1 {
    font-family: "CustomFont", sans-serif;
}
  • WOFF2 основной формат
  • Добавляйте несколько форматов для кросс-браузерности
  • Старайтесь сжимать шрифты, чтобы уменьшить время загрузки страницы

Источники шрифтов

Внешние шрифты (например Google Fonts)

Google Fonts предоставляет бесплатные веб-шрифты, которые можно легко подключить через CSS

Источники шрифтов

Внешние шрифты (например Google Fonts)

Способы подключения

Через HTML
index.html 

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

styles.css 

body {
  font-family: "Roboto", sans-serif;
}

Источники шрифтов

Внешние шрифты (например Google Fonts)

Способы подключения

Через CSS
styles.css 

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: "Roboto", sans-serif;
}

Настройки шрифтов

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

font-size

font-size: 3rem;

Наклон

font-style

font-style: italic;

Интервалы между буквами

letter-spacing

letter-spacing: 6px;

Высота строки

line-height

line-height: 1.5;
Может указываться как абсолютное значение ( px , rem и тд), так и коэффициент (обычно от 1.4 - 1.6 )

Настройки шрифтов

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

word-spacing

word-spacing: 3rem;

Отступ первой строки

text-indent

text-indent: 2rem;

Управление пробелами и переносами

white-space

white-space: pre-wrap;

Высота строки

word-break

word-break: break-all;

Жирность

font-weight

font-weight: 100;
Ключевое слово Числовое значение
thin 100
extra-light 200
light 300
normal 400
medium 500
semi-bold 600
bold 700
extra-bold 800
black 900

Не все шрифты поддерживают все уровни толщины

Например, если у шрифта есть только 400 и 700, браузер просто выберет ближайший доступный вариант если задать 600

Трансформация текста

Выравнивание

text-align

text-align: right;

Изменение кейса

text-transform

text-transform: capitalize;

Декорирование

text-decoration

text-decoration: overline;

Тень

text-shadow

text-shadow: 5px 5px #558abb;

Трансформация текста

Переносдлинныхслов

overflow-wrap

overflow-wrap: break-word;

Изменение кейса Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus...

text-overflow

text-overflow: ellipsis;