Самый простой способ в этом случае — взять готовый типограф на Яваскрипте и оттипографить заголовки «на клиенте», в браузере пользователя. Для этого нужно подключить библиотеку с типографом и пройтись им по заголовкам:
<body>
<!-- ... -->
<!-- Подключаем библиотеку с типографом -->
<script src="https://cdn.jsdelivr.net/npm/typograf@6.7.4/dist/typograf.min.js"></script>
<script>
(function() {
var typograf = new Typograf({ locale: ['ru'] })
// Выбираем, что будем типографить
var nodes = document.querySelectorAll('h1, h2, h3, h4')
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i]
// Типографим каждый найденный заголовок
node.innerHTML = typograf.execute(node.innerHTML)
}
})()
</script>
</body>
У этого способа есть недостаток: чем больше текста типографится, тем медленнее отображается сайт при загрузке. Поэтому советую использовать его как крайнюю меру, а в остальных случаях — типографить текст на сервере.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.