타이포그래피의 상식들-1부

design | 2008/07/28 14:18 | ozworld
타이포그래피는 최근 인쇄 기술의 발전, 디지털 기술 특히 컴퓨터 기술의 눈부신 발달로 크게 성장했습니다. 많은 사람들이 타이포 그래피를 쉽게 접할 수 있게 되었고 누구나 프로그램을 통해서 자신의 글씨체를 만들 수 있게 되면서 타이포그래피는 일상 속으로 깊이 파고 들게 되었습니다. 관심이 없더라도, 워드 프로세싱이나 블로그 혹은 자신만의 데스크탑을 꾸미면 사람들은 여러 가지 글꼴들을 만나게 됩니다.

여기서 다루고자 하는 부분은 타이포 그래피의 역사나 근본적인 질문인 타이포그래피에서의 형식이란 무엇을 뜻하느냐? 같이 철학적인 질문이 아닙니다. 정말로 타이포그래피(혹은 폰트들)를 처음 접하는 사람들이 가장 궁금해 하는 질문들, 예를 들어서 serif와 sans-serif는 무엇인가? 같이. 그리고 헷갈리기 쉬운 용어들 위주로 알아보고자 합니다. 역사나 핵심적인 이야기들 그리고 대부분의 타이포그래피의 어려운 주제들은 관심이 많은 사람들이나 전문가들에게 위탁하도록 합시다...

1부에서는 구성 요소들과 많이 접하게 되는 용어들을
2부에서는 좀 더 자세하고 상세한 용어들을 알아보고 낱자들을 일일이 해부해 보도록 할 것입니다.
3부는 실용적인 부분을 다룹니다. 간단하게 어떻게 사용하면 좋을지, 제목이나 본문의 배치의 기본적인 상식들(이것은 주관적인 관점에 따라 다를 수 있겠지만)을 배워서 보편적인 아름다움을 이룰 수 있는 타이포 그래피에 대해서 배울 수 있도록 합니다.


1부

구성 요소
단어, 행, 단락, 페이지의 네 가지 구성요소로 구별이 됩니다.

단어-타이포그래피에서 단어는 점으로 인식
행-행은 선으로 인식되며 타입의 크기에 의해서 정한 면적을 차지
단락-단락은 면으로 인식되며 가지런하거나 무질서한 배치에 따라서 다양한 도형으로 인식
페이지-양으로 인식되는 개념이며 여러개의 페이지가 모이면 책이나 문서에서 부피를 형성

타이포 그래피의 색
타이포 그래피에서의 색이란 일반적으로 인식되는 색 고유의 값이나 눈으로 인식되는 색과 달리 바탕과 혼합되어 보이는 회색의 정도, 무채색의 톤을 나타냅니다. 이러한 특징으로 타이포 그래피는 특유의 타입의 크기나 중량등으로 통해서 거의 무한대의 회색의 단계를 표시할 수 있게 됩니다.

여기서 여러분은 ‘다양한 색상이 실제로 사용되지 않는가?’ 라고 물을 수 있을 것입니다.
하지만 타이포 그래피에서 이 색은 검은색에 대한 상대적인 비례의 의미로만 사용되므로 항상 검은색이나 바탕색 대비 색의 비례가 중요한 부분으로 존재합니다.(생각해 보십시오. 글씨란 인식의 대상입니다!)

(사진: 붉은 색은 두드러진 색이므로 적은 양으로도 검은색과 대등하게 인식된다.)

질감
여기서는 실제 만져지는 질감이 아닌 시각을 통해 느껴지는 ‘인식을 통한 촉각’으로 표현됩니다. 행을 이루는 폰트들의 모임이 조밀한가, 떨어져 있는가, 반복됨이 어떠한가에 의해서 질감이 나타내지며 글씨안에 실제로 질감을 넣는 경우도 있지만 그럴 경우에는 글씨 자체에 대한 인식이 떨어져서 감각적 부분에서는 효과가 증가하지만 시각적으로는 오히려 효과가 감소하게 됩니다.

이제 가장 많이 궁금해 하고, 가장 많이 듣게 되는 타이포 그래피의 ‘형’에 대한 부분입니다. 대부분 한글을 통해서 어떤 뜻인지 알게 되므로 특별히 영어로 되어 있거나 뜻이 모호한 부분만 설명하도록 하겠습니다.


