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

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

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

<img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами" aria-hidden="true">

Трюк. Разместите поверх картинки визуально скрытый «честный» заголовок. Поставьте текст как можно точнее по картинке, чтобы выделение текста курсором выглядело адекватно.

<div class="fakeHeading">
  <!-- По возможности используйте СВГ, он почти ничего не весит и не мылится при масштабировании -->
  <img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами" aria-hidden="true">

  <h1 class="fakeHeadingHidden">
    Переговоры <br>
    и отношения <br>
    с клиентами
  </h1>
</div>
.fakeHeading {
  max-width: 100%;
  position: relative;
  overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}

.fakeHeadingImg {
  display: block;
  width: 100%;
}

.fakeHeadingHidden {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5vw;

  /* Подгоняем текст по к картинке */
  margin: 0;
  text-transform: uppercase;
  font-size: 12.2vw;
  line-height: 1.05;
}
Переговоры
и отношения
с клиентами

И скройте текст, сделав его прозрачным.

<div class="fakeHeading">
  <!-- По возможности используйте СВГ -->
  <img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами" aria-hidden="true">

  <h1 class="fakeHeadingHidden">
    Переговоры <br>
    и отношения <br>
    с клиентами
  </h1>
</div>
.fakeHeading {
  max-width: 100%;
  position: relative;
  overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}

.fakeHeadingImg {
  display: block;
  width: 100%;
}

.fakeHeadingHidden {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5vw;
  color: transparent;

  /* Подгоняем текст по к картинке */
  margin: 0;
  text-transform: uppercase;
  font-size: 12.2vw;
  line-height: 1.05;
}
Переговоры
и отношения
с клиентами

Этот трюк иногда может сэкономить кучу времени и нервов, без потери качества страницы. А ещё может сэкономить деньги: веб‑лицензия на шрифт обычно дороже и заморочнее, чем десктопная.

Опасность. Используйте трюк исключительно для дублирования текста, содержащегося на картинке. Намеренное скрытие текста от пользователей называется гостингом (ghosting) и сурово наказывается поисковиками, вплоть до исключения сайта из поисковой выдачи.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы