편집 디자인 이론 STEP 01.

편집디자인 이론 STEP 01. 에서는 타이포그래피(Typography)의 분야에 대해서 정리했습니다. 타이포그래피란 디자인의 가장 기본적인 요소인 시각의 3요소 중 한 가지이므로 실무, 디자인 분야 모두 아주 중요한 요소입니다.

쉽게 말하면 종이 위의 글자라고 생각할 수 있지만, 디자이너라는 직업은 그 글을 읽는 사람에게 효과적이고 미적으로 전달할 수 있도록 만드는 직업이라고 생각합니다. 실무나 교육기관에서 배운 내용을 기반으로 작성하는 글로 잘못된 내용이 포함될 수 있습니다.

 

타이포그래피(Typography)

타이포그래피는 디자인에서 메시지 전달과 조형적인 목적에서 중요한 요소이다. 타이포그래피의 적절한 선택과 표현은 전체적인 레이아웃에 큰 영향을 미치고, 글을 읽는 사람들과의 커뮤니케이션을 보다 쉽고 정확하게 도와주는 역할을 한다. 일반적으로는 활자의 배열 및 활자의 시각적 표현을 뜻하고, 넓게는 레터링, 캘리그래피까지 포함한다.

타이포그래피가 갖는 의미는 사람마다 다르다. 예를 들면 경영주에게는 비즈니스, 글을 읽는 독자에게는 '종이 위의 목소리'이다. 디자이너는 이러한 두 가지의 요소를 연결해 주는 역할을 하는 직업이라고 생각한다. 타이포그라피란 가장 흔하지만 디자인에서 가장 중요하고 기본적인 요소이다.

 

현대 타이포그래피의 두 분야

1. 기능적 타이포그래피(미적기능 < 가독성, 판독성)

활자가 활자의 근본 기능인 전달수단으로서의 목적으로 사용되었을 때 이것을 기능적 타이포그래피라고 한다. 기능적 타이포그래피는 기능(글자를 읽고 이해하는 것)과 미(글꼴의 미적기능)의 적절한 조화를 요구한다.

• *전달수단(가독성, 판독성)의 기능과 미의 기능의 적절한 조화가 필요하다.
• 목적이나 뜻이 분명하게 들어가 있어야 한다.
• 미적요소가 배제되면 타이핑(워드 문서, 메모장)이 된다.
• 필수 요소 6가지가 꼭 지켜져야 된다. (글꼴 / 자간 / 자폭 / 행간 / 띄어쓰기 / 여백)

가독성 : '글이 잘 읽히는가'의 의미

판독성 : '글자, 제목, 본문의 구분이 잘 되는가'의 의미

 

기능적 타이포그래피의 예

 

 

 

2. 실험적 타이포그래피(미적기능 > 가독성, 판독성)

활자를 언어 전달수단으로 사용하지 않고 새로운 실험적 시각전달 재료로 사용하는 것을 의미한다. 활자와 타이포그래피 요소들이 보다 자유롭고 역동감 있게 표현되어 심미적, 미적 긴장감을 유도하는 성향이 짙다.

• 언어전달 수단 보다는 미적기능이 우선시 된다.
• 목적이나 뜻이 분명하게 들어가 있어야 한다.
• 때로는 읽고 이해한다는 글자의 기능이 무시되기도 한다.
• 가독성이 배제되면 그림적요소가 된다.

 

실험적 타이포그래피의 예

 

 

웹 타이포그래피의 두 종류

 

1. 이미지 타이포그래피(Anti-alias Typography)

anti-alias는 픽셀 기반의 포토샵 오브젝트에서 외곽 부분을 미슷한 컬러 톤 단계의 색상으로 부드럽게 처리해주는 것을 의미하며, anti-alias가 많이 들어갔을 때는 부드러워 보이고 색감이 풍부해 보인다. 반대로 anti-alias값이 너무 많이 들어가면 글씨가 번져 보이고 선명도가 떨어지기 때문에 타이포를 표현할 때는 세밀하게 조절하는 능력이 요구된다.

 

- 확인방법 : 마우스로 우 클릭 후 이미지 저장이 되거나 또는 드래그 할 경우 이미지가 통째로 움직인다.

- 사용범위 : 통이미지로 된 메인 비주얼, 배너, 프로모션 페이지에 사용된다.

- 사용서체 : *이미지서체

이미지서체 : 윤고딕, 릭스고딕, 아이덴티티가 있는 변형체 등

 

 

2. CSS 타이포그래피(CSS Typography)

CSS 타이포그래피는 개인의 컴퓨터에 저장되어 있는 시스템 폰트로 코딩 적용 시 사용되는 폰트로 anti-alias의 적용을 받지 않아 디바이스 크기 변화에도 폰트가 뭉개지지 않고 깨끗하고 선명하게 보인다. 한글 폰트의 경우 맑은고딕, 나눔고딕, 본고딕 외에도 다양한 웹 폰트 서체가 계속 개발 중에 있고, 웹디자인의 영역에서 그 영역이 넓어지고 있다. 또한 기존의 이미지 폰트들도 웹 폰트로 많이 개발되고 있다.

 

- 확인방법 : 마우스로 드래그 하면 드래그 영역이 긁히거나, 컴퓨터 언어가 보여진다.

- 사용범위 : 컴퓨터 화면, 웹사이트상에서 보여지는 서체들이 대부분 시스템 서체이다.

- 사용서체 : *시스템서체

시스템서체 : 돋움체, 맑은고딕, 본고딕, 본명조, 나눔고딕, 나눔바른고딕, 나눔명조, 각 기업 아이덴티티 서체도 가능

 

 

 

UI디자인, UX디자인, 디바이스, 디자인노트, 시각디자이너, 웹디자이너, 웹디자인, 인디자인 폰트, 인디자인무료