column-ruleの線は隙間の中央に描かれます。線がcolumn-gapより太いと、はみ出した部分がそのままコンテンツに重なってしまいます。

スライダーでcolumn-gapを狭くしてみてください。16pxを下回ったあたりから、線がテキストに食い込んでいきます。

線とテキストのあいだの間隔は、実質(column-gap - column-rule-width) / 2です。ですので、column-gapとcolumn-rule-widthはセットで管理するのが安全です。