Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clarification for kerning vs spacing/tracking #35579

Closed
herrstrietzel opened this issue Aug 24, 2024 · 2 comments · Fixed by #37712
Closed

Clarification for kerning vs spacing/tracking #35579

herrstrietzel opened this issue Aug 24, 2024 · 2 comments · Fixed by #37712
Labels
Content:CSS Cascading Style Sheets docs help wanted If you know something about this topic, we would love your help!

Comments

@herrstrietzel
Copy link

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning

What specific section or headline is this issue about?

2nd paragraph: "Kerning defines how letters are spaced."

What information was incorrect, unhelpful, or incomplete?

The final letter-spacing relies on

  1. the "basic" metrics of a glyph defined by a kind of bounding box. The left and right padding before and after the actual letter-shape are also referred to as left and right sidebearings
  2. Kerning adds negative or positive offsets to adjust the space between specific letter-pairs (as defined by the designer in the font file)

So we shouldn't use the terms kerning and spacing interchangeably.

What did you expect to see?

Here is a suggestion (similar to the wikipedia explanation):
In typography, kerning refers to the process of adjusting the spacing between certain letter combinations in order to achieve a more visually uniform alignment of the letters.
Font kerning applies to proportional fonts (variable character widths) – monospace fonts don't any kerning as all characters share the same width.

Do you have any supporting links, references, or citations?

The wikipedia entry is quite comprehensible
https://en.wikipedia.org/wiki/Kerning

Do you have anything more you want to share?

No response

MDN metadata

Page report details
@herrstrietzel herrstrietzel added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Aug 24, 2024
@github-actions github-actions bot added the Content:CSS Cascading Style Sheets docs label Aug 24, 2024
@Josh-Cena
Copy link
Member

I think it would be helpful to have a "kerning" glossary entry too. Instead of "Kerning defines how letters are spaced", we can say "Kerning affects how letters are spaced", so we keep what's relevant to developers using this property, and talk about font design in more detail in glossary—what do you think?

@Josh-Cena Josh-Cena added help wanted If you know something about this topic, we would love your help! and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Aug 24, 2024
@herrstrietzel
Copy link
Author

That might be a solution. My main concern is that kerning is frequently used as a synonym for letter spacing in general which leads to some confusing what font-kerning actually does. I think a brief summary in the font-kerning post could be helpful to clarify that kerning affects certain letter combinations (usually pairs but open type also supports multiple contextual kerning rules) the regular letter-spacing is still respected (e.g if "tracking" was increased) - just slightly adjusted by these kerning offsets. BTW. the illustration is perfectly fine as it shows 2 common kerning pairs (AV, Ta).

A more concise explanation could be:

Kerning affects how letters are spaced. In well-kerned fonts, this feature makes character spacing more uniform and pleasant to read by adjusting spacing for certain combinations that would otherwise create a lot of white space

himanshugarg added a commit to himanshugarg/content that referenced this issue Jan 19, 2025
@himanshugarg
Adds Clarification for kerning vs spacing/tracking. Fixes mdn#35579
5511ae6
@himanshugarg himanshugarg mentioned this issue Jan 19, 2025
Merged
estelle added a commit that referenced this issue Jan 27, 2025
@himanshugarg @estelle
Adds Clarification for kerning vs spacing/tracking. Fixes #35579 (#37712
eafbe38 
)

* Adds Clarification for kerning vs spacing/tracking. Fixes #35579

* Update files/en-us/web/css/font-kerning/index.md

Co-authored-by: Estelle Weyl <[email protected]>

---------

Co-authored-by: Estelle Weyl <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Content:CSS Cascading Style Sheets docs help wanted If you know something about this topic, we would love your help!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Adds Clarification for kerning vs spacing/tracking. Fixes #35579 himanshugarg/content
2 participants
@herrstrietzel @Josh-Cena