작성일자
카테고리 CSS/CSS기초

우리가 사는 세상은 폰트와 관련하여 두가지 미디어로 분류됩니다. 하나는 인쇄물을 통한 미디어이고 다른 하나는 웹을 통한 미디어입니다. 인쇄물을 통한 미디어는 주로 명조체를 사용하고 웹에서는 고딕체를 사용합니다. 다 이유가 있더군요. 우선 폰트를 구분하는 명조체와 고딕체, 이에 더하여 자유체에 대해 알아보겠습니다.


폰트와 관련하여 동일한 의미의 많은 용어가 있습니다. 폰트는 영어이고 한글로는 가장 많이 사용하는 것이 한글인 "글꼴"이 있고 한문으로는 "서체(書體)"가 있으며 영어를 많이 사용하다보니 글꼴이라는 순수 한글로 사용하는 이도 많습니다. 제 경우는 폰트라는 단어가 익숙하기 때문에 책에서도 폰트라는 단어를 사용하지만 출판사에서 리뷰할 때는 글꼴로 전환하려고 해서 의견 충돌이 자주 있습니다. 제 경우는 순수 우리말도 좋지만 가독의 흐름 상 폰트를 사용할 것을 주장하고 있는 상황입니다.


고딕은 영어로 Gothic이며 고딕이라는 말은 서양에서 중세 시대의 고딕 양식에서 비롯됐는데 영어로 Gothic font로 검색하면 우리가 쓰는 고딕체와는 전혀 관련이 없습니다. 오히려 전혀 다른 형태의 폰트가 검색됩니다.



그러니 외국을 대상으로 고딕체라고 말하면 전혀 알아듣지 못하는 것이고 우리나라에서 사용하는 고딕체는 Sans Serif 폰트라고 해야 합니다. Sans는 무엇이 없다는 의미의 접두어이므로 세리프가 없는 폰트를 의미합니다. Serif는 폰트의 장식을 위해 글자의 끝 부분에 가로나 세로로 늘어진 부분을 의미합니다.



이러한 세리프는 글자의 장식뿐만 아니라 글자를 명확하게 보이도록 하는 역할을 하므로 서체로 많이 사용합니다. 하지만 웹에서는 이런 세리프 폰트를 볼 수가 없습니다. 그 이유는 웹은 픽셀로 표현되므로 세밀한 부분까지 자세히 보여주지 못하기 때문입니다. 세리프 폰트는 선이 일정하지 않지만 산세리프 폰트는 처음부터 끝까지 선의 굵기가 일정하므로 웹을 보는 모니터 상에서 잘 표현되는 것입니다. 반면에 세리프 폰트를 사용하면 앏은 선은 거의 보이지 않거나 흐릿하게 보이게 됩니다.



무료 폰트인 성동구청체를 웹폰트로 변환해 워드프레스 사이트에서 표현해봤습니다. 고딕체는 가독성이 좋지만 명조체는 예쁘기는 하지만 가독성이 떨어집니다. 하지만 폰트의 크기가 커지면 상황은 달라집니다.



위 이미지를 클릭하면 크게 보이는데 웹브라우저를 300% 확대해 캡쳐한 것입니다. 글자의 크기가 커지면서 명조체는 한글의 아름다운 곡선이 그대로 표현되고 있지만 고딕체는 무뚝뚝한 형태가 더욱 멋이 없어보입니다. 즉 고딕체는 작은 글자에서만 가독성을 위해서 필요한 것이라고 할 수 있습니다. 따라서 웹에서는 산세리프인 고딕체가, 인쇄물에서는 세리프인 명조체가 사용되는 이유를 알 수 있습니다. 인쇄물에서는 작은 글자라도 선명하게 표현되기 때문이죠. 


웹을 보는 모니터는 해상도가 100ppi(pixel per inch) 즉 평방 인치당 100개의 점으로 글자나 이미지를 표현하고 인쇄물은 1000dpi(dot per inch)로 표현할 수 있습니다. 10배나 차이가 납니다. 


자신의 모니터 해상도를 알아보려면 아래의 사이트에 접속하면 됩니다.


https://www.sven.de/dpi/



세리프와 산세리프 폰트와 관련하여 구글 검색을 해보니 재미있는 그림이 있어서 캡쳐해봤습니다.


http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/



세리프 폰트와 산세리프 폰트의 배틀입니다.



