[CSS] 'fi' letter-spacing ligature(합자) 이슈

letter-spacing 을 쓰다가 이상한 글자를 발견했다. fi 가 떨어지지 않고 계속 붙어있는 것이다. Sketch에서도 이와 같은 이슈가 있었다는 걸 알았는데, CSS에서도 동일한 현상이 발견되었다. 근본적인 원인은 fi 은 ligature(합자)여서 한글의 ㅃ과 같이 한 글자로 인식하는 것이었다. 모든 폰트에서는 발생하는 것은 아니고 'Roboto Condensed'를 사용했을 때 발생했다.

ligature(합자)

① 두 글자 또는 세 글자를 합하여 한 글자로 만드는 것. 현대 한글 활자꼴의 ‘ㅃ ’의 경우 세로줄기 하나가 생략되어 사용되는 경우가 있는데 이런 경우를 이음자라 한다. 로마글의 리가츄어(ligature).

② 둘 이상의 글자를 합하여 하나로 주조한 활자를 말하며, 구문 활자에는 fi, ff, ffi, ffl, Æ, Œ 등의 로만, 이탤릭체의 2서체, 합계 18종에 스몰캡 Æ, Œ을 합하여 합계 20종이 있다. 홀소리를 합쳐 만든 합자는 중모음 활자라 하여 다른 활자와 구별하기도 한다. 한글의 경우 세로줄기 하나를 생략한 ‘ㅃ’자가 여기에 속한다.

[네이버 지식백과] 합자 [ligature] (한글글꼴용어사전, 2000. 12. 25., 세종대왕기념사업회)

See the Pen [CSS] font-feature-settings: "liga" 0; by zinee (@zineeworld) on CodePen.

p { font-feature-settings: "liga" 0;" }

https://www.quora.com/Why-does-letter-spacing-not-work-on-the-letters-fi-in-CSS