font-kerning

Включает или выключает кернинг шрифта. Кернинг сближает или раздвигает соседние буквы вроде «AV», «To» и «Wa», чтобы между ними не зияла дыра и слово выглядело с равномерными промежутками.

        
          
          <p class="title">WAVE Toy AVATAR</p>
          <p class="title">WAVE Toy AVATAR</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .title {  font-size: 64px;  font-kerning: none;}
          .title {
  font-size: 64px;
  font-kerning: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Со значением none кернинг выключен, и в парах «WA», «To», «AV» появляются заметные провалы. Включи его обратно — и буквы подберутся друг к другу.

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

В современных браузерах кернинг включён по умолчанию, поэтому отдельно трогать font-kerning нужно редко. Чаще всего к свойству обращаются, чтобы намеренно выключить кернинг или чтобы принудительно включить его там, где браузер решил сэкономить.

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

У свойства три значения.

Значение по умолчанию. Браузер сам решает, где включить кернинг, а где нет. Обычно он включён, но на мелком кегле браузер вправе его отключить ради скорости и читаемости.

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

Кернинг выключен. Буквы встают на стандартные расстояния из шрифта, без парной подстройки.

💡 letter-spacing применяется поверх кернинга и прибавляется к уже подстроенным расстояниям. Если задать заметный трекинг, разница от кернинга растворится в общих промежутках.

💡 Кернинг работает, только если в шрифте есть таблица пар. У некоторых веб-шрифтов и системных гарнитур её нет или она бедная, тогда font-kerning: normal ничего не изменит. Более тонкий контроль над типографикой даёт font-feature-settings с фичей "kern".

💡 Кернинг включается заодно при text-rendering: optimizeLegibility. Если выставил это значение, а потом отключаешь кернинг через font-kerning: none, побеждает font-kerning: оно отвечает за кернинг напрямую.