I'm sure most of you have at least subconsciously noticed that when aligning heading to a layout edge or another element, text always appears slightly indented. This is indistinguishable on smaller font sizes, but starts to be noticeable especially on bigger sans-serif font sizes.

This has been discussed in the internet without any proper solutions. There's even a W3C CSS proposal from 2014 for "font-side-bearings: trimmed" that has remained stale. https://lists.w3.org/Archives/Public/www-style/2014Jan/0242....

This npm-package 'sidebearing-trim' fixes the issue. By extracting .woff font metrics we're detecting starting characters of the visual lines and shift each row by exactly the sidebearing value of its first glyph.

This is my first npm package so please expect it to be still rough around the edges. Happy to hear your feedback!