서체(Serif, San-serif)
serif(세리프)란 글자의 획 부분에 달린 작은 부분을 말합니다. 세리프의 기원은 로마의 석공들이 끌로 석판을 조각하면서 낱자들을 정렬하기 쉽도록 획의 끝에 가는 선을 조각한 것에서 유래합니다.

serif에는 크게 묵직하고 무게감이 느껴지는 브래킷 세리프(bracket serif)와 가볍고 가는 선의 언브래킷 세리프(unbracket serif)로 나뉩니다. 우리는 여기서 세리프란 글자의 획 끝의 작은 부분이구나, 세리프에도 굵은 것과 가는 것이 있구나 정도만 이해하면 됩니다.

san-serif(산세리프)는 이런 세리프가 없는 글자를 뜻합니다. 한글에서는 고딕체가 바로 산세리프입니다. 반대로 세리프는 한글로 명조체를 의미하기도 합니다.

(사진: 다양한 세리프들)

폭, 경사
폭은 타입들의 수직 수평의 높이와 넓이에 따라 변합니다. 디자이너들은 대체로 원형의 모양이 변하기 때문에 이러한 글씨의 폭이나 비례 변화를 싫어하지만 시각적 효과를 증가시킬 수 있어서 적당한 사용은 문제가 없습니다. 글씨의 너무 심한 폭 변화는 조심하는게 좋습니다.
경사는 이탤릭체로 나타내집니다. 이 경사는 보편적으로 13도에서 16도를 가지고 있습니다. 경우에 따라서는 폭과 마찬가지로 극단적인 경사를 사용할 때도 있지만 역시 마찬가지로 가독성이 줄어들게 됩니다.

브랜딩
브랜딩은 타입 내면에 점진적인 톤의 변화(흔히들 그라데이션 효과라고 하죠)를 뜻합니다. 크게 선형과 원형으로 나뉘는데 말 그대로 선형과 원형은 이 톤의 변화가 수평, 수직, 대각선으로 변하는 걸 말하며 원형은 동심원적으로 색상이 변하는 것을 말합니다.

공간, 중량, 방향
흔히 놓치기 쉬운 것이 바로 이 세 가지 요소인 공간, 중량, 방향입니다.
공간은 지면 속에서 타입들의 공간 모두를 의미합니다. 다시 말해서 타입 내부의 공간, 자간, 어간, 행간, 마진등을(나중에 이 의미들을 알아보도록 할 것입니다. 지금은 이런 것들이 공간을 이룬다는 것만 알고 있으면 됩니다.) 말합니다.

이 공간은 아주 재미있는 요소입니다. 사람들은 글씨가 있는 공간을 2차원적으로만 생각하지만 이 공간을 이용하면 3차원적으로 배치를 할 수가 있습니다.

예를 들어 보겠습니다.
위 그림처럼 타입의 크기와 색을 통해서 후퇴와 진출을 표현할 수 있습니다. 이것은 밝고 차가운 색으로 후퇴를 어둡고 따뜻한 색으로 진출을 시키면서 극대화 시킬 수 있습니다.
중량과 방향은 타입의 굵기나 형태의 방향성에 따라서 나타내는 요소들입니다. 여기서는 크게 설명하지는 않겠습니다.

타이포그래피의 상식들-3부

design | 2008/07/28 14:17 | ozworld
3부-간단한 타입의 특성과 사용

타입들은 여러 가지 종류가 존재하지만 그것이 생성된 이유는 우선 용도에 맞는 타입이 필요했기 때문입니다. 그렇기 때문에 모든 타입-폰트들은 첫 탄생부터 용도가 정해져 있습니다.

당연히 사용자는 용도에 상관없이 사용을 해도 큰 문제가 없습니다. 그러나 제목용으로 일정하게 만들어진 폰트가 본문에 사용될 시에는 잘못된 사용으로 인해서 전체적인 디자인과 구조들이 크게 어긋난 분위기를 만들게 되고 이는 잘못된 사용으로 인해서 무분별한 디자인 남발이 이루어지게 됩니다. 흔히 이는 초보자들이 겪는 가장 큰 문제들로 대부분이 제목용 타입을 본문에 넣거나 본문용 타입을 제목에 넣어서 생기는 것들입니다.

