80% контента в вебе — это текст. Хорошая типографика — это когда читатель не думает о шрифте, потому что всё читается естественно и удобно. Плохая — когда глаз спотыкается о мелкий кегль, слишком тонкую линию или неудобный межстрочный интервал.
body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}Это стек шрифтов: браузер пробует каждый по очереди и использует первый доступный. sans-serif в конце — универсальный запасной вариант.
Системные шрифты (не нужна загрузка):
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Это стек системных шрифтов: SF Pro на Mac/iOS, Segoe на Windows, Roboto на Android */Google Fonts (подключи через <link> в HTML, потом используй):
font-family: 'Roboto', sans-serif;
font-family: 'Montserrat', sans-serif;/* Пиксели — фиксированный размер */
font-size: 16px; /* Стандарт для основного текста */
font-size: 14px; /* Мелкий текст (подписи, метки) */
font-size: 32px; /* Крупный заголовок */
/* em — относительно родителя */
.card { font-size: 16px; }
.card .label { font-size: 0.875em; } /* = 14px (16 × 0.875) */
/* rem — относительно корневого элемента (html) */
html { font-size: 16px; } /* или 62.5% для удобного rem-расчёта */
h1 { font-size: 2rem; } /* = 32px */
p { font-size: 1rem; } /* = 16px */
small { font-size: 0.875rem; } /* = 14px */Почему rem лучше px для доступности: пользователь может увеличить базовый размер в браузере, и rem масштабируется вместе с ним, а px — нет.
font-weight: 400; /* Normal — обычный текст */
font-weight: 500; /* Medium */
font-weight: 600; /* Semibold — часто используется для подзаголовков */
font-weight: 700; /* Bold — жирный */
font-weight: 900; /* Black — очень жирный */
font-weight: normal; /* = 400 */
font-weight: bold; /* = 700 */font-style: normal; /* Обычный */
font-style: italic; /* Курсив */line-height: 1.5; /* Рекомендуется для основного текста */
line-height: 1.2; /* Для заголовков */
line-height: 2; /* Широкий интервал */
line-height: 24px; /* Фиксированный (хуже — не масштабируется) */Без единиц — лучший вариант: 1.5 означает «в 1.5 раза больше размера шрифта».
letter-spacing: 0.05em; /* Чуть шире — кнопки, навигация */
letter-spacing: -0.02em; /* Чуть уже — крупные заголовки */
letter-spacing: 0.15em; /* Широко — ВЕРХНИЙ РЕГИСТР */text-align: left; /* По левому краю (умолчание для LTR) */
text-align: center; /* По центру — заголовки, кнопки */
text-align: right; /* По правому краю — числа в таблицах */
text-align: justify; /* По ширине — не используй в вебе, выглядит плохо */text-decoration: none; /* Убрать подчёркивание у ссылок */
text-decoration: underline; /* Подчёркивание */
text-decoration: line-through; /* Перечёркивание — старая цена */text-transform: uppercase; /* ВСЁ ПРОПИСНЫМИ */
text-transform: lowercase; /* всё строчными */
text-transform: capitalize; /* Каждое Слово С Заглавной */
text-transform: none; /* Как написано */Ошибка 1: Слишком мелкий текст
font-size: 11px; /* Плохо — трудно читать */
font-size: 14px; /* Минимум для вторичного текста */
font-size: 16px; /* Стандарт для основного текста */Ошибка 2: Перегруженный font-weight
/* Не все шрифты имеют все веса. Inter имеет 100-900, а Arial только 400 и 700 */
font-family: Arial; font-weight: 300; /* Arial нет 300, браузер возьмёт ближайший */Ошибка 3: Фиксированный line-height в пикселях
line-height: 20px; /* При font-size: 32px будет некрасиво */
line-height: 1.5; /* Всегда правильный интервал */Хорошая типографика строится на 2-3 шрифтах максимум. Обычно: один шрифт для заголовков, другой для основного текста. Популярная пара: Montserrat + Open Sans, или просто системный шрифт для быстрой загрузки.
Tailwind задаёт типографику утилитами: text-lg, font-semibold, leading-relaxed — под каждой скрыт обычный CSS.
Типографические свойства CSS через JavaScript
// Настраиваем полную типографику для статьи
const article = document.createElement('article')
document.body.appendChild(article)
// Заголовок статьи
const h1 = document.createElement('h1')
h1.textContent = 'Как работает CSS-типографика'
h1.style.fontFamily = 'Georgia, serif'
h1.style.fontSize = '32px'
h1.style.fontWeight = '700'
h1.style.lineHeight = '1.2'
h1.style.letterSpacing = '-0.02em'
article.appendChild(h1)
// Подзаголовок
const h2 = document.createElement('h2')
h2.textContent = 'ФОРМАТЫ ШРИФТОВ'
h2.style.fontFamily = 'Arial, sans-serif'
h2.style.fontSize = '12px'
h2.style.fontWeight = '600'
h2.style.letterSpacing = '0.15em'
h2.style.textTransform = 'uppercase'
h2.style.color = '#888'
article.appendChild(h2)
// Основной текст
const p = document.createElement('p')
p.textContent = 'Типографика — это искусство настройки шрифтов для удобного чтения.'
p.style.fontFamily = '-apple-system, BlinkMacSystemFont, Arial, sans-serif'
p.style.fontSize = '16px'
p.style.fontWeight = '400'
p.style.lineHeight = '1.6'
p.style.color = '#333'
article.appendChild(p)
// Цена со скидкой
const price = document.createElement('span')
price.textContent = '2 490 ₽'
price.style.textDecoration = 'line-through'
price.style.color = '#999'
price.style.fontSize = '14px'
const sale = document.createElement('span')
sale.textContent = ' 1 490 ₽'
sale.style.fontWeight = '700'
sale.style.fontSize = '20px'
sale.style.color = '#e53e3e'
const priceBlock = document.createElement('div')
priceBlock.appendChild(price)
priceBlock.appendChild(sale)
article.appendChild(priceBlock)
// Читаем вычисленные стили
const h1Style = window.getComputedStyle(h1)
console.log('H1 font-size:', h1Style.fontSize) // 32px
console.log('H1 font-weight:', h1Style.fontWeight) // 700
console.log('H1 line-height:', h1Style.lineHeight) // 38.4px (32 * 1.2)
const pStyle = window.getComputedStyle(p)
console.log('P font-size:', pStyle.fontSize) // 16px
console.log('P line-height:', pStyle.lineHeight) // 25.6px (16 * 1.6)
const h2Style = window.getComputedStyle(h2)
console.log('H2 letter-spacing:', h2Style.letterSpacing) // 1.8px (12 * 0.15)80% контента в вебе — это текст. Хорошая типографика — это когда читатель не думает о шрифте, потому что всё читается естественно и удобно. Плохая — когда глаз спотыкается о мелкий кегль, слишком тонкую линию или неудобный межстрочный интервал.
body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}Это стек шрифтов: браузер пробует каждый по очереди и использует первый доступный. sans-serif в конце — универсальный запасной вариант.
Системные шрифты (не нужна загрузка):
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Это стек системных шрифтов: SF Pro на Mac/iOS, Segoe на Windows, Roboto на Android */Google Fonts (подключи через <link> в HTML, потом используй):
font-family: 'Roboto', sans-serif;
font-family: 'Montserrat', sans-serif;/* Пиксели — фиксированный размер */
font-size: 16px; /* Стандарт для основного текста */
font-size: 14px; /* Мелкий текст (подписи, метки) */
font-size: 32px; /* Крупный заголовок */
/* em — относительно родителя */
.card { font-size: 16px; }
.card .label { font-size: 0.875em; } /* = 14px (16 × 0.875) */
/* rem — относительно корневого элемента (html) */
html { font-size: 16px; } /* или 62.5% для удобного rem-расчёта */
h1 { font-size: 2rem; } /* = 32px */
p { font-size: 1rem; } /* = 16px */
small { font-size: 0.875rem; } /* = 14px */Почему rem лучше px для доступности: пользователь может увеличить базовый размер в браузере, и rem масштабируется вместе с ним, а px — нет.
font-weight: 400; /* Normal — обычный текст */
font-weight: 500; /* Medium */
font-weight: 600; /* Semibold — часто используется для подзаголовков */
font-weight: 700; /* Bold — жирный */
font-weight: 900; /* Black — очень жирный */
font-weight: normal; /* = 400 */
font-weight: bold; /* = 700 */font-style: normal; /* Обычный */
font-style: italic; /* Курсив */line-height: 1.5; /* Рекомендуется для основного текста */
line-height: 1.2; /* Для заголовков */
line-height: 2; /* Широкий интервал */
line-height: 24px; /* Фиксированный (хуже — не масштабируется) */Без единиц — лучший вариант: 1.5 означает «в 1.5 раза больше размера шрифта».
letter-spacing: 0.05em; /* Чуть шире — кнопки, навигация */
letter-spacing: -0.02em; /* Чуть уже — крупные заголовки */
letter-spacing: 0.15em; /* Широко — ВЕРХНИЙ РЕГИСТР */text-align: left; /* По левому краю (умолчание для LTR) */
text-align: center; /* По центру — заголовки, кнопки */
text-align: right; /* По правому краю — числа в таблицах */
text-align: justify; /* По ширине — не используй в вебе, выглядит плохо */text-decoration: none; /* Убрать подчёркивание у ссылок */
text-decoration: underline; /* Подчёркивание */
text-decoration: line-through; /* Перечёркивание — старая цена */text-transform: uppercase; /* ВСЁ ПРОПИСНЫМИ */
text-transform: lowercase; /* всё строчными */
text-transform: capitalize; /* Каждое Слово С Заглавной */
text-transform: none; /* Как написано */Ошибка 1: Слишком мелкий текст
font-size: 11px; /* Плохо — трудно читать */
font-size: 14px; /* Минимум для вторичного текста */
font-size: 16px; /* Стандарт для основного текста */Ошибка 2: Перегруженный font-weight
/* Не все шрифты имеют все веса. Inter имеет 100-900, а Arial только 400 и 700 */
font-family: Arial; font-weight: 300; /* Arial нет 300, браузер возьмёт ближайший */Ошибка 3: Фиксированный line-height в пикселях
line-height: 20px; /* При font-size: 32px будет некрасиво */
line-height: 1.5; /* Всегда правильный интервал */Хорошая типографика строится на 2-3 шрифтах максимум. Обычно: один шрифт для заголовков, другой для основного текста. Популярная пара: Montserrat + Open Sans, или просто системный шрифт для быстрой загрузки.
Tailwind задаёт типографику утилитами: text-lg, font-semibold, leading-relaxed — под каждой скрыт обычный CSS.
Типографические свойства CSS через JavaScript
// Настраиваем полную типографику для статьи
const article = document.createElement('article')
document.body.appendChild(article)
// Заголовок статьи
const h1 = document.createElement('h1')
h1.textContent = 'Как работает CSS-типографика'
h1.style.fontFamily = 'Georgia, serif'
h1.style.fontSize = '32px'
h1.style.fontWeight = '700'
h1.style.lineHeight = '1.2'
h1.style.letterSpacing = '-0.02em'
article.appendChild(h1)
// Подзаголовок
const h2 = document.createElement('h2')
h2.textContent = 'ФОРМАТЫ ШРИФТОВ'
h2.style.fontFamily = 'Arial, sans-serif'
h2.style.fontSize = '12px'
h2.style.fontWeight = '600'
h2.style.letterSpacing = '0.15em'
h2.style.textTransform = 'uppercase'
h2.style.color = '#888'
article.appendChild(h2)
// Основной текст
const p = document.createElement('p')
p.textContent = 'Типографика — это искусство настройки шрифтов для удобного чтения.'
p.style.fontFamily = '-apple-system, BlinkMacSystemFont, Arial, sans-serif'
p.style.fontSize = '16px'
p.style.fontWeight = '400'
p.style.lineHeight = '1.6'
p.style.color = '#333'
article.appendChild(p)
// Цена со скидкой
const price = document.createElement('span')
price.textContent = '2 490 ₽'
price.style.textDecoration = 'line-through'
price.style.color = '#999'
price.style.fontSize = '14px'
const sale = document.createElement('span')
sale.textContent = ' 1 490 ₽'
sale.style.fontWeight = '700'
sale.style.fontSize = '20px'
sale.style.color = '#e53e3e'
const priceBlock = document.createElement('div')
priceBlock.appendChild(price)
priceBlock.appendChild(sale)
article.appendChild(priceBlock)
// Читаем вычисленные стили
const h1Style = window.getComputedStyle(h1)
console.log('H1 font-size:', h1Style.fontSize) // 32px
console.log('H1 font-weight:', h1Style.fontWeight) // 700
console.log('H1 line-height:', h1Style.lineHeight) // 38.4px (32 * 1.2)
const pStyle = window.getComputedStyle(p)
console.log('P font-size:', pStyle.fontSize) // 16px
console.log('P line-height:', pStyle.lineHeight) // 25.6px (16 * 1.6)
const h2Style = window.getComputedStyle(h2)
console.log('H2 letter-spacing:', h2Style.letterSpacing) // 1.8px (12 * 0.15)Напиши HTML-страницу с типографикой для профиля пользователя. Заголовок h2 "МОЙ ПРОФИЛЬ" — font-size: 24px, font-weight: 600, letter-spacing: 0.05em, text-transform: uppercase, color: #1a202c. Абзац с описанием — font-size: 16px, line-height: 1.6, color: #4a5568. Метка с ценой — font-weight: 700, font-size: 20px, color: #e53e3e, с зачёркнутой старой ценой рядом.
font-size: 24px, font-weight: 600, letter-spacing: 0.05em, text-transform: uppercase, color: #1a202c. Для абзаца: font-size: 16px, line-height: 1.6, color: #4a5568. Для цены: font-size: 20px, font-weight: 700, color: #e53e3e. Старая цена: text-decoration: line-through.