design-system
design-system copied to clipboard
equinor
Compact kerning on font is hard to read for some character combinations
I got a question from a user if there was any way to fix the issue with kerning when using some character combinations.
In this example, the word sapien, the a and p are kinda mushed together.
Kerning on (default)
Kerning off
A thorough review of the font is necessary to adjust kerning since it's only a problem in some combinations as a and p. If letter-spacing is used, it will in most cases only make readability worse because of an increased tracking to the rest of the word.
I don’t recommend turning off kerning, that causes problems with character-combinations such as VA, LT etc. The problem is that the kerning table in the Equinor type is not very good. In the Communcation Toolbox (under «Typesetting») they say that «tracking (letter spacing) is set at the designer’s discretion but kerning should be set to ‘optical’.». Optical kerning is a feature in InDesign, Illustrator and Photoshop where the shape of each character is analysed by the software to determine the optimal kerning – but there are no such features in CSS unfortunately.
In CSS there’s auto, normal or none – where auto is the default. According to MDN auto leaves it up to the browser to decide if kerning should be used or not, and might be disabled when using small text to increase legibility.
Since text-rendering engines vary between OS-es and browsers, it’s hard to come up with a recipe that works in all cases. There are some non-standard css properties that can be used to increase legibility, but they should be used cautiously:
.myApp {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
See caniuse.com for other text-rendering and font-smoothing values.
All this being said, I think if there’s lots of issues with this type as being suggested by someone in our Slack-channel, then we should ask CCOM if it can be fixed.