세리프와 산세리프의 특징을 설명하고 있습니다. 세리프 폰트는 세리프로 인해서 글자를 명확하게 보이도록 하므로 인쇄물에서 가독성이 높고 인식이 빠르며 세리프가 없으면 글자를 구분하는데 뇌가 느리게 반응한다고 합니다. 반면에 산세리프는 현대적이며 간단하고 웅장함을 강조합니다. 그러면서 웹에서 글자를 표현하는데 좋고 인쇄물은 1000dpi가 필요하지만 웹은 100dpi만 있어도 된다, 즉 단점이지만 그 단점을 장점화 하고 있습니다. 사람으로 보자면 세리프는 여성적, 산세리프는 남성적이라 할 수 있습니다.



서로의 미디어에 대한 가독성을 강조하면서 중간에 낀 레티나 디스플레이 모니터가 중재에 나섰습니다. 



서로의 세부 특징에 대해 설명합니다. 세리프는 글자를 보는 인간의 눈의 흐름을 부드럽게 하고 서로 다른 글자 사이에서 대조와 여백을 분명하게 해서 구분을 증대시킵니다. 즉 글자를 명확하게 볼 수 있도록 합니다. 또한 하나의 단어를 전체로 인식하도록 묶어주며 가독성이 좋고 피로를 덜어주기 때문에 본문 글자에 사용된다고 합니다. 반면에 산세리프는 단순한 형태로 인해 여러 단계의 복사를 거치더라도 같은 결과를 가져오고 흐려지는 것이 방지됩니다. 또한 글자의 모양이 단순하고 인식하기 좋기 때문에 아이들의 독서에 좋다고 합니다.



본문 글자에는 세리프가 작은 글자에는 산세리프가 사용됩니다. 영국의 타임즈 사이트에서는 세리프 폰트를 채용해 가독성을 위해 1931년부터 Times Roman체를 사용했으며 현재는 New Times Roman체를 2차 폰트로 사용합니다. 1차 폰트는 Georgia 체입니다. 웹에서도 세리프 폰트를 사용하고 있는 것이죠. 노인들의 인쇄물에서 전통적으로 세리프 폰트가 사용됐는데 1982년에 컴퓨터 화면에서는 젊은이를 위해 산세리프 폰트인 Arial이 사용되기 시작했다고 합니다.



세리프와 산세리프의 예제입니다.



웹에서 세리프와 산세리프의 사용 정도입니다.



결론적으로 인쇄물에서는 세리프 폰트가 웹에서는 산세리프 폰트를 사용하는 것이 좋다고 합니다.


폰트에는 지금까지 알아본 세리프와 산세리프 외에 커시브(Cursive) 폰트가 있습니다. 이는 손글씨를 의미하며 필기체 또는 자유체로 말할 수 있습니다. 아주 다양하고 곡선의 변화가 많아서 웹에서는 거의 사용할 수가 없습니다. 이외에 Monospace라고 해서 개발자가 많이 사용하는 폰트가 있는데 이것은 폭이 좁은 i와 같은 글자라도 다른 글자와 같은 공간을 차지하도록 만들어 작은 글자를 많이 보면서 작업하는 개발자에게는 글자를 잘 알아보고 눈의 피로를 덜기 위해 세리프가 더욱 강조된 폰트입니다.



한글의 경우 세리프 폰트의 대표적인 예가 명조체이고 산세리프 폰트는 고딕체이며 고딕체는 돋움체로 불리고 있습니다. 명조체라는 이름이 일본에서 왔다고 해서 바탕체로 불리기도 합니다. 따라서 인쇄물에는 명조체 또는 바탕체가, 웹에서는 고딕체 또는 돋움체가 많이 사용되는 것을 알 수 있습니다.



무료로 공개된 명조체 중 신문사에서 공개한 폰트를 웹폰트로 변경해 워드프레스 사이트에 적용해봤습니다. 일반 명조체 보다는 신문 명조체가 훨씬 보기가 좋습니다. 일반 명조체는 정사각형의 규격인데 반해 신문 명조체는 가로 직사각형 형태로 가로로 읽기에 좋아보입니다. 3가지 신문 명조 중에서 중앙 신문 명조와 조선일보 명조는 bold로 설정해야 선명하게 보입니다. 좀 굵어보여서 색상을 조절했습니다. 하지만 한겨레 결체는 그대로 사용해도 잘 보이는 편입니다.


한글 폰트 테스트 바로가기


위 링크는 무료로 공개된 한글 폰트를 웹폰트로 전환해 구글 드라이브에 저장하고 스타일시트를 가져오기(@import) 해서 테스트 하고 있는 워드프레스 페이지입니다. 웹폰트가 느리다고 하는데 제 개인으로 사용하는 구글 드라이브에서 수십 개의 폰트를 가져오기 해도 그렇게 느리지 않습니다.



저작자 표시 비영리 변경 금지
신고

티스토리 툴바