본문용 타입의 특성

심미성, 적정성, 가독성
본문용 서체들은 대체로 심미성이 뛰어납니다. 하지만 이것은 지극히 주관적인 관점이므로 이 서체를 선택할 시에는 독자, 상대방(글을 읽거나 디자인을 보는 사람)을 고려해서 판단을 해야 합니다. 이는 마찬가지로 적정성으로 연결되며 나이와 성별, 지역에 따라 판단해야 함을 뜻합니다. 가독성은 말할 필요도 없겠죠!

크기 일반적으로 본문용 타입은 크기가 12포인트를 넘어서면 읽기가 힘들어집니다. 또한 9포인트 이하가 되면 바탕색과 구별이 안되어서 마찬가지로 가독성이 떨어지게 됩니다. 물론 이것도 독자가 누군가에 따라서 타입의 크기는 달라지게 됩니다.(아동용 도서의 경우는 크기가 대체로 크게 구성됩니다.)

어간 단어 사이의 어간은 크기 만큼 중요한 요소입니다. 대체로 10~12포인트의 본문은 어간을 좁혀도 되지만 그보다 작은 크기는(9포인트 수준의) 어간을 넓혀야만 가독성이 증가하여 단어의 뜻을 명확히 이해하기 쉽습니다.


제목용 타입의 특성
다양한 감각을 독자에게 선사해야 하고 주의력을 끌고 페이지의 분위기를 환기시킬 수 있어야 합니다.

크기 정해진 크기는 없지만 대체로 14포인트 이상을 이룹니다. 그러나 이것은 항상 크기가 커야만 제목용 타입이 된다는 뜻은 아닙니다. 본문용 타입도 위치나 공간 배치로 얼마든지 제목용처럼 보일 수 있습니다.

주의해야 할 것은 현재는 본문용 타입보다는 제목용 타입이 더 많다는 것입니다. 그만큼 선택할 수 있는 폭이 넓다는 것을 의미하며 한편으로는 선택의 어려움이 많다는 것을 의미합니다. 항상 본문과 어울리거나 본문의 의도를 나타낼 수 있는 제목용 타입을 선택해야만 합니다.

또 한가지 중요한 것은 제목용 타입의 어간(단어들 사이의 간격)은 행간(줄 사이의 간격)보다 넓어서는 안된다는 것입니다. 왜냐하면 어간이 행간보다 크면 독자의 시선은 상-하로 이동하게 되어서 혼란스럽게 됩니다. 그리고 영문은 소문자j나 g등 디센더의 크기로 인해서 행간이 더 넓어지기 때문에 행간의 조정에 조심해야 합니다.(한글은 크게 상관이 없습니다.)

다음 예를 보면 알 수 있습니다.

본문용 폰트와 제목용 폰트의 가독성을 증대시키기
제목과 본문은 엄연하게 그 쓰임새가 다릅니다. 이들 사이의 가독성은 절대적인 방정식이 존재하는 것은 아니지만 위에서 언급했듯이 적절하게 사용되어야 합니다. 반복되는 내용들이 많은 것은 그만큼 중요하기 때문으로 생각하시면 겁니다.

본문 본문은 너무 크거나 작아도 안됩니다. 또한 독자의 시선이 방해되지 않고 자연스럽게 내용을 의식하고 생각할 수 있어야 합니다. 자간과 어간은 약간 좁은 것이 독서에 좋으며 행의 길이도 너무 길거나 짧아서는 곤란합니다. 보통 영문은 한 행에 65개의 낱자가 놓이는게 이상적이라고 합니다.

제목 제목은 가독성과 달리 판독성이 중요시 됩니다. 판독성이란 단어 전체나 행의 시각적 이미지가 한눈에 보일 수 있느냐를 의미합니다. 즉, 눈길을 사로잡는 글꼴이 되어야 함을 말합니다. 본문이 자연스럽게 시선이 흘러 내려가도록 해야 한다면 제목은 시선을 고정시키는 힘이 있어야 합니다.

