</> Praktum

Главная / CSS / CSS text-transform

Справочник · CSS

text-transform: регистр без правки HTML

Свойство меняет вид букв, а не текст в разметке. Копирование может забрать уже изменённый регистр.

Как это работает

uppercase делает заглавные, lowercase — строчные, capitalize — заглавную у каждого слова. Для русского интерфейса capitalize часто выглядит хуже, чем просто нормальный заголовок. Не набирай в HTML заголовок капсом «на всякий случай»: если дизайн изменится, текст придётся переписывать.

.kicker { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }

Когда использовать

Короткие метки вроде «HTML» и «урок». Предложения и кнопки с обычной фразой не кричи заглавными.

Частые ошибки

  • Целая кнопка написана капсом и плохо читается.
  • В HTML уже были заглавные, а CSS удвоил эффект.
  • Длинный абзац превращён в uppercase.

Попробуй

Сделай мелкую подпись над заголовком заглавными буквами только стилем.

Ещё в разделе CSS