Odległość między znakami czcionki {font-kerning}
W jaki sposób regulować odległość pomiędzy sąsiednimi znakami tekstu (kerning) tak, aby wyglądał bardziej estetycznie i był czytelniejszy?
selektor { font-kerning: tryb }Natomiast jako "tryb" należy wpisać:
- auto - przeglądarka sama zdecyduje, jaki tryb zastosować (domyślnie) - np. aby poprawić czytelność, może wyłączyć kerning dla małego tekstu
- normal - wymuszenie kerningu
- none - zablokowanie kerningu
Aby tekst wyglądał estetycznie, odległości między wszystkimi sąsiadującymi znakami powinny być podobne. Kształt niektórych par liter powoduje jednak, że kiedy występują obok siebie, stwarzają wrażenie, jakby odstęp pomiędzy nimi był większy niż w rzeczywistości. Typowym przykładem mogą być np. wielkie litery: A V. Ponieważ ich kształt jest komplementarny - odwrócone względem siebie kontury trójkąta - odstęp pomiędzy nimi wydaje się być wyjątkowo duży. W pewnych przypadkach czytelnik mógłby nawet uznać, że wchodzą w skład osobnych wyrazów w tekście.
Kerning to sposób na regulowanie odległości pomiędzy konkretnymi parami znaków w tekście. Dzięki niemu pusta przestrzeń pomiędzy sąsiadującymi znakami wygląda tak samo, chociaż fizycznie odległość między nimi nie musi być taka sama. Zwykle zdanie się tutaj na domyślne działanie przeglądarki jest najlepszym rozwiązaniem. Jednak czasami dla niektórych rodzajów i wielkości czcionek znaki w tekście mogą wydawać się dziwnie nierówno od siebie oddalone albo nieczytelne. Dlatego jeśli domyślny sposób wyświetlania tekstu nas nie satysfakcjonuje, pomocne może być wymuszenie albo zablokowanie kerningu.
font-kerning w odróżnieniu od letter-spacing nie dodaje jednakowego odstępu pomiędzy literami tekstu, ale dopasowuje go w zależności od tego, jakie znaki ze sobą sąsiadują.
Przykład {font-kerning}
Zwróć uwagę, że w pierwszym przypadku poniżej (bez kerningu) pusta przestrzeń pomiędzy literami "AV" powinna wydawać się większa - jeżeli byśmy narysowali linię łączącą prawy-dolny wierzchołek litery "A" z lewym-górnym wierzchołkiem litery "V", to byłaby ona mniej więcej pionowa, podczas gdy w drugim przypadku (z kerningiem) litery te wyraźnie na siebie zachodzą:
Zauważ, że przy zablokowanym kerningu (pierwszy przypadek powyżej) wydaje się, jakby litery "AV" były położone dalej od siebie niż kolejne litery "VX". Tak ułożony tekst z pewnością trudniej się czyta i wygląda mniej estetycznie.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
font-kerning | 33 2014-02-20 | 32 2014-09-02 | 79 2020-01-15 | 20 2014-03-04 | 9 2015-09-30 |