예를 들어서 경고나 무서운 내용의 글 제목이라면 흔들림이 느껴지고 흩어짐이 많아서 불안감을 만들 수 있는 타입을, 종교와 관련된 제목은 엄숙하고 신중한 타입을 선택해야 합니다.

지금까지 알아본 타이포그래피의 상식들만 알아둬도 폰트들을 사용하는데나 디자인 관련 책들을 보는데 큰 문제가 없을 것입니다. 다시 한번 더 말씀드리지만 더 자세한 내용들이나 본격적으로 본문 배치와 구조를 알고 싶은 분은 전문적인 도서를 구입해서 보시길 바랍니다.

타이포그래피의 상식들-2부

design | 2008/07/28 14:12 | ozworld
2부-낱자들의 해부

이번에는 더 깊이 있는 용어들을 다룹니다. 타이포그래피에서 낱자의 각 부분들을 설명하는 용어들을 다룸으로써 타이포 그래피를 세밀하게 이해하고자 하는 분들에게 도움이 되도록 구성했습니다. 하지만 이 내용들도 전체를 설명하고 있지 않습니다! 더 관심을 가지고 있는 분들은 책을 보시면 자세한 내용들이 나옵니다.

(그림 설명)
스템
낱자의 세로획
낱자의 가로획
카운터 낱자에서 획으로 둘러 싸인 부분, 이 공간은 완전히 폐쇄된 공간이 아니라 일부 개방이 되어도 획에 의해 둘러 싸이면 잠재적으로 카운터로 봅니다.


(위 그림의 자세한 설명)
고리(link) g에서 ‘사발(bowl)'과 '루프(loop)'를 연결하는 부분
귀(ear) g의 오른쪽 상단의 튀어나온 부분
꼬리(tail) R이나 j처럼 밑으로 흘려진 대각선의 획
꼭지(apex) 대문자 A 등에 있는 뾰족한 점
눈(eye) e의 위쪽 공간

아센더라인 대문자 및 소문자의 가장 위쪽 부분에 해당되는 가상의 선. 캡라인이라고 부르나 일부 서체들은 대문자와 소문자의 높이가 달라서 대문자는 캡라인, 소문자는 아센더 라인으로 구별
x높이 소문자x의 높이로 소문자에서만 언급됨
베이스라인 대문자 및 소문자 밑변이 정렬되는 가상의 선
디센더라인 소문자 g,p,q,y등의 가장 아랫 부분에 해당되는 가상 선

다음은 한글의 낱자 명칭들을 알아보겠습니다. 한글은 굉장히 많은 부분 명칭들을 가지고 있고 복잡하기 때문에 중요한 구분 선들에 대한 것만 그림으로 다루도록 하겠습니다.

타이포 그래피의 단위
이번에는 크기를 결정하고 그것을 측정하는데 사용되는 중요한 단위인 포인트 단위를 알아보도록 하겠습니다. 꼭 알아둘 필요는 없는 부분이지만 포인트가 몇 cm인지, 혹은 타입이 얼마 정도의 넓이 혹은 몇 평방 면적을 가지는지 알아두면 나중에 배치도를 보고 타입의 배치를 하는데 큰 도움이 될 수 있습니다. 또한 이것은 CSS, HTML등의 웹 문서에도 그대로 적용되는 단위입니다.(CSS를 공부하신 분이라면 매우 친숙할 것입니다!) 이를 알면 웹 문서 작성과 디자인에도 도움이 됩니다. 다만 그다지 알 필요가 없다면 그냥 가볍게 읽고 넘어가도 문제는 없습니다.

1인치 72포인트이며 1인치는 2.54센티미터 이므로 72포인트는 2.54센티미터입니다.
1inch=72points, 1inch=2.54cm=72points
파이카 파이카는 다른 단위와 다르게 타입의 크기가 아닌 행의 폭을 측정하는데 주로 사용되는 단위입니다.
1파이카12포인트입니다. 1pica=12points

엠(em)과 엔(en)
엠은 타입 크기 만큼의 정방형 면적을 말하며 엔은 엠의 절반을 뜻합니다. 엔은 j,n등의 소문자나 폭이 좁은 타입의 면적을 의미합